/**
 * Financial summary section.
 *
 * Scoped under .pdfin, self-contained, no dependency on any portfolio CSS.
 * Product palette: green is an accent on rules, positive figures and bar
 * fills — never a background wash. Grounds stay neutral.
 *
 * Logical properties throughout (margin-inline, text-align:start) so RTL
 * mirrors without a single direction-specific rule.
 */

.pdfin {
  --pdfin-green: #2e8b57;
  --pdfin-green-dark: #1f6e44;
  --pdfin-amber: #f59e0b;
  --pdfin-red: #dc2626;
  --pdfin-ink: #1f2937;
  --pdfin-muted: #6b7280;
  --pdfin-line: #e5e7eb;
  --pdfin-ground: #f9fafb;

  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-block-start: 2px solid var(--pdfin-green);
  color: var(--pdfin-ink);
  font-size: 0.875rem;
}

/* ---- header ---- */

.pdfin-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block-end: 1rem;
}

.pdfin-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--pdfin-green-dark);
}

.pdfin-spacer { flex: 1 1 auto; }

.pdfin-period,
.pdfin-filter,
.pdfin-recalc {
  border: 1px solid var(--pdfin-line);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--pdfin-ink);
  cursor: pointer;
}

.pdfin-recalc:hover { border-color: var(--pdfin-green); color: var(--pdfin-green-dark); }

.pdfin-download {
  border: 1px solid var(--pdfin-line);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--pdfin-ink);
  text-decoration: none;
  white-space: nowrap;
}

.pdfin-download:hover {
  border-color: var(--pdfin-green);
  color: var(--pdfin-green-dark);
  text-decoration: none;
}

.pdfin-asof {
  font-size: 0.75rem;
  color: var(--pdfin-muted);
  white-space: nowrap;
}

/* ---- KPI band ---- */

.pdfin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--pdfin-line);
  border: 1px solid var(--pdfin-line);
  border-radius: 6px;
  overflow: hidden;
}

.pdfin-kpi {
  background: #fff;
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  /* Logical value: flips correctly in RTL without a second rule. */
  align-items: start;
}

.pdfin-kpi-val {
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.pdfin-kpi-lbl {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pdfin-muted);
}

