/* ================================================================
   filters-docked.css — Tauler de filtres acoblat (dropdown) en mòbil/tauleta
   ----------------------------------------------------------------
   Paradigma genèric per a TOTES les seccions de filtres: substitueix el
   botó flotant «Filtres» + calaix lateral per un panell acoblat dins la
   capçalera de resultats. Escriptori (≥1401px) intacte.

   El mecanisme s'enganxa via data-attributes estàndard anotats als
   elements reals de cada secció (veure js/ui/docked-filters.js):
     [data-filters-section]  arrel de la secció
     [data-filter-controls]  bloc de controls (l'<aside class="sidebar">)
     [data-filters-home]      placeholder de la posició d'escriptori
     [data-results-card]      card de resultats
     [data-results-count]     comptador (opcional)
     [data-docked-filters]    panell acoblat (injectat per JS)
     [data-docked-body]       cos del panell (mount mòbil dels controls)

   Aquest full es carrega DESPRÉS de results.css/filters.css per guanyar la
   cascada (mateixa especificitat, ordre de font).
   ================================================================ */

/* El botó flotant antic "Filtres" queda retirat del marcat; kill-switch per si
   alguna superfície encara l'injecta. */
.filters-toggle { display: none !important; }

/* ════════ PANELL ACOBLAT (dropdown body) — base ════════ */
.docked-filters {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: var(--card);
  /* Sense animació: max-height animat amb taules grans (~250 files) provocava freeze de layout */
  transition: none;
}
.docked-filters.is-open {
  max-height: min(76vh, 720px);
  overflow-y: auto;
  opacity: 1;
  border-top: 1px solid var(--actionable-line);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.docked-filters__body {
  padding: 10px 10px 14px;
  max-width: 100%;
  overflow-x: clip;
}
.docked-filters__body .card.filters,
.docked-filters__body .simple-filters-card { box-shadow: none; }

/* Afordança del subheader: en escriptori el botó s'amaga */
.subheader-row { display: contents; }
.subheader-toggle { display: none; }

/* ════════ MÒBIL / TAULETA (≤1400px) ════════ */
@media (max-width: 1400px) {

  /* El bloc de controls (l'<aside>) viu, en mòbil, dins el panell acoblat:
     el node original a .main-layout queda amagat (el JS el relocalitza). */
  .main-layout > .sidebar { display: none !important; }

  /* L'<aside class="sidebar"> reubicat dins el panell: estàtic, sense chrome de calaix. */
  [data-docked-body] > .sidebar {
    position: static; inset: auto; width: 100%; min-width: 0; height: auto;
    z-index: auto; pointer-events: none; display: block;
  }
  .docked-filters.is-open [data-docked-body] > .sidebar {
    pointer-events: auto;
  }
  [data-docked-body] > .sidebar > .sidebar-panel {
    position: static; left: auto; top: auto; right: auto; bottom: auto;
    width: 100%; min-width: 0; height: auto; max-height: none;
    background: transparent; transition: none;
    padding: 0; padding-bottom: 0; overflow: visible;
  }
  [data-docked-body] .sidebar-backdrop,
  [data-docked-body] .sidebar-close-sticky,
  [data-docked-body] .sidebar-top { display: none !important; }

  /* Subheader sticky sota el topbar; línia de plec + botó a cavall. */
  [data-results-card] {
    --docked-fold-pad-above: 2px;        /* header: marge per sobre del separador / botó */
    --docked-fold-gutter-closed: 14px;   /* sota separador amb filtres tancats (llista) */
    --docked-fold-panel-pad-top: 4px;    /* cap del desplegable (sota el botó de plec) */
    --docked-fold-toggle-overhang: 15px; /* meitat inferior del botó sota el plec */
    --docked-fold-panel-content-pad-top: 8px; /* padding superior del card de filtres dins el panell */
    --docked-filters-bg: var(--results-header-bg);
  }
  [data-results-card] > .results-header {
    position: sticky;
    top: var(--topbar-height, 72px);
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    background: var(--results-header-bg);
    border-bottom: 0;
    /* El botó de plec penja meitat sota la línia (translateY(50%)): no retallar. */
    overflow: visible;
    padding: 0;
    padding-bottom: calc(var(--docked-fold-pad-above) + var(--docked-fold-toggle-overhang));
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 6px 14px -9px rgba(var(--shadow-rgb), .55);
  }
  /* La regla z-index:55 de results.css (per a l'antic botó fix) ja no aplica. */
  body.filters-open [data-results-card] > .results-header { z-index: 20; }

  /* Separador de la zona plegada: marca on acaba el resum i comença el plec */
  [data-results-card] > .results-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--border-subtle);
    pointer-events: none;
    z-index: 1;
  }

  /* Fila 1: fil d'Ariadna (esquerra) + clúster dret (comptador + export). */
  [data-results-card] > .results-header > .results-breadcrumb {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    min-width: 0;
    padding: 10px 12px 10px 14px;
    background: var(--results-header-bg);
  }

  /* Clúster dret (comptador + export Excel): caixa real alineada a la dreta. */
  [data-results-card] > .results-header > .results-header-end {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 10px 14px 10px 12px;
    background: var(--results-header-bg);
  }
  [data-results-card] > .results-header > .results-header-end .results-count {
    background: transparent;
    padding: 0;
  }

  /* Botó de plec: meitat per sobre i meitat per sota de la línia de separació */
  .subheader-toggle {
    position: absolute;
    right: 14px;
    bottom: 0;
    transform: translateY(50%);
    z-index: 22;
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-family: var(--font-ui); font-weight: 800; font-size: var(--font-sm); line-height: 1;
    color: var(--card);
    background: var(--color-primary-strong);
    border: 1px solid var(--color-primary-strong);
    border-radius: 999px; padding: 8px 13px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(var(--shadow-rgb), .14);
    appearance: none;
    -webkit-appearance: none;
  }
  /* Filtres tancats: ombra cap avall a la meitat inferior del botó (sota el plec) */
  [data-results-card]:not(.is-editing) > .results-header .subheader-toggle {
    box-shadow:
      0 1px 3px rgba(var(--shadow-rgb), .12),
      0 5px 14px rgba(var(--shadow-rgb), .26);
  }
  .subheader-toggle .ico { width: 15px; height: 15px; flex-shrink: 0; }
  .subheader-toggle .chev {
    width: 9px; height: 9px; flex-shrink: 0;
    border-right: 2.3px solid currentColor; border-bottom: 2.3px solid currentColor;
    transform: rotate(45deg); transition: transform .50s ease; margin-left: 1px;
  }
  .results.is-editing .subheader-toggle .chev { transform: rotate(-135deg); margin-top: 3px; }

  /* Chip d'interval clicable: només quan el botó «Mostrar filtres» hi és (mòbil),
     en clicar-lo es desplega el panell de filtres (selector de dates). */
  .active-filter-chip--activatable .active-filter-chip__activate { cursor: pointer; }
  .active-filter-chip--activatable .active-filter-chip__activate:focus-visible {
    outline: 2px solid rgba(var(--color-form-focus-rgb), 0.64);
    outline-offset: 1px;
    border-radius: var(--radius-chip);
  }

  /* Fila 2: chips de filtres actius. Ample complet sota el fil d'Ariadna. */
  [data-results-card] > .results-header > .active-filters-chips,
  [data-results-card] > .results-header > .results-chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: calc(var(--space-2) - 2px) 14px 0;
    border: 0;
    background: var(--results-header-bg);
  }

  /* Panell desplegat: mateix fons que el header. */
  .docked-filters {
    display: block;
    position: relative;
    z-index: 19; /* per sota del botó de plec (z-index 22 dins el header) */
    background: var(--docked-filters-bg, var(--results-header-bg));
  }
  /* Tancat: gutter sota la línia (llista normal; no és el panell de filtres) */
  .docked-filters:not(.is-open) {
    max-height: var(--docked-fold-gutter-closed);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .docked-filters:not(.is-open) [data-docked-body] {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.5s;
  }
  .docked-filters.is-open [data-docked-body] {
    visibility: visible;
    transition: visibility 0s;
  }
  .results.is-editing > .results-header { box-shadow: none; }
  .docked-filters.is-open { box-shadow: 0 8px 16px -9px rgba(var(--shadow-rgb), .5); }
  /* Cap superior del desplegable de filtres */
  .docked-filters.is-open .docked-filters__body {
    padding-top: calc(var(--docked-fold-toggle-overhang, 15px) + var(--docked-fold-panel-pad-top));
  }

  /* Panell acoblat: sense el marge superior del drawer lateral (botó «Tancar»). */
  [data-docked-body] > .sidebar > .sidebar-panel > section:first-of-type:is(.card.filters, .simple-filters-card) {
    margin-top: 0;
  }
  [data-docked-body] .card.filters,
  [data-docked-body] .simple-filters-card {
    padding-top: var(--docked-fold-panel-content-pad-top, 8px);
  }
}

