/* ── estadistiques.css ─────────────────────────────────────────────────────────
   Mòdul «Estadístiques»: capçalera (breadcrumb + comptador), taula, sentinel
   de scroll infinit i variants de cel·la.

   Patró inspirat en v5 (db-section + #section-estadistiques), adaptat a v4
   (breakpoint d’amagada del breadcrumb: 980px).
   ─────────────────────────────────────────────────────────────────────────── */

#section-estadistiques .estadistiques-view {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#section-estadistiques .estadistiques-results-scoped {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Capçalera de resultats: comptador (alineat amb altres mòduls) ─────── */

#section-estadistiques .results-header-end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ── Drill-down: botó sticky (patró programa-page-close-sticky) ─────────── */

#section-estadistiques .estadistiques-drill-card {
  position: relative;
  overflow: visible;
}

#section-estadistiques .estadistiques-drill-back-sticky {
  position: sticky;
  top: var(--estadistiques-drill-back-sticky-top, max(var(--space-2), env(safe-area-inset-top)));
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 calc(-1 * var(--bb-min-height) + 8px) 0;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
}

#section-estadistiques .estadistiques-drill-back-sticky .estadistiques-drill-back {
  pointer-events: auto;
  /* +6px amunt i +15px a la dreta respecte al patró base (-8px -8px). */
  margin: -14px -23px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

#section-estadistiques .estadistiques-drill-back.sidebar-close::before {
  content: none;
}

#section-estadistiques .estadistiques-drill-card .results-count {
  margin-top: 20px;
}

/* El fil d'Ariadna també és visible en mòbil: secció a l'esquerra, comptador a
   la dreta. */
@media (max-width: 980px) {
  #section-estadistiques .results-header {
    justify-content: space-between;
  }

  /* Evita que el reflow de la taula (buidat / «Carregant…») estrenyi el panell
     de filtres acoblat i la resta del contingut en horitzontal. */
  #section-estadistiques [data-results-card] {
    overflow-x: clip;
    max-width: 100%;
  }

  #section-estadistiques .estadistiques-table {
    table-layout: fixed;
    min-width: 100%;
  }
}

/* ── Camps de data de l'interval (sidebar) ─────────────────────────────────
 * Estil compartit a filters.css (`.date-bounds-control`, `.date-bounds-shift-bar`).
 * A diferència de l'agenda, no s'amaguen en pantalles petites (són l'únic
 * control de l'interval). */

/* ── Ordenació de capçalera (mateix patró que #section-cataleg) ───────── */

#section-estadistiques thead th.sortable-th {
  white-space: normal;
}

#section-estadistiques .sortable-th-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

/* Primera columna de text (cobla/títol/autor) ordenable: etiqueta a l'esquerra. */
#section-estadistiques th.col-cobla .sortable-th-inner,
#section-estadistiques th.col-titol .sortable-th-inner,
#section-estadistiques th.col-autor .sortable-th-inner {
  align-items: flex-start;
}

#section-estadistiques .sortable-th-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 0 1 auto;
  min-width: 0;
}

#section-estadistiques .sortable-th-btns {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

#section-estadistiques .sort-btn {
  display: block;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.5;
}

#section-estadistiques .sort-btn + .sort-btn {
  margin-left: -5px;
}

@media (hover: hover) and (pointer: fine) {
  #section-estadistiques .sort-btn:hover {
    opacity: 1;
    color: var(--text-strong);
    background: var(--filter-option-hover-bg);
  }
}

#section-estadistiques .sort-btn.is-active {
  opacity: 1;
  color: var(--color-primary);
  background: transparent;
  font-weight: 900;
}

/* ── Taula d'estadístiques ─────────────────────────────────────────────── */

#section-estadistiques .estadistiques-table {
  width: 100%;
}

/* Rànquings amb interval: columnes numèriques (interval + total) a 8ch. */
#section-estadistiques .estadistiques-table--interval th.col-interval,
#section-estadistiques .estadistiques-table--interval th.col-interpretacions,
#section-estadistiques .estadistiques-table--interval td.col-interval,
#section-estadistiques .estadistiques-table--interval td.col-interpretacions {
  width: 8ch;
  min-width: 8ch;
  max-width: 8ch;
}

/* Capçaleres compactes (1/3 del padding lateral global) per donar marge a
   etiquetes llargues sense forçar l'amplada per min-content.
   Es trenca el text en diverses línies (results.css posa nowrap a `thead th`). */
#section-estadistiques .estadistiques-table thead th {
  padding-left: 4px;
  padding-right: 4px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

#section-estadistiques .estadistiques-table .stat-th-label {
  display: block;
}

/* Primera columna en negreta (èmfasi del nom de sardana/autor/cobla) */
#section-estadistiques
  .estadistiques-table
  tbody
  tr
  td:first-child:not([colspan]) {
  font-weight: 700;
}

/* Capçalera de columnes numèriques: alineació; el text de l’etiqueta pot envoltar.
   Cel·les de dades: una sola línia per als números. */
#section-estadistiques .estadistiques-table th.cell-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#section-estadistiques .estadistiques-table td.stat-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Cel·les de data: nowrap i color secundari */
#section-estadistiques .estadistiques-table td.stat-td-date {
  white-space: nowrap;
  color: var(--muted);
}

/* `td.col-cobla` a results.css afegeix molt padding inferior per als enllaços
   de la vista d'agenda; aquí només mostrem text pla del rànquing. */
#section-estadistiques .estadistiques-table td.col-cobla {
  position: static;
  padding-bottom: 8px;
}

/* Estats de càrrega/buit/error dins la taula */
#section-estadistiques .estadistiques-table td.status-loading,
#section-estadistiques .estadistiques-table td.empty-message {
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

#section-estadistiques .estadistiques-table td.status-error {
  font-size: 0.875rem;
  color: #c0392b;
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

/* ── Sentinel de scroll infinit ────────────────────────────────────────── */

/* A diferència de l'agenda/catàleg de v4 (que usen <tr.scroll-sentinel-row>
   dins del <tbody>), aquí la sentinel és un <div> germà de la <table> dins
   .table-wrap, igual que a v5. */
#section-estadistiques .estadistiques-scroll-sentinel {
  height: 1px;
  margin-bottom: var(--space-2);
  pointer-events: none;
}

#section-estadistiques .estadistiques-scroll-sentinel--loading {
  min-height: 32px;
  height: auto;
}

#section-estadistiques .estadistiques-scroll-sentinel--loading::after {
  content: 'Carregant més…';
  display: block;
  font-size: var(--font-sm);
  color: var(--muted);
  padding: var(--space-2) 10px;
  text-align: center;
}