/* ── estadistiques.css ────────────────────────────────────────────────────────
   Mòdul «Estadístiques»: mateixa pila que els mòduls BD (db-section): una sola
   .results-header amb breadcrumb + comptador + Excel. El bloc .main es centra
   al viewport via `layout.css` (#section-estadistiques).
   ──────────────────────────────────────────────────────────────────────────── */

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

/* Omple la columna de contingut; el centrat del viewport el fa #section-estadistiques (model v4) */
#section-estadistiques .estadistiques-results-scoped {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/*
 * A escriptori, `.card.results` és `display: contents` (layout.css): el <section>
 * no crea caixa; cal un wrapper amb `position: relative` per a l'absolute del botó.
 */
#section-estadistiques .estadistiques-drill-shell {
  position: relative;
  display: block;
  overflow: visible;
}

/* Escriptori: mateixes vores que `.card.results > …` (layout.css) amb el wrapper drill */
@media (min-width: 1401px) {
  #section-estadistiques .estadistiques-drill-shell > .results-header {
    background: var(--card);
    border: 3px solid var(--line);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: -10px 0 0 var(--bg), 10px 0 0 var(--bg);
  }

  #section-estadistiques .estadistiques-drill-shell > .table-wrap {
    background: var(--card);
    border-left: 3px solid var(--line);
    border-right: 3px solid var(--line);
    border-bottom: 3px solid var(--line);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }
}

/* Moviment per anys: `.card.results` és display:contents; cal vores explícites en els
   blocs entre capçalera i taula (com .estadistiques-drill-shell), si no la gràfica
   queda sense marc lateral respecte al fons de pàgina. */
@media (min-width: 1401px) {
  #section-estadistiques .estadistiques-moviment-shell > .results-header {
    background: var(--card);
    border: 3px solid var(--line);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: -10px 0 0 var(--bg), 10px 0 0 var(--bg);
  }

  #section-estadistiques .estadistiques-moviment-shell > .moviment-chart-wrap {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--space-4) clamp(20px, 4.5vw, 40px);
    background: var(--card);
    border-left: 3px solid var(--line);
    border-right: 3px solid var(--line);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: -10px 0 0 var(--bg), 10px 0 0 var(--bg);
  }

  #section-estadistiques .estadistiques-moviment-shell > .moviment-table-notes {
    box-sizing: border-box;
    margin: 0;
    padding: var(--space-3) clamp(20px, 4.5vw, 40px);
    font-size: 0.8rem;
    color: var(--muted);
    background: var(--card);
    border-left: 3px solid var(--line);
    border-right: 3px solid var(--line);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: -10px 0 0 var(--bg), 10px 0 0 var(--bg);
  }

  #section-estadistiques .estadistiques-moviment-shell > .table-wrap {
    background: var(--card);
    border-left: 3px solid var(--line);
    border-right: 3px solid var(--line);
    border-bottom: 3px solid var(--line);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-sizing: border-box;
  }
}

/*
 * Sticky sota la topbar (com .results-header); la filera es «col·lapsa» cap avall
 * com a info-lightbox lletra; la píndola sobresurt una mica fora de la vora (patró
 * footer-overlay: meitat de l'alçada del control).
 */
#section-estadistiques .estadistiques-drill-back-sticky {
  position: sticky;
  top: var(--topbar-height, 72px);
  z-index: 55;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 calc(-0.45 * var(--ctrl-min-height)) 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
}

#section-estadistiques .estadistiques-drill-back-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  margin: calc(var(--ctrl-min-height) * -0.42) -8px 0 0;
  background: var(--color-primary-strong);
  border-color: var(--ui-overlay-subtle);
  color: var(--card);
}

#section-estadistiques .estadistiques-drill-back-btn__ico {
  display: inline-flex;
  margin-right: 6px;
  flex-shrink: 0;
}

#section-estadistiques .estadistiques-drill-back-btn__ico svg {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  #section-estadistiques .estadistiques-drill-back-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
}

#section-estadistiques .estadistiques-drill-back-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

#section-estadistiques .estadistiques-card--drill .results-header {
  padding-right: 14px;
}