@media (max-width: 520px) {
  /* Només es redueix l'inset horitzontal; el ritme vertical s'hereta de ≤1400px. */
  [data-results-card] > .results-header > .results-breadcrumb {
    padding-left: 12px;
    padding-right: 12px;
  }
  [data-results-card] > .results-header > .results-header-end {
    padding-left: 12px;
    padding-right: 12px;
  }
  [data-results-card] > .results-header > .active-filters-chips,
  [data-results-card] > .results-header > .results-chips-row {
    padding-left: 12px;
    padding-right: 12px;
  }
  [data-results-card] > .results-header::after { left: 0; right: 0; }
  .subheader-toggle { right: 12px; }
  .docked-filters.is-open .docked-filters__body {
    padding: calc(var(--docked-fold-toggle-overhang, 15px) + var(--docked-fold-panel-pad-top, 4px)) 6px 12px;
  }
  .docked-filters.is-open { max-height: 80vh; }
}

/* ════════ LAYOUT FLEX MULTI-COLUMNA al panell acoblat ════════
 *
 * Mòbil/tauleta: `flex-wrap` amb camps `flex: 1 1 min(100%, 240px)` — les files
 * incompletes es distribueixen sense buits (p. ex. id + Títol + Autor omplen la
 * fila sencera; no queden columnes buides com amb `repeat(5, 1fr)`).
 *
 *   · Telèfon estret: `min(100%, 240px)` → una columna
 *   · Ample (~1340px): fins a ~5 camps per fila (240px mínim cada un)
 *
 * Opt-outs full-width: inline row, grups radio/checkbox, rang de dates obert.
 *
 * Orfes: només el darrer camp compacte del panell si el total és imparell
 * (`.field--grid-orphan` → `flex-basis: 100%`). Els blocs full-width NO marquen
 * l'orfè immediatament anterior (vegeu docked-filters-grid.js).
 *
 * L'àmbit és estrictament [data-docked-body]: escriptori i sidebar intactes.
 */