.pdfin-kpi--good .pdfin-kpi-val { color: var(--pdfin-green-dark); }
.pdfin-kpi--warn .pdfin-kpi-val { color: #92400e; }
.pdfin-kpi--bad  .pdfin-kpi-val { color: var(--pdfin-red); }

/* ---- narrowing ----
   Loud on purpose. A narrowed total looks identical to a whole one, and
   the cost of missing the difference is quoting a subset as the total. */

.pdfin-filter-note {
  margin-block-end: 0.625rem;
  padding: 0.4rem 0.625rem;
  border-inline-start: 3px solid var(--pdfin-green);
  background: #ecfdf5;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--pdfin-green-dark);
  font-weight: 600;
}

/* ---- period comparison ---- */

.pdfin-compare[aria-pressed="true"] {
  border-color: var(--pdfin-green);
  color: var(--pdfin-green-dark);
  font-weight: 600;
}

.pdfin-cmp-note {
  margin-block-end: 0.625rem;
  font-size: 0.75rem;
  color: var(--pdfin-muted);
}

/* The caveat is the part that stops a half-finished month being read as
   a collapse, so it carries the warning colour rather than muted grey. */
.pdfin-cmp-caveat { color: #92400e; }

.pdfin-kpi-delta {
  margin-block-start: 0.125rem;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  /* Arrows are directional glyphs, not text: kept LTR so they still mean
     up and down on an Arabic page. */
  unicode-bidi: isolate;
}

.pdfin-delta--good { color: var(--pdfin-green-dark); }
.pdfin-delta--bad  { color: var(--pdfin-red); }
.pdfin-delta--flat { color: var(--pdfin-muted); }

/* ---- collection bar ---- */

.pdfin-bar {
  display: flex;
  width: 100%;
  height: 10px;
  margin-block-start: 1rem;
  border-radius: 5px;
  overflow: hidden;
  background: var(--pdfin-line);
}

.pdfin-bar-seg { height: 100%; }
.pdfin-bar-collected   { background: var(--pdfin-green); }
.pdfin-bar-secured     { background: var(--pdfin-amber); }
.pdfin-bar-outstanding { background: #e5e7eb; }

.pdfin-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-block-start: 0.5rem;
  font-size: 0.75rem;
  color: var(--pdfin-muted);
}

.pdfin-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.pdfin-legend-exp { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

.pdfin-sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* ---- warnings ---- */

.pdfin-warnings {
  margin-block-start: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--pdfin-line);
}

.pdfin-warn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: #fff;
  font-size: 0.8125rem;
  /* Coloured edge rather than a coloured fill — the row stays readable. */
  border-inline-start: 3px solid transparent;
}

.pdfin-warn-lbl { flex: 1 1 auto; }
.pdfin-warn-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pdfin-warn--bad  { border-inline-start-color: var(--pdfin-red); background: #fef2f2; }
.pdfin-warn--bad  .pdfin-warn-val { color: var(--pdfin-red); }
.pdfin-warn--warn { border-inline-start-color: var(--pdfin-amber); background: #fffbeb; }
.pdfin-warn--warn .pdfin-warn-val { color: #92400e; }
.pdfin-warn--info { border-inline-start-color: var(--pdfin-green); background: #ecfdf5; }
.pdfin-warn--info .pdfin-warn-val { color: var(--pdfin-green-dark); }

/* ---- breakdown ---- */

.pdfin-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-block-start: 1rem;
}

.pdfin-col h4 {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pdfin-green-dark);
  border-block-end: 1px solid var(--pdfin-line);
  padding-block-end: 0.25rem;
}

.pdfin-tbl { width: 100%; border-collapse: collapse; }
.pdfin-tbl td { padding: 0.25rem 0; border-block-end: 1px solid #f3f4f6; text-align: start; }

/* Money right-aligned with tabular figures so decimal points line up —
   a column of amounts is unreadable otherwise. */
.pdfin-tbl .pdfin-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pdfin-bad { color: var(--pdfin-red); font-weight: 600; }

/* ---- states ---- */

.pdfin-muted, .pdfin-error {
  padding: 0.875rem;
  background: var(--pdfin-ground);
  border-radius: 6px;
  color: var(--pdfin-muted);
}

.pdfin-error { border-inline-start: 3px solid var(--pdfin-amber); }
.pdfin-error p { margin: 0.25rem 0 0; font-size: 0.8125rem; }

/* ---- health page ----
   Same palette, but this page is read top to bottom rather than glanced
   at, so verdicts get a full row instead of a coloured edge. */

.pdfin-health {
  --pdfin-green: #2e8b57;
  --pdfin-green-dark: #1f6e44;
  --pdfin-amber: #f59e0b;
  --pdfin-red: #dc2626;
  --pdfin-muted: #6b7280;
  --pdfin-line: #e5e7eb;
  max-width: 60rem;
}

.pdfin-health h2 {
  margin-block: 1.75rem 0.5rem;
  font-size: 1.0625rem;
  color: var(--pdfin-green-dark);
  border-block-end: 1px solid var(--pdfin-line);
  padding-block-end: 0.25rem;
}

.pdfin-health h3 {
  margin-block: 1.25rem 0.375rem;
  font-size: 0.9375rem;
}

.pdfin-hbanner {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  border-inline-start: 3px solid transparent;
  font-size: 0.875rem;
  margin-block-end: 0.5rem;
}

.pdfin-hbanner--good { background: #ecfdf5; border-inline-start-color: var(--pdfin-green); color: var(--pdfin-green-dark); }
.pdfin-hbanner--warn { background: #fffbeb; border-inline-start-color: var(--pdfin-amber); color: #92400e; }
.pdfin-hbanner--bad  { background: #fef2f2; border-inline-start-color: var(--pdfin-red); color: #b91c1c; font-weight: 600; }
.pdfin-hbanner--info { background: #f9fafb; border-inline-start-color: var(--pdfin-line); color: var(--pdfin-muted); }

.pdfin-check-why {
  margin-block: 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--pdfin-muted);
}

/* Wide diagnostic tables scroll in their own box rather than pushing the
   admin page sideways. */
.pdfin-health table { display: block; overflow-x: auto; max-width: 100%; }

/* ---- skeleton ----
   Painted at the final geometry so nothing shifts when data lands. */

.pdfin-skel { margin-block-start: 1.5rem; padding-block-start: 1rem; border-block-start: 2px solid #e5e7eb; }

.pdfin-skel-row {
  height: 58px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e9ebef 37%, #f3f4f6 63%);
  background-size: 400% 100%;
  animation: pdfin-shimmer 1.4s ease-in-out infinite;
}

.pdfin-skel-bar { height: 10px; margin-block-start: 1rem; border-radius: 5px; background: #f3f4f6; }

@keyframes pdfin-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .pdfin-skel-row { animation: none; }
}