/* Amb el breadcrumb amagat (mòbil), comptador + Excel a la dreta com a les altres taules */
@media (max-width: 1400px) {
  #section-estadistiques .results-header {
    justify-content: flex-end;
  }
}

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

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

/* Primera columna: negreta (alineat amb èmfasi de primera columna en altres mòduls) */
#section-estadistiques
  .estadistiques-table
  tbody
  tr
  td:first-child:not([colspan]) {
  font-weight: 700;
}

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

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

#section-estadistiques .estadistiques-table td.stat-td-date {
  white-space: nowrap;
  color: var(--muted);
}

/* Sidebar: mateixa pila de tipografia i camps que .sidebar + filters.css (sense bump de mida) */
.estadistiques-sidebar-filters {
  gap: var(--space-2);
}

/* Títol de l'interval «moviment»: mateixa mida que el títol/breadcrumb de la card de resultats */
#coneixNosContentNav .estadistiques-sidebar-filters .label.estadistiques-moviment-year-heading {
  font-family: var(--font-ui);
  font-size: var(--font-results-card-title);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.2px;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  text-transform: none;
}

#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);
}


/* ── Moviment sardanista per anys: gràfica + taula ─────────────────────────── */

#section-estadistiques .moviment-chart-wrap {
  box-sizing: border-box;
}

@media (max-width: 1400px) {
  #section-estadistiques .moviment-chart-wrap {
    padding: var(--space-3) clamp(16px, 4vw, 28px);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--card);
  }

  #section-estadistiques .moviment-table-notes {
    padding: var(--space-2) clamp(16px, 4vw, 28px);
    border-bottom: 1px solid var(--border-subtle);
  }
}

#section-estadistiques .moviment-chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  padding: var(--space-2) clamp(4px, 1.5vw, 12px);
  box-sizing: border-box;
}

#section-estadistiques .moviment-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  user-select: none;
  transition: opacity 0.15s;
}

#section-estadistiques .moviment-radio-label:has(input:not(:checked)) {
  opacity: 0.55;
}

#section-estadistiques .moviment-radio-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--serie-color, var(--muted));
  border-radius: 50%;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

#section-estadistiques .moviment-radio-label input[type="radio"]:checked {
  border-color: var(--serie-color, var(--color-primary));
}

#section-estadistiques .moviment-radio-label input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--serie-color, var(--color-primary));
}

#section-estadistiques .moviment-radio-label input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

#section-estadistiques .moviment-radio-text {
  white-space: nowrap;
}

#section-estadistiques .moviment-chart-container {
  width: 100%;
  max-width: 100%;
  min-height: 340px;
  position: relative;
  margin-inline: auto;
}

/* Sidebar: interval d'anys al moviment per anys */
#estadistiquesColumnFiltersMount.estadistiques-moviment-year-mount {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  width: 100%;
}

/* Una sola pista amb dos «thumbs»: interval entre any mín i any màx de les dades */
#estadistiquesColumnFiltersMount .estadistiques-moviment-year-range-shell {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Una sola pista: repos neutre i segment del primari sobre l’interval triat */
#estadistiquesColumnFiltersMount .estadistiques-moviment-year-range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--ctrl-min-height, 34px) + 4px - var(--moviment-track-h, 8px)) / 2);
  height: var(--moviment-track-h, 8px);
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--line) 0,
    var(--line) var(--moviment-range-lo-pct),
    color-mix(in srgb, rgb(var(--color-primary-rgb)) 36%, transparent) var(--moviment-range-lo-pct),
    color-mix(in srgb, rgb(var(--color-primary-rgb)) 36%, transparent) var(--moviment-range-hi-pct),
    var(--line) var(--moviment-range-hi-pct),
    var(--line) 100%
  );
}

#estadistiquesColumnFiltersMount .estadistiques-moviment-year-range-inputs {
  position: relative;
  height: calc(var(--ctrl-min-height, 34px) + 4px);
  isolation: isolate;
}

#estadistiquesColumnFiltersMount .estadistiques-moviment-year-range-inputs input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  height: calc(var(--ctrl-min-height, 34px) + 4px);
  top: 0;
  background: transparent;
  accent-color: var(--color-primary-strong);
  cursor: grab;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}