@media (max-width: 1400px) {
  [data-docked-body] .simple-filters-card,
  [data-docked-body] .filters {
    container-type: inline-size;
    container-name: docked-card;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@container docked-card (min-width: 0) {
  .search-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
    /* row-gap vertical hereta de .sidebar .search-grid si cal */
    row-gap: var(--sidebar-form-stack-gap, var(--space-3));
  }

  .search-grid > * {
    flex: 1 1 min(100%, 240px);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Orfe final: camp compacte sol al final del panell (total imparell) */
  .search-grid > .field.field--grid-orphan {
    flex: 1 1 100%;
  }

  /* ── Opt-outs: elements que sempre han d'ocupar l'amplada completa ── */

  .search-grid > .search-grid-inline-row {
    flex: 1 1 100%;
    width: 100%;
  }

  .search-grid > .field:has(> .date-search-field[data-range-open='true']) {
    flex: 1 1 100%;
    width: 100%;
  }

  .search-grid > .field:has(> .filter-radio-group) {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Panell acoblat: controls al 100% de la card (p. ex. «Ordenar per») */
@container docked-card (min-width: 0) {
  .search-grid > .field > .filter-sidebar-custom-select,
  .search-grid > .field > .filter-sidebar-custom-select .filter-sidebar-custom-select__trigger,
  .search-grid > .field > select.filter-sidebar-select,
  .search-grid > .field > .input,
  .search-grid > .field > .filter-tag-field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ════════ DESKTOP (≥1401px) ════════ */
@media (min-width: 1401px) {
  .docked-filters { display: none !important; }
  .subheader-toggle { display: none !important; }
}

/* Moviment reduït: anul·la transicions/animacions del mecanisme */
@media (prefers-reduced-motion: reduce) {
  .docked-filters,
  .subheader-toggle .chev { transition: none; }
}