/* ── 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). */

/* Flash de feedback dels camps de data: vegeu `filters.css`
 * (`.date-bounds-field--pulse` / `@keyframes dateBoundsPulse`) — compartit amb
 * l'agenda (`data-sync-pulse`). */

/* ── 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 d'enregistraments: columnes de mètrica compactes. El `­` de la
   capçalera permet trencar l'etiqueta en diverses línies dins una columna
   estreta; les xifres queden en una sola línia (stat-td-num). */
#section-estadistiques .estadistiques-table th.col-enregistraments,
#section-estadistiques .estadistiques-table th.col-metric2,
#section-estadistiques .estadistiques-table th.col-second-interval,
#section-estadistiques .estadistiques-table td.col-enregistraments,
#section-estadistiques .estadistiques-table td.col-metric2,
#section-estadistiques .estadistiques-table td.col-second-interval {
  width: 10ch;
  min-width: 6ch;
}

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

/* Cobles que més toquen: capçalera «Sardanes» (interval + total). */
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] th.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] th.col-interpretacions,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] td.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] td.col-interpretacions {
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
}

/* Rànquings d'enregistraments: la columna d'interval de la mètrica principal
   comparteix amplada amb la del grup «Total» (capçalera «Enregistraments»). */
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistrades"] th.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistrats"] th.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistraments"] th.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistrades"] td.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistrats"] td.col-interval,
#section-estadistiques .estadistiques-table[data-stat-slug$="-enregistraments"] td.col-interval {
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
}

/* Cobles que més toquen: capçalera «Actuacions» (interval + total). */
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] th.col-act-interval,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] th.col-act-total,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] td.col-act-interval,
#section-estadistiques .estadistiques-table[data-stat-slug="cobles-amb-mes-actuacions"] td.col-act-total {
  width: 12ch;
  min-width: 12ch;
  max-width: 12ch;
}

/* 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:not(.estadistiques-table--with-ord)
  tbody
  tr
  td:first-child:not([colspan]) {
  font-weight: 700;
}

/* Columna d'ordre (#): to gris i separador com a .prog-num als programes d'agenda.
   Amplada fixa 4ch per encabir com a mínim 3 dígits (tabular-nums). */
#section-estadistiques .estadistiques-table--with-ord col.col-ord {
  width: 4ch;
  min-width: 4ch;
  max-width: 4ch;
}

#section-estadistiques .estadistiques-table--with-ord .stat-th-ord,
#section-estadistiques .estadistiques-table--with-ord .stat-td-ord {
  width: 4ch;
  min-width: 4ch;
  max-width: 4ch;
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: color-mix(in srgb, var(--muted) 78%, var(--card));
  padding-left: 0;
  padding-right: 8px;
  position: relative;
  overflow: hidden;
}

#section-estadistiques .estadistiques-table--with-ord .stat-td-ord::after,
#section-estadistiques .estadistiques-table--with-ord .stat-th-ord::after {
  content: '';
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(var(--ink-rgb), 0.08);
}

#section-estadistiques .estadistiques-table--with-ord tbody tr td:nth-child(2):not([colspan]) {
  font-weight: 700;
}

@media (max-width: 520px) {
  /* Ordinal sempre visible; compactació horitzontal per mòbil estret. */
  #section-estadistiques .estadistiques-table--with-ord .stat-th-ord,
  #section-estadistiques .estadistiques-table--with-ord .stat-td-ord {
    padding-right: 6px;
    font-size: var(--font-md-sm);
  }

  #section-estadistiques .estadistiques-table--with-ord .stat-td-ord::after,
  #section-estadistiques .estadistiques-table--with-ord .stat-th-ord::after {
    top: 4px;
    bottom: 4px;
  }
}

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

/* Drills amb columna «Discs»: «Enregistraments» estret (capçalera «Enregis-» / «traments»). */
#section-estadistiques .estadistiques-table th.col-enreg-drill,
#section-estadistiques .estadistiques-table td.col-enreg-drill {
  width: 8ch;
  max-width: 8ch;
}

#section-estadistiques .estadistiques-table th.col-enreg-drill .stat-th-label {
  hyphens: manual;
}

/* Superheader «Dins l'interval» / «Total» (Cobles que més toquen). */
#section-estadistiques .estadistiques-table thead .estadistiques-group-row th {
  padding: 4px 8px 2px;
  border-bottom: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  vertical-align: bottom;
}
#section-estadistiques .estadistiques-table thead .estadistiques-group-cell--interval,
#section-estadistiques .estadistiques-table thead .estadistiques-group-cell--total {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}
#section-estadistiques .estadistiques-table thead .estadistiques-group-cell--total {
  border-left: 1px solid var(--border-subtle);
}
/* Separador vertical entre els grups «Dins l'interval» i «Total»: primera
   columna del grup de totals (Actuacions a cobles; Enregistraments a la resta). */
#section-estadistiques .estadistiques-table th.col-act-total,
#section-estadistiques .estadistiques-table td.col-act-total,
#section-estadistiques .estadistiques-table--interval th.col-enregistraments,
#section-estadistiques .estadistiques-table--interval td.col-enregistraments {
  border-left: 1px solid var(--border-subtle);
}

#section-estadistiques .estadistiques-table td.stat-td-text {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Data: segments d/mmm/aa atòmics; el salt de línia només entre guions. */
#section-estadistiques .estadistiques-table td.stat-td-date {
  word-break: normal;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
}

#section-estadistiques .estadistiques-table .stat-date-seg {
  white-space: nowrap;
  display: inline-block;
}

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

