/* Payment Tracking — the Dashboard.
 *
 * Two densities on one screen. The Billed & Payment summary is read once and
 * wears the KPI cards the Reports screen already defines, so a reader arriving
 * from there recognises it. Everything below it is a tile: small enough that a
 * report's charts sit on one row, and drawn compact rather than shrunk, so the
 * type inside a tile is type and not a smudge.
 *
 * The tile is the affordance. It lifts on hover and carries a focus ring,
 * because it opens something, and a chart that opens has to look like it does.
 */

/* ---------- scope bar ---------- */

.ptsd-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.ptsd-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ptsd-field > span {
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* One height across the row: a date input and a select size themselves
   differently, and two rows of labels at two heights reads as a misprint. */
.ptsd-field .pts-select {
  min-width: 168px;
  height: 34px;
  box-sizing: border-box;
}
.ptsd-field input[type="date"].pts-select { min-width: 148px; }
/* Pushed to its own end of the bar: it describes the bar rather than sitting
   in it, and reads as a caption at the far side instead of a fifth field. */
.ptsd-scope-note {
  flex: 1 1 220px;
  margin: 0;
  text-align: right;
  font-size: calc(11px * var(--ui-font-scale, 1));
  color: var(--text-muted);
}

/* ---------- the summary, once per set of records ---------- */

.ptsd-summary { margin: 0 0 20px; }
.ptsd-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ptsd-summary-head h3 {
  margin: 0;
  font-size: calc(12px * var(--ui-font-scale, 1));
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
}
.ptsd-summary-head p { margin: 0; font-size: calc(11px * var(--ui-font-scale, 1)); color: var(--text-muted); }
.ptsd-summary .pts-kpis { margin-bottom: 10px; }
/* A repeat of the summary is a change of records, not a new page. It sits
   further from the report above it than the reports sit from each other, so
   the break is visible without a rule across the screen. */
.ptsd-summary + .ptsd-report { margin-top: 4px; }
.ptsd-report + .ptsd-summary { margin-top: 30px; }

/* ---------- one report's charts ---------- */

.ptsd-report { margin: 0 0 22px; }
.ptsd-report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  margin-bottom: 9px;
}
.ptsd-report-head h4 {
  margin: 0;
  font-size: calc(12.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  color: var(--text);
}
.ptsd-report-head p {
  margin: 0;
  font-size: calc(11px * var(--ui-font-scale, 1));
  color: var(--text-muted);
  flex: 1 1 260px;
  min-width: 0;
}

/* Tiles in a row share a height. A chart's height comes from how many groups
   it draws, so left to themselves the tiles in one report step up and down
   across the row and read as damage rather than as data. */
.ptsd-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: stretch;
  gap: 12px;
}

.ptsd-tile {
  margin: 0;
  padding: 10px 12px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ptsd-tile:hover,
.ptsd-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--text-muted);
  box-shadow: 0 6px 18px rgba(11, 18, 32, .13);
}
.ptsd-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ptsd-tile-cap {
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 6px;
  /* Two lines and then an ellipsis: a title that wrapped to four would push
     the chart out of a row that every other tile keeps. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
/* The chart inside a tile is not the thing being pointed at — the tile is —
   so it takes no pointer of its own and no tooltip follows the cursor across
   a mark the reader is only passing over on the way to clicking. */
.ptsd-tile-body { pointer-events: none; }
.ptsd-tile-body .pts-viz-legend { font-size: calc(9.5px * var(--ui-font-scale, 1)); gap: 4px 10px; margin: 0 0 4px; }
.ptsd-tile-body .pts-viz-key i { width: 7px; height: 7px; }
.ptsd-tile-body .pts-viz-fail { font-size: calc(10.5px * var(--ui-font-scale, 1)); margin: 6px 0; }

.ptsd-none,
.ptsd-foot {
  margin: 8px 0 0;
  font-size: calc(11px * var(--ui-font-scale, 1));
  color: var(--text-muted);
}
.ptsd-none { padding: 22px 0; }

/* ---------- a chart opened at reading size ---------- */

body.ptsd-locked { overflow: hidden; }

.ptsd-open {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 18, 32, .52);
}
.ptsd-open-frame {
  width: min(900px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(11, 18, 32, .3);
}
.ptsd-open-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.ptsd-open-head h3 { margin: 2px 0 0; font-size: calc(14.5px * var(--ui-font-scale, 1)); font-weight: 700; }
.ptsd-open-from {
  margin: 0;
  font-size: calc(10.5px * var(--ui-font-scale, 1));
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ptsd-open-sub { margin: 4px 0 0; font-size: calc(11.5px * var(--ui-font-scale, 1)); color: var(--text-muted); }
.ptsd-open-x {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  font-size: calc(17.5px * var(--ui-font-scale, 1));
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ptsd-open-x:hover { color: var(--text); border-color: var(--text-muted); }
.ptsd-open-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.ptsd-open-pick:empty { display: none; }

@media (max-width: 720px) {
  .ptsd-scope-note { text-align: left; }
  .ptsd-open { padding: 12px; }
}

@media print {
  .ptsd-scope, .ptsd-open { display: none !important; }
  .ptsd-tile { break-inside: avoid; box-shadow: none; }
}

/* ---------- plain-language captions (shared with the Reports cards) ---------- */
.ptsd-summary .pts-kpi .kpi-plain {
  display: block;
  margin-top: 8px;
  font-size: calc(12px * var(--ui-font-scale, 1));
  line-height: 1.4;
  color: var(--text);
}
.ptsd-summary .pts-kpi .kpi-plain + .kpi-note { margin-top: 4px; font-size: calc(10.5px * var(--ui-font-scale, 1)); }
.ptsd-summary .pts-kpi[title] { cursor: help; }
.ptsd-summary .pts-kpi .kpi-info {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: calc(8.5px * var(--ui-font-scale, 1));
  font-weight: 700;
  font-style: italic;
  text-transform: none;
  opacity: .75;
}

/* ---------- a tile says it opens ---------- */
.ptsd-tile { position: relative; }
.ptsd-tile-cap { padding-right: 22px; }
.ptsd-tile-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  padding: 2px;
  border-radius: 4px;
  color: var(--text-muted);
  background: var(--surface);
  transition: color .12s ease, background .12s ease;
}
.ptsd-tile-expand svg { width: 100%; height: 100%; display: block; }
.ptsd-tile:hover .ptsd-tile-expand,
.ptsd-tile:focus-visible .ptsd-tile-expand { color: var(--primary); }
.ptsd-tile-flag {
  position: absolute;
  bottom: 6px;
  right: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: calc(9.5px * var(--ui-font-scale, 1));
  font-weight: 600;
  color: #c0392b;
  background: rgba(192, 57, 43, .1);
}
[data-theme="dark"] .ptsd-tile-flag { color: #e66767; background: rgba(230, 103, 103, .14); }

/* ---------- reports with nothing in this scope ---------- */
.ptsd-empty { margin: 18px 0 8px; }
.ptsd-empty-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.ptsd-empty-list li {
  padding: 9px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: calc(11.5px * var(--ui-font-scale, 1));
  color: var(--text-muted);
}
.ptsd-empty-list li strong { display: block; color: var(--text); font-size: calc(12px * var(--ui-font-scale, 1)); margin-bottom: 2px; }