/* Stats: the analytics toolbar and chart with six tiles and a sortable table of listings. */
.stats-toolbar { flex-wrap: wrap; justify-content: flex-start; }
.stats-filter { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 6px 6px 8px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.stats-filter-thumb { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: #f2f2f2; color: #9a9a9a; }
.stats-filter-thumb .icon { width: 18px; height: 18px; }
.stats-filter-text { display: grid; min-width: 0; }
.stats-filter-text span { color: var(--muted); font-size: 11px; font-weight: 550; }
.stats-filter-text strong { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.stats-filter-actions { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.stats-filter-actions .text-button { min-height: 40px; padding: 8px 10px; white-space: nowrap; }
.stats-filter-actions .button.small { min-height: 40px; white-space: nowrap; }
.stats-filter-actions .button .icon { width: 15px; height: 15px; }

.stats-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-metrics .panel { min-height: 0; gap: 10px; }
.stats-metrics small { color: var(--muted); font-size: 12px; }
.stats-content .analytics-context { margin-top: 14px; }
.analytics-chart-legend i.stats-visitors-key { background: #1f8a5b; }
.stats-caption { margin-top: 4px; color: var(--muted); font-size: 13px; }

.stats-daily-table th, .stats-daily-table td { padding: 12px 14px; font-variant-numeric: tabular-nums; }
.stats-daily-table tbody th { color: var(--text); font-size: 13px; font-weight: 600; }

.stats-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.stats-table th, .stats-table td { padding: 14px 12px; border-top: 1px solid var(--border); font-size: 14px; font-variant-numeric: tabular-nums; }
.stats-table thead th { padding: 6px 8px; color: #646464; font-size: 12px; font-weight: 600; }
.stats-table thead th:first-child { padding-left: 16px; }
.stats-table thead button { display: inline-flex; align-items: center; gap: 4px; width: 100%; min-height: 40px; padding: 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; }
.stats-table thead button:hover { background: #f3f3f3; color: #1a1a1a; }
.stats-table thead th[aria-sort='ascending'] button, .stats-table thead th[aria-sort='descending'] button { color: #1a1a1a; }
.stats-sort-mark { min-width: 10px; }
.stats-table .stats-col-title { width: auto; }
.stats-table :is(th, td):not(.stats-col-title) { width: 12%; }
.stats-table tbody th { padding-left: 16px; font-weight: 400; }
.stats-table tbody td { padding-right: 16px; text-align: right; }
.stats-table thead th:not(.stats-col-title) button { justify-content: flex-end; text-align: right; }
.stats-table thead th:last-child { padding-right: 10px; }
.stats-table tbody tr:hover { background: #fafafa; }
.stats-table tbody tr.is-current { background: #f4f4f4; }
.stats-listing { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left; }
.stats-listing-title { min-width: 0; overflow-wrap: anywhere; }
.stats-listing:hover .stats-listing-title { text-decoration: underline; text-underline-offset: 3px; }
.stats-thumb { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: #f2f2f2; color: #9a9a9a; }
.stats-thumb .icon { width: 18px; height: 18px; }
.stats-empty { margin-top: 4px; }

@media (max-width: 900px) {
  .stats-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-table, .stats-table tbody { display: block; }
  .stats-table thead { display: block; border-top: 1px solid var(--border); }
  .stats-table thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .stats-table thead th { display: block; width: auto !important; padding: 0 !important; border: 0; }
  .stats-table thead button, .stats-table thead th:not(.stats-col-title) button { width: auto; min-height: 44px; padding: 8px 12px; border-radius: 999px; background: #f1f1f1; font-size: 12px; justify-content: center; }
  .stats-table thead th[aria-sort='ascending'] button, .stats-table thead th[aria-sort='descending'] button { background: #1a1a1a; color: #fff; }
  .stats-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 16px; border-top: 1px solid var(--border); }
  .stats-table tbody :is(th, td) { display: block; width: auto !important; padding: 0; border: 0; font-size: 13px; text-align: left; }
  .stats-table tbody th { grid-column: 1 / -1; }
  .stats-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 550; }
  .stats-daily-table, .stats-daily-table tbody { display: block; }
  .stats-daily-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stats-daily-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
  .stats-daily-table :is(th, td) { display: block; padding: 0; border: 0; font-size: 12px; }
  .stats-daily-table tbody th { grid-column: 1 / -1; font-size: 13px; }
  .stats-daily-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; font-weight: 550; }
}
@media (max-width: 680px) {
  .stats-filter { flex-wrap: wrap; }
  .stats-filter-text { flex: 1 1 140px; }
  .stats-filter-actions { flex: 1 1 100%; justify-content: flex-end; margin-left: 0; }
  .stats-filter-actions .text-button, .stats-filter-actions .button.small { min-height: 44px; }
}
@media (max-width: 600px) {
  .stats-metrics .panel:first-child { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .stats-metrics .panel:first-child strong { font-size: 20px; }
  .stats-metrics .panel:first-child span { max-width: none; }
  .stats-metrics small { font-size: 11px; }
}
@media (max-width: 380px) {
  .stats-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stats-metrics .panel { min-height: 0; padding: 14px 12px; gap: 8px; }
  .stats-metrics strong, .stats-metrics .panel:first-child strong { font-size: 20px; letter-spacing: -.4px; white-space: normal; }
  .stats-table tbody tr, .stats-daily-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}