/* ── Drills: layout «fitxa» a mòbil (≤520px) ──────────────────────────────────
   A desktop, `.stat-cell-value` és transparent (no genera caixa): el contingut
   de la cel·la es comporta exactament com abans (enllaços, `.place`, dates…).
   A mòbil, els drills abandonen el format tabular i mostren dues columnes:
   «#» (mateixa amplada) i «Detalls», amb una línia «Etiqueta: valor» per cada
   columna de desktop. Els dos punts queden alineats verticalment (etiquetes
   justificades a la dreta) gràcies a la columna `max-content` compartida. */
#section-estadistiques .stat-cell-value {
  display: contents;
}

@media (max-width: 520px) {
  #section-estadistiques .estadistiques-table--drill,
  #section-estadistiques .estadistiques-table--drill thead,
  #section-estadistiques .estadistiques-table--drill tbody {
    display: block;
    width: 100%;
  }

  /* Variables de col·locació (canvien segons hi hagi columna «#» o no):
     els drills amb ordinal reserven 4ch a l'esquerra; sardanes-disc (sense «#»,
     la columna «Pista» ja fa d'ordre) comença directament amb etiqueta/valor. */
  #section-estadistiques .estadistiques-table--drill.estadistiques-table--with-ord {
    --stat-detail-cols: 4ch max-content minmax(0, 1fr);
    --stat-detail-head-cols: 4ch minmax(0, 1fr);
    --stat-label-col: 2;
    --stat-value-col: 3;
    --stat-detalls-col: 2;
  }
  #section-estadistiques .estadistiques-table--drill:not(.estadistiques-table--with-ord) {
    --stat-detail-cols: max-content minmax(0, 1fr);
    --stat-detail-head-cols: minmax(0, 1fr);
    --stat-label-col: 1;
    --stat-value-col: 2;
    --stat-detalls-col: 1;
  }

  /* Capçalera: «#» (si escau) + «Detalls»; les etiquetes de columna s'amaguen. */
  #section-estadistiques .estadistiques-table--drill thead tr {
    display: grid;
    grid-template-columns: var(--stat-detail-head-cols);
    align-items: end;
    column-gap: 0.5ch;
    border-bottom: 2px solid var(--color-primary);
  }
  #section-estadistiques .estadistiques-table--drill thead th:not(.stat-th-ord) {
    display: none;
  }
  #section-estadistiques .estadistiques-table--drill thead th.stat-th-ord {
    border-bottom: 0;
  }
  #section-estadistiques .estadistiques-table--drill thead th.stat-th-ord::after {
    content: none;
  }
  #section-estadistiques .estadistiques-table--drill thead tr::after {
    content: 'Detalls';
    grid-column: var(--stat-detalls-col);
    padding: 6px 8px;
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--color-primary);
  }

  /* Files de dades: graella [# ·] etiquetes · valors. El «#» ocupa la primera
     línia; el separador vertical (::before de la fila) recorre tota la fitxa. */
  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] {
    position: relative;
    display: grid;
    grid-template-columns: var(--stat-detail-cols);
    align-items: baseline;
    column-gap: 0.5ch;
    row-gap: 0.15rem;
    padding: 8px 4px;
    border-bottom: var(--table-separator);
    transition: background-color 0.12s ease;
  }

  /* Banded rows: mateix criteri i mateixos grisos que les taules normals
     (tokens `--row-band-*`). A desktop el fons viu al `<td>`, però aquí els
     `<td>` de dades són `display:contents` (sense caixa): el fons ha d'anar al
     `<tr>` (contenidor de la fitxa). Es neutralitza el fons de `td` perquè no
     quedin retalls de color (p. ex. sota la columna «#») en repòs ni en hover. */
  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] td {
    background: transparent;
  }
  #section-estadistiques .estadistiques-table--drill tbody tr.row-band-even {
    background: var(--row-band-even-bg);
  }
  #section-estadistiques .estadistiques-table--drill tbody tr.row-band-odd {
    background: var(--row-band-odd-bg);
  }
  #section-estadistiques .estadistiques-table--drill tbody tr.row-band-even:hover,
  #section-estadistiques .estadistiques-table--drill tbody tr.row-band-odd:hover {
    background: var(--row-band-hover-bg);
  }

  /* Separador vertical entre «#» i «Detalls» (absolut → no és ítem de graella).
     Només als drills amb columna d'ordre. */
  #section-estadistiques
    .estadistiques-table--drill.estadistiques-table--with-ord
    tbody
    tr[data-row-index]::before {
    content: '';
    position: absolute;
    left: 4ch;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(var(--ink-rgb), 0.08);
  }

  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] td.stat-td-ord {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] td.stat-td-ord::after {
    content: none;
  }

  /* Cel·les de dades: transparents → l'etiqueta (::before) i el valor
     (`.stat-cell-value`) es converteixen en ítems de la graella de la fila. */
  #section-estadistiques .estadistiques-table--drill tbody tr[data-row-index] td:not(.stat-td-ord) {
    display: contents;
  }

  /* Cel·les buides (sense `data-label`): no ocupen cap línia a la fitxa. */
  #section-estadistiques
    .estadistiques-table--drill
    tbody
    tr[data-row-index]
    td:not(.stat-td-ord):not([data-label]) {
    display: none;
  }

  #section-estadistiques
    .estadistiques-table--drill
    tbody
    tr[data-row-index]
    td[data-label]::before {
    content: attr(data-label) ':';
    grid-column: var(--stat-label-col);
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: var(--muted);
  }

  #section-estadistiques
    .estadistiques-table--drill
    tbody
    tr[data-row-index]
    td .stat-cell-value {
    grid-column: var(--stat-value-col);
    display: block;
    min-width: 0;
    font-weight: 400;
    text-align: left;
  }
}