/* KOJAK rep app · «التقارير» (owner spec 2026-09-22): the period and its comparison, the performance summary and its reading,
   then the sections — open ones on top, folding ones with a teaser in the head. Colours from shared/tokens.css only. */

/* ── the period, and the comparison with the one before ── */
.rp-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--kj-sp-2); }
.rp-periods .chip { padding: 8px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-range { margin-bottom: var(--kj-sp-1); }
.rp-cmp-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--kj-fs-sm); }
.rp-cmp-toggle .kj-icon { flex: none; opacity: .35; }
.rp-cmp-toggle.is-active .kj-icon { opacity: 1; }
.rp-cmp-toggle.is-off { opacity: .45; }
.rp-cmp-note { display: flex; align-items: center; gap: 4px; margin-bottom: var(--kj-sp-3); font-size: var(--kj-fs-sm); color: var(--kj-gray-600); }
.rp-cmp-note[hidden] { display: none; }
.rp-stale { margin-bottom: var(--kj-sp-3); }

/* ── a card: a head with an icon, a title and a short caption ── */
.rp-card { margin-bottom: var(--kj-sp-3); padding: 12px 14px 14px; }
.rp-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--kj-sp-3); }
.rp-head b { font-size: var(--kj-fs-lg); font-weight: var(--kj-fw-medium); white-space: nowrap; }
.rp-head small { margin-inline-start: auto; font-size: var(--kj-fs-sm); color: var(--kj-gray-500); text-align: end; }
.rp-head .badge { margin-inline-start: auto; }
.rp-head__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--kj-radius-full); background: var(--kj-gold-soft); color: var(--kj-gold-deep); }

/* the figures: two per row; the main one navy; a delta line under a figure says how it moved */
.rp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kj-sp-2); }
.rp-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; background: var(--kj-white); border: 1px solid var(--kj-gray-200); border-radius: var(--kj-radius-lg); color: inherit; text-decoration: none; }
.rp-tile__label { font-size: var(--kj-fs-sm); font-weight: var(--kj-fw-medium); color: var(--kj-gray-600); }
.rp-tile__val { font-size: var(--kj-fs-xl); font-weight: var(--kj-fw-medium); line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rp-tile__val .amt { font-size: inherit; font-weight: inherit; }
.rp-tile__sub { font-size: var(--kj-fs-xs); color: var(--kj-gray-500); overflow-wrap: anywhere; }
.rp-tile--main { background: var(--kj-dark); border-color: var(--kj-dark); }
.rp-tile--main .rp-tile__label, .rp-tile--main .rp-tile__sub { color: var(--kj-gold); }
.rp-tile--main .rp-tile__val { color: var(--kj-white); }
.rp-tile--link { cursor: pointer; }
.rp-tile--link:active { border-color: var(--kj-gold); }
.rp-delta { display: inline-block; margin-top: 2px; font-size: var(--kj-fs-xs); font-weight: var(--kj-fw-medium); font-variant-numeric: tabular-nums; color: var(--kj-gray-500); }
.rp-delta--up { color: var(--kj-success-deep); }
.rp-delta--down { color: var(--kj-danger-deep); }
.rp-tile--main .rp-delta--up { color: var(--kj-success); }
.rp-tile--main .rp-delta--down { color: var(--kj-danger); }
.rp-tile--main .rp-delta--flat { color: var(--kj-gold); }
.rp-line { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--kj-sp-3); font-size: var(--kj-fs-base); line-height: 1.5; color: var(--kj-gray-700); }
.rp-line .kj-icon { flex: none; margin-top: 3px; color: var(--kj-gold-deep); }
.rp-line + .rp-line { margin-top: 6px; }
.rp-line--good { color: var(--kj-success-deep); }
.rp-line--good .kj-icon { color: var(--kj-success); }
.rp-line--bad { color: var(--kj-danger-deep); }
.rp-line--bad .kj-icon { color: var(--kj-danger); }
.rp-sub { margin: var(--kj-sp-3) 0 2px; font-size: var(--kj-fs-sm); font-weight: var(--kj-fw-medium); color: var(--kj-gold-deep); }
.rp-none { margin: 4px 0; font-size: var(--kj-fs-base); color: var(--kj-gray-500); }
.rp-go { margin-top: var(--kj-sp-3); }

/* the reading of the summary, in plain words */
.rp-reading { margin-top: var(--kj-sp-3); padding: 10px 12px; border-radius: var(--kj-radius-lg); background: var(--kj-cream-bg); border: 1px solid var(--kj-gold-soft); }
.rp-reading b { display: block; margin-bottom: 4px; font-size: var(--kj-fs-md); font-weight: var(--kj-fw-medium); color: var(--kj-gold-deep); }
.rp-reading ul { margin: 0; padding-inline-start: 18px; font-size: var(--kj-fs-base); line-height: 1.7; color: var(--kj-gray-700); }

/* the month's target */
.rp-target .progress { height: 10px; margin-top: var(--kj-sp-3); }