#estadistiquesColumnFiltersMount .estadistiques-moviment-year-range-inputs input[type='range']:active {
  cursor: grabbing;
}

#estadistiquesColumnFiltersMount
  .estadistiques-moviment-year-range-inputs
  input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--color-primary-strong);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), var(--opacity-20));
}

#estadistiquesColumnFiltersMount
  .estadistiques-moviment-year-range-inputs
  input[type='range']::-webkit-slider-runnable-track {
  height: var(--moviment-track-h, 8px);
  border-radius: var(--radius-xs, 2px);
  background: transparent;
}

#estadistiquesColumnFiltersMount
  .estadistiques-moviment-year-range-inputs
  input[type='range']::-moz-range-track {
  height: var(--moviment-track-h, 8px);
  border-radius: var(--radius-xs, 2px);
  background: transparent;
}

#estadistiquesColumnFiltersMount
  .estadistiques-moviment-year-range-inputs
  input[type='range']::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--color-primary-strong);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), var(--opacity-20));
}

#estadistiquesColumnFiltersMount
  .estadistiques-moviment-year-range-inputs
  input[type='range']:focus-visible::-webkit-slider-thumb {
  outline: none;
  box-shadow: var(--focus);
}

#estadistiquesColumnFiltersMount
  .estadistiques-moviment-year-range-inputs
  input[type='range']:focus-visible::-moz-range-thumb {
  outline: none;
  box-shadow: var(--focus);
}

/* Una fila sota el control: anys min/max de dades (laterals) · interval actiu (centrat) */
#estadistiquesColumnFiltersMount .estadistiques-moviment-year-range-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

#estadistiquesColumnFiltersMount .estadistiques-moviment-year-bound {
  font-size: clamp(0.86rem, 2.85vw, 0.956rem);
  color: var(--muted);
}

#estadistiquesColumnFiltersMount .estadistiques-moviment-year-range-axis > .estadistiques-moviment-year-bound:first-child {
  text-align: left;
}

#estadistiquesColumnFiltersMount .estadistiques-moviment-year-range-axis > .estadistiques-moviment-year-bound:last-child {
  text-align: right;
}

#estadistiquesColumnFiltersMount .estadistiques-moviment-year-current {
  justify-self: center;
  text-align: center;
  font-size: clamp(1rem, 3.1vw, 1.154rem);
  font-weight: 700;
  color: var(--color-primary-strong);
}

#estadistiquesColumnFiltersMount .estadistiques-moviment-year-sep {
  margin-inline: var(--space-1);
  font-weight: 600;
  color: var(--muted);
}

@media (min-width: 1401px) {
  /* Bloc canvas una mica més estret que la card (padding del wrap ja fa vora útil). */
  #section-estadistiques .estadistiques-moviment-shell .moviment-chart-container {
    max-width: min(960px, calc(100% - 20px));
    margin-inline: auto;
    box-sizing: border-box;
  }
}

#section-estadistiques .moviment-chart-container canvas {
  display: block;
  width: 100%;
}

#section-estadistiques .moviment-table-notes {
  font-size: 0.8rem;
  color: var(--muted);
}

#section-estadistiques .moviment-table-notes p {
  margin: 0 0 2px 0;
}

#section-estadistiques .moviment-table .moviment-td-any {
  font-weight: 700;
  white-space: nowrap;
}

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

@media (max-width: 600px) {
  #section-estadistiques .moviment-chart-controls {
    gap: var(--space-1) var(--space-3);
  }

  #section-estadistiques .moviment-radio-label {
    font-size: 0.8rem;
  }
}

/* ── Sidebar de poblacions (select de comarca) ───────────────────────────── */

/* El select de comarca reutilitza la classe .input del sidebar però
   necessita `appearance: auto` per mostrar la fletxa nativa. */
#section-estadistiques .estadistiques-comarca-select {
  appearance: auto;
  cursor: pointer;
}

/* Columnes de text del llistat de poblacions: truncament per evitar
   desbordament en files molt llargues. */
#section-estadistiques .estadistiques-table .col-poblacio,
#section-estadistiques .estadistiques-table .col-comarca {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}