/* Finance reports (debtors' ledger, payments-due calendar), customer-portal designs and the claim-design page.
   Uses the app tokens from app.css (--c-*, --s-*, --r*, --sh*). */

.rpt-stack > * + * { margin-top: var(--s-4); }

/* KPI tiles */
.rpt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.rpt-tile { background: var(--c-card); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--s-4) var(--s-5); border-top: 3px solid var(--c-border-2); min-width: 0; }
.rpt-tile.is-danger  { border-top-color: var(--c-red); }
.rpt-tile.is-warning { border-top-color: var(--c-amber); }
.rpt-tile.is-info    { border-top-color: var(--c-blue); }
.rpt-tile-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-2); }
.rpt-tile-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-top: var(--s-1); color: var(--c-text); overflow-wrap: anywhere; }
.rpt-tile.is-danger .rpt-tile-value { color: var(--c-red); }
.rpt-tile-foot { font-size: .8rem; color: var(--c-text-2); margin-top: var(--s-1); }

/* Ageing bar */
.rpt-ageing { display: flex; height: 14px; border-radius: var(--r-full); overflow: hidden; background: var(--c-border); gap: 2px; }
.rpt-ageing-seg { min-width: 4px; }
.rpt-ageing-seg.is-empty { background: var(--c-border); }
.rpt-legend { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: .85rem; color: var(--c-text-2); }
.rpt-legend li { display: flex; align-items: center; gap: var(--s-2); }
.rpt-legend strong { color: var(--c-text); font-weight: 600; }
.rpt-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Tables */
.rpt-table td, .rpt-table th { white-space: nowrap; }
.rpt-table td:first-child { white-space: normal; }
.rpt-table td:first-child > a { white-space: nowrap; }
.rpt-row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--c-red); }
.rpt-money-overdue { color: var(--c-red); font-weight: 600; }
.rpt-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.rpt-sort:hover { color: var(--c-brand); }
.rpt-sort:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 2px; }

/* Payments-due calendar */
.rpt-cal-bar { flex-wrap: wrap; gap: var(--s-3); }
.rpt-cal-bar .view-toggle { margin-left: auto; }
.rpt-month { font-size: 1.05rem; font-weight: 700; margin: 0; min-width: 9.5em; text-align: center; }
.rpt-cal-totals { display: flex; gap: var(--s-4); color: var(--c-text-2); }
.rpt-view-btn { width: auto; min-height: 30px; padding: 0 var(--s-3); font-size: .8rem; }
.rpt-cal-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: 0 0 var(--s-3); }
.rpt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.rpt-dot.is-invoice   { background: var(--c-brand); }
.rpt-dot.is-milestone { background: var(--c-purple); }
.rpt-dot.is-overdue   { background: var(--c-red); }
.rpt-cal { overflow: hidden; }
.rpt-cal-head, .rpt-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rpt-cal-head > div { padding: var(--s-2) var(--s-3); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-2); border-bottom: 1px solid var(--c-border); }
.rpt-cal-cell { min-height: 112px; padding: var(--s-2); border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rpt-cal-cell:nth-child(7n) { border-right: 0; }
.rpt-cal-cell.is-outside { background: var(--c-slate-bg); }
.rpt-cal-cell.is-today { background: var(--c-brand-light); }
.rpt-cal-day { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-1); font-size: .8rem; color: var(--c-text-2); font-weight: 600; }
.rpt-cal-cell.is-today .rpt-cal-day > span:first-child { background: var(--c-brand); color: var(--c-text-inv); border-radius: var(--r-full); padding: 0 7px; }
.rpt-cal-sum { font-size: .72rem; color: var(--c-text); white-space: nowrap; }
.rpt-item { display: block; text-decoration: none; border-left: 3px solid var(--c-brand); background: var(--c-brand-light); border-radius: var(--r-sm); padding: 2px 6px; color: var(--c-text); min-width: 0; }
.rpt-item:hover { filter: brightness(.97); text-decoration: none; }
.rpt-item:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; }
.rpt-item.is-milestone { border-left-color: var(--c-purple); background: var(--c-purple-bg); }
.rpt-item.is-overdue { border-left-color: var(--c-red); background: var(--c-red-bg); }
.rpt-item-name { display: block; font-size: .75rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-item-sub { display: block; font-size: .7rem; color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-more { background: none; border: 0; padding: 0; color: var(--c-brand); font-size: .72rem; text-align: left; cursor: pointer; }
.rpt-agenda { display: flex; flex-direction: column; gap: var(--s-3); }
.rpt-agenda-list { list-style: none; margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.rpt-item.is-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); }
.rpt-item-main { min-width: 0; }
.rpt-item.is-row .rpt-item-name { font-size: .875rem; }
.rpt-item.is-row .rpt-item-sub { font-size: .8rem; white-space: normal; }
.rpt-item-amount { font-weight: 600; white-space: nowrap; }

/* Customer portal: designs */
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.pd-card { display: flex; flex-direction: column; overflow: hidden; }
.pd-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--c-slate-bg); border-bottom: 1px solid var(--c-border); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb-empty { font-size: 2.5rem; opacity: .5; }
.pd-card-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.pd-name { font-size: 1rem; font-weight: 700; margin: 0; }
.pd-name a { color: var(--c-text); }
.pd-price { font-size: 1.15rem; font-weight: 700; margin-top: var(--s-2); }
.pd-hint { font-size: .8rem; color: var(--c-amber); background: var(--c-amber-bg); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); margin-top: var(--s-2); }
.pd-card-actions { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); flex-wrap: wrap; }
.pd-notices { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.pd-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.pd-main > * + *, .pd-side > * + * { margin-top: var(--s-4); }
.pd-price-table td { white-space: normal; }
.pd-section th { background: var(--c-slate-bg); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-2); text-align: left; }
.pd-total-row td { border-top: 2px solid var(--c-border-2); font-weight: 600; }
.pd-grand-row td { font-size: 1.1rem; font-weight: 700; }
.pd-options { display: grid; gap: var(--s-4); }
.pd-options h3 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-2); margin: 0 0 var(--s-2); }
.pd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pd-chips li { background: var(--c-slate-bg); border: 1px solid var(--c-border); border-radius: var(--r-full); padding: 3px 10px; font-size: .82rem; }
.pd-pay { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); counter-reset: pay; }
.pd-pay li { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px dashed var(--c-border); }
.pd-detail-thumb { width: 100%; border-radius: var(--r); margin-bottom: var(--s-3); }

/* Claim-design page (account page layout from login.css) */
.claim-design { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r); margin: var(--s-4) 0; background: var(--c-slate-bg); }
.claim-thumb { width: 88px; height: 64px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.claim-design-name { font-weight: 700; }
.claim-design-total { font-weight: 600; margin-top: 2px; }
#claimSignIn { display: flex; justify-content: center; text-decoration: none; margin-top: var(--s-3); }
#claimSignIn[hidden] { display: none; }

@media (max-width: 1100px) {
  .rpt-hide-sm { display: none; }
}
@media (max-width: 900px) {
  .rpt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .rpt-cal-cell { min-height: 72px; padding: 4px; }
  .rpt-cal-cell .rpt-item-sub, .rpt-cal-sum { display: none; }
  .rpt-cal-head > div { padding: var(--s-2) 4px; text-align: center; }
}
@media (max-width: 480px) {
  .rpt-tiles { grid-template-columns: 1fr; }
  .rpt-tile-value { font-size: 1.35rem; }
  .rpt-cal-bar .view-toggle { margin-left: 0; }
}