/* charts: bars (and a second bar for what came in), a line for the balance; the labels are HTML under them */
.rp-chartbox { margin-top: var(--kj-sp-3); }
.rp-chart__tabs { margin-bottom: 6px; }
.chip--sm { padding: 4px 10px; font-size: var(--kj-fs-sm); }
.rp-chart__svg { height: 120px; }
.rp-chart__x { display: grid; direction: ltr; margin-top: 4px; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); text-align: center; font-variant-numeric: tabular-nums; }
.rp-chart__x span { min-width: 0; white-space: nowrap; }
.rp-chart__cap { margin-top: 4px; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.rp-chart__ends { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.rp-chart__ends b { font-size: var(--kj-fs-sm); color: var(--kj-dark); font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke: var(--kj-dark); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart__dot { fill: var(--kj-gold); stroke: var(--kj-dark); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart__zero { stroke: var(--kj-gray-300); stroke-width: 1; stroke-dasharray: none; vector-effect: non-scaling-stroke; }
.rp-chart__svg .chart__bar--in { fill: var(--kj-gold); opacity: 1; }
.rp-legend { display: flex; gap: 14px; margin-top: 6px; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.rp-legend i { display: inline-block; width: 10px; height: 10px; margin-inline-end: 4px; border-radius: 3px; vertical-align: -1px; }
.rp-legend i.is-out { background: var(--kj-dark); }
.rp-legend i.is-in { background: var(--kj-gold); }

/* the balance and the stock: start · end · change */
.rp-shift { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kj-sp-2); }
.rp-shift > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; background: var(--kj-white); border: 1px solid var(--kj-gray-200); border-radius: var(--kj-radius-lg); font-size: var(--kj-fs-sm); }
.rp-shift small { font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.rp-shift .amt { font-size: var(--kj-fs-sm); }
.rp-shift__d { font-weight: var(--kj-fw-medium); font-variant-numeric: tabular-nums; color: var(--kj-gray-700); }
.rp-shift__d.is-up { color: var(--kj-success-deep); }
.rp-shift__d.is-down { color: var(--kj-danger-deep); }
.rp-bal__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px 14px; padding: 8px 0; }
.rp-bal__row + .rp-bal__row { border-top: 0.5px solid var(--kj-gray-100); }
.rp-bal__row > .amt { text-align: end; }
.rp-bal__row--head { padding: 0 0 4px; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.rp-bal__row--head > span:not(:first-child) { text-align: end; }
.rp-bal__name { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--kj-fw-medium); }
.rp-bal__name .kj-icon { color: var(--kj-gold-deep); }

/* ── the folding sections: the head carries a teaser ── */
.rp-det { margin-bottom: var(--kj-sp-2); padding: 0; overflow: hidden; }
.rp-det__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; user-select: none; }
.rp-det__head::-webkit-details-marker { display: none; }
.rp-det__title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rp-det__title b { font-size: var(--kj-fs-md); font-weight: var(--kj-fw-medium); }
.rp-det__title small { font-size: var(--kj-fs-sm); color: var(--kj-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-det__head > .kj-icon:last-child { flex: none; color: var(--kj-gray-500); transition: transform var(--kj-transition-fast); }
.rp-det[open] > .rp-det__head > .kj-icon:last-child { transform: rotate(180deg); }
.rp-det__head .rp-head__icon { width: 28px; height: 28px; }
.rp-det__body { padding: 0 14px 12px; }

/* a table row: the name (and what it is), then two figures */
.rp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 0.5px solid var(--kj-gray-100); font-size: var(--kj-fs-base); }
.rp-row--head { padding: 2px 0 4px; border-top: 0; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.rp-row--head > span:not(:first-child) { text-align: end; }
.rp-row__name { min-width: 0; display: flex; flex-direction: column; }
.rp-row__name b { font-weight: var(--kj-fw-medium); overflow-wrap: anywhere; }
.rp-row__name small { font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.rp-row__num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* a party of a top list: the avatar, the name and what happened, the figure */
.rp-party { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 0.5px solid var(--kj-gray-100); color: inherit; text-decoration: none; }
.rp-party__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rp-party__name b { font-weight: var(--kj-fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-party__name small { font-size: var(--kj-fs-xs); color: var(--kj-gray-500); overflow-wrap: anywhere; }
.rp-party__num { flex: none; max-width: 45%; text-align: end; font-size: var(--kj-fs-sm); font-weight: var(--kj-fw-medium); font-variant-numeric: tabular-nums; }

/* ── the comparison table ── */
.rp-cmp__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); align-items: baseline; gap: 6px; padding: 8px 0; border-top: 0.5px solid var(--kj-gray-100); font-size: var(--kj-fs-sm); font-variant-numeric: tabular-nums; }
.rp-cmp__row > :not(:first-child) { text-align: end; }
.rp-cmp__row b { font-weight: var(--kj-fw-medium); color: var(--kj-dark); }
.rp-cmp__row > span:nth-child(3) { color: var(--kj-gray-500); }
.rp-cmp__row--head { border-top: 0; padding-top: 0; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.rp-cmp .rp-delta { margin-top: 0; font-size: var(--kj-fs-sm); }

/* ── the period's transactions ── */
.rp-txns__search { margin-bottom: var(--kj-sp-2); }
.rp-txns { margin-top: var(--kj-sp-2); }
.rp-txns__day { margin: var(--kj-sp-3) 0 4px; font-size: var(--kj-fs-sm); font-weight: var(--kj-fw-medium); color: var(--kj-gold-deep); }
.rp-txns__day:first-child { margin-top: 0; }
.rp-txn { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 0.5px solid var(--kj-gray-100); }
.rp-txn > .prow__avatar { text-decoration: none; }
.rp-txn__main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title end' 'sum end'; column-gap: 8px; color: inherit; text-decoration: none; }
.rp-txn__title { grid-area: title; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rp-txn__title b { min-width: 0; font-weight: var(--kj-fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-txn__title small { flex: none; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.rp-txn__sum { grid-area: sum; font-size: var(--kj-fs-sm); color: var(--kj-gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-txn__end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: var(--kj-fs-sm); }
.rp-txns__status { margin-top: 6px; font-size: var(--kj-fs-xs); text-align: center; }
.rp-txns__more { width: 100%; margin-top: 6px; }