.overview-template:has(.overview-advances) { grid-template-areas: "settlement gunners agents" "rates rates agents" "advances advances advances" "ledger ledger approvals"; }
.overview-advances { grid-area: advances; min-width: 0; }
.advance-overview-total { display: grid; gap: 5px; text-align: right; }
.advance-overview-total span { font-size: 11px; color: var(--muted); }
.advance-overview-total strong { font-size: 22px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.agent-debt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 16px; }
.agent-debt-card { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #171c1f; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.agent-debt-card:hover { border-color: var(--gold); background: var(--gold-soft); }
.agent-debt-card:focus-visible, .advance-overview-table button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.agent-debt-name { display: flex; justify-content: space-between; gap: 10px; font-weight: 750; }
.agent-debt-name > span { color: var(--gold); font-size: 11px; white-space: nowrap; }
.agent-debt-label { color: var(--muted); font-size: 11px; margin-top: 7px; }
.agent-debt-card > strong { font-size: 28px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.agent-debt-card.has-debt > strong { color: #efbb68; }
.agent-debt-note, .agent-debt-pending { color: var(--muted); font-size: 11px; line-height: 1.7; }
.agent-debt-pending { padding-top: 8px; margin-top: 3px; border-top: 1px solid var(--soft-line); color: var(--gold); }
.advance-overview-records-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--soft-line); }
.advance-overview-records-head h3 { margin: 0; font-size: 14px; }
.advance-overview-records-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.advance-overview-records-head > span { color: var(--muted); font-size: 12px; }
.advance-overview-scroll { max-height: 360px; overscroll-behavior: contain; }
.advance-overview-table { min-width: 650px; }
.advance-overview-table tbody tr { cursor: pointer; }
.advance-overview-table tbody tr:hover { background: var(--gold-soft); }
.advance-overview-table th { position: sticky; top: 0; z-index: 1; }
.modal.advance-detail-modal { width: min(860px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.advance-detail-modal .modal-head { flex-shrink: 0; }
.advance-detail-body { overflow-y: auto; min-height: 0; }
.advance-detail-body .advance-overview-records-head { margin-top: 20px; padding-left: 0; padding-right: 0; }
.advance-detail-body .advance-overview-scroll { max-height: none; }
@media (max-width: 1250px) {
  .overview-template:has(.overview-advances) { grid-template-areas: "settlement gunners" "agents agents" "rates rates" "advances advances" "ledger ledger" "approvals approvals"; }
}
@media (max-width: 820px) {
  .overview-template:has(.overview-advances) { grid-template-areas: "settlement" "gunners" "agents" "rates" "advances" "ledger" "approvals"; }
}
@media (max-width: 600px) {
  .overview-advances > .panel-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .advance-overview-total { text-align: left; }
  .agent-debt-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .advance-detail-modal .cash-inspector-fields { grid-template-columns: minmax(0, 1fr); }
  .advance-detail-modal .cash-inspector-figures { grid-template-columns: minmax(0, 1fr); }
}
.overview-metrics:has([data-kind="agent-debt-total"]) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.overview-metrics:has([data-kind="agent-debt-total"]) .metric-card { padding-inline: 14px; }
.overview-metrics:has([data-kind="agent-debt-total"]) .metric-top { gap: 8px; }
.overview-metrics:has([data-kind="agent-debt-total"]) .metric-value { font-size: clamp(24px, 1.85vw, 32px); }
.advance-detail-body > .agent-debt-grid { padding: 0; }
@media (min-width: 1400px) and (max-width: 1450px) {
  .overview-metrics:has([data-kind="agent-debt-total"]) .metric-icon.ledger-metric-icon { width: 40px; height: 40px; }
}
@media (min-width: 1081px) and (max-width: 1399px) {
  .overview-metrics:has([data-kind="agent-debt-total"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .overview-metrics:has([data-kind="agent-debt-total"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-metrics:has([data-kind="agent-debt-total"]) > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .overview-metrics:has([data-kind="agent-debt-total"]) { grid-template-columns: minmax(0, 1fr); }
}