.reports-nav summary { cursor: pointer; }
.reports-nav summary::after { content: '+'; margin-left: auto; }
.reports-nav[open] summary::after { content: '-'; }
.reports-nav .reports-nav-child { padding-left: 32px; font-size: 12px; }
.reports-page .reports-toolbar { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.reports-page .reports-status { color: var(--color-grey-500); }
.reports-page .reports-section { margin-bottom: 24px; }
.reports-page .reports-section-header { padding: 20px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-grey-200); }
.reports-page .reports-section-header h2 { font-size: 18px; margin: 0; }
.reports-page .reports-count { border-radius: 20px; padding: 4px 10px; background: var(--color-primary-100); color: var(--color-primary); }
.reports-page .reports-outOfStock .reports-count { background: var(--color-danger-light); color: var(--color-danger-dark); }
.reports-page .reports-lowStock .reports-count { background: var(--color-warning-light); color: var(--color-warning-dark); }
.reports-page .reports-table-wrap { overflow-x: auto; }
.reports-page .data-table { min-width: 650px; }
.reports-page .reports-product-name { min-width: 260px; white-space: normal; }
.reports-page .reports-empty { padding: 32px; text-align: center; color: var(--color-grey-500); }
.reports-page .reports-error { padding: 20px; border: 1px solid var(--color-danger); border-radius: 8px; color: var(--color-danger-dark); }
/* Bound only Payments to the viewport; keep overflow inside its table. */
.main-content:has(.pending-payments-report) { flex: 1; width: auto; min-height: 0; height: 100dvh; }
.page-content:has(.pending-payments-report) { height: 100%; max-width: none; padding: 12px 16px; overflow: hidden; }
.pending-payments-report { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.pending-payments-report .reports-results { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pending-payments-report .page-header { margin-bottom: 12px; flex-shrink: 0; }
.pending-payments-report .pending-payments-summary { flex-shrink: 0; }
.pending-payments-report .reports-section { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pending-payments-report .reports-section-header,
.pending-payments-report .tab-nav,
.pending-payments-report .pagination { flex-shrink: 0; }
.pending-payments-report .reports-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.pending-payments-report .data-table { min-width: 0; width: 100%; table-layout: auto; }
.pending-payments-report .data-table th { white-space: normal; }
.pending-payments-report .data-table thead { position: sticky; top: 0; z-index: 1; }
.pending-payments-report .reports-toolbar { margin-bottom: 8px; }
.pending-payments-report .reports-toolbar:has(.reports-status:empty) { display: none; }
.pending-payments-report .pending-payments-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pending-payments-report .stat-card { padding: 12px 14px; border-radius: 10px; }
.pending-payments-report .stat-label { margin-top: 0; font-size: 12px; }
.pending-payments-report .stat-value { font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.pending-payments-report .reports-section { margin-bottom: 0; }
.pending-payments-report .reports-section-header { padding: 10px 14px; }
.pending-payments-report .reports-section-header h2 { font-size: 16px; }
.pending-payments-report .tab-nav { margin-bottom: 0; padding: 0 6px; }
.pending-payments-report .tab-btn { padding: 10px 16px; }
.pending-payments-report .data-table th,
.pending-payments-report .data-table td { padding: 8px 10px; font-size: 12px; }
.pending-payments-report .data-table td { white-space: normal; overflow-wrap: anywhere; }
.pending-payments-report .pagination { padding: 8px 14px; gap: 8px; flex-wrap: wrap; }
.pending-payments-report .pagination-btn { width: 30px; height: 30px; }
@media (max-width: 900px) {
  .pending-payments-report .pending-payments-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .pending-payments-report .pending-payments-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pending-payments-report .stat-value { font-size: 20px; }
}


/* Product stock and sales report cards. */
.stock-sales-page .page-header { gap: 16px; flex-wrap: wrap; }
.stock-sales-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.stock-sales-report { --report-accent: var(--color-primary); --report-tint: var(--color-primary-50); display: flex; flex-direction: column; min-width: 0; border-top: 3px solid var(--report-accent); }
.stock-sales-outOfStock { --report-accent: #b91c1c; --report-tint: #fff5f5; }
.stock-sales-lowStock { --report-accent: #92400e; --report-tint: #fffbeb; }
.stock-sales-card-header { padding: 22px; background: var(--report-tint); border-bottom: 1px solid var(--color-grey-200); }
.stock-sales-card-heading { display: flex; align-items: center; gap: 10px; }
.stock-sales-card-heading h2 { font-size: 16px; font-weight: 600; color: var(--color-grey-900); }
.stock-sales-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: white; color: var(--report-accent); font-size: 20px; font-weight: 700; }
.stock-sales-total { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.stock-sales-total strong { font-size: 34px; line-height: 1.2; font-weight: 700; color: var(--color-grey-900); font-variant-numeric: tabular-nums; }
.stock-sales-total span, .stock-sales-card-header p { font-size: 12px; color: var(--color-grey-500); }
.stock-sales-card-header p { margin-top: 8px; }
.stock-sales-list { flex: 1; max-height: 480px; overflow-y: auto; scrollbar-gutter: stable; }
.stock-sales-list ul { list-style: none; margin: 0; padding: 0; }
.stock-sales-product { margin: 0 18px; padding: 18px 4px; border-bottom: 1px solid var(--color-grey-100); }
.stock-sales-product:last-child { border-bottom: 0; }
.stock-sales-product h3 { font-size: 13px; line-height: 1.6; font-weight: 600; color: var(--color-grey-800); overflow-wrap: anywhere; }
.stock-sales-product dl { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; }
.stock-sales-product dt { font-size: 11px; color: var(--color-grey-500); margin-bottom: 4px; }
.stock-sales-product dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-grey-700); font-variant-numeric: tabular-nums; }
.stock-sales-product dd.stock-sales-highlight { color: var(--report-accent); }
.stock-sales-card-footer { padding: 13px 22px; border-top: 1px solid var(--color-grey-200); font-size: 11px; color: var(--color-grey-500); background: var(--color-grey-50); }
.stock-sales-page :is(button, input, .stock-sales-list):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.stock-sales-grid > .reports-error { grid-column: 1 / -1; }
@media (max-width: 1100px) { .stock-sales-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .stock-sales-grid { grid-template-columns: 1fr; gap: 16px; }
  .stock-sales-card-header { padding: 18px; }
  .stock-sales-list { max-height: 400px; }
}