/* ── 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%;
  }
}

/* ── Subcapçalera de la card (selector d'any) ──────────────────────────────
 * El selector de rang d'anys mai comparteix fila amb el breadcrumb+comptador:
 * viu aquí, en una franja pròpia amb fons blanc de la card. Només visible a
 * escriptori i quan realment hi ha selector (rànquing de cobles). */
#section-estadistiques .estadistiques-subheader {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: 10px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 981px) {
  #section-estadistiques
    .estadistiques-subheader:has(.estadistiques-year-select-wrap) {
    display: flex;
  }
}

/* ── Selector d'any (rànquing «Cobles que més toquen») ─────────────────── */

#section-estadistiques .estadistiques-year-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

#section-estadistiques .estadistiques-year-select-label {
  font-size: var(--ctrl-font-size);
  font-weight: var(--ctrl-font-weight);
  color: var(--muted);
  white-space: nowrap;
}

#section-estadistiques .estadistiques-year-select {
  min-height: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  box-sizing: border-box;
  border-radius: var(--ctrl-radius);
  border: 1px solid var(--actionable-line);
  background-color: var(--actionable-wash);
  color: var(--text-strong);
  appearance: none;
  -webkit-appearance: none;
  padding: 0 28px 0 10px;
  font-size: var(--ctrl-font-size);
  font-weight: var(--ctrl-font-weight);
  font-family: var(--font-ui);
  letter-spacing: var(--ctrl-letter-spacing);
  outline: none;
  cursor: pointer;
  transition: var(--ctrl-transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 9l6 6 6-6%27 fill=%27none%27 stroke=%27%23111827%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: calc(100% - 6px) 50%;
}

#section-estadistiques .estadistiques-year-select::-ms-expand {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  #section-estadistiques .estadistiques-year-select:hover {
    background-color: var(--filter-option-hover-bg);
  }
}

#section-estadistiques .estadistiques-year-select:focus-visible {
  border-color: var(--input-focus-border);
  background-color: var(--input-focus-bg);
}

#section-estadistiques .estadistiques-year-range-select {
  min-width: 8.75rem;
  padding-left: 12px;
  text-align: left;
  text-align-last: left;
}

/* ── 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 per parell d'anys: columnes numèriques (anys + total) a 7ch. */
#section-estadistiques .estadistiques-table--year-pair th.col-any1,
#section-estadistiques .estadistiques-table--year-pair th.col-any2,
#section-estadistiques .estadistiques-table--year-pair th.col-interpretacions,
#section-estadistiques .estadistiques-table--year-pair td.col-any1,
#section-estadistiques .estadistiques-table--year-pair td.col-any2,
#section-estadistiques .estadistiques-table--year-pair td.col-interpretacions {
  width: 7ch;
  min-width: 7ch;
  max-width: 7ch;
}

/* 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;
}