/* ================================================
   filters.css — Panell de filtres, calendari i controls
   ================================================ */

/* --- Disposició dels filtres --- */
.filters {
  /* Mateix padding vertical que .results-header (results.css) per alinear amb la card de resultats; el sidebar fa servir 9px 11px (veure .sidebar .card.filters) */
  padding: 11px 14px;
}
.mobile-filters-body {
  padding-top: 10px;
}
.filters-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* --- Month calendar widget --- */
.month {
  flex: 0 0 auto;
  width: 276px;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 10px 10px 10px;
  display: flex;
  flex-direction: column;
}
.month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 8px;
}
.month-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}
.month-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.month-select {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.month-head .month-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}
.month-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-top: 8px;
}
.month > .month-head {
  order: 0;
}
.month > .dow {
  order: 1;
}
.month > .grid {
  order: 2;
}
.month > .month-footer {
  order: 3;
  margin-top: 8px;
  margin-bottom: 0;
}
.month-nav {
  gap: var(--space-1);
}
.month-range-field .input {
  text-align: center;
}

/* --- Botons d'icona i «Avui» --- */
.icon-btn {
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  cursor: pointer;
}
.icon-btn {
  width: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  min-height: var(--ctrl-min-height);
  border-radius: var(--ctrl-radius);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  transition:
    transform 0.06s ease,
    border-color 0.12s ease;
}
.icon-btn:hover {
  border-color: var(--actionable-border);
}
.icon-btn:active {
  transform: translateY(1px);
}
.icon-btn svg {
  width: 16px;
  height: 16px;
  color: var(--text-strong);
  opacity: 0.9;
  fill: none;
}
.icon-btn svg polyline {
  stroke: currentColor;
}
.today-btn {
  min-height: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  padding: 0 6px;
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  letter-spacing: var(--ctrl-letter-spacing);
  transition:
    transform 0.06s ease,
    border-color 0.12s ease;
}
.today-btn:hover {
  border-color: var(--actionable-border);
}
.today-btn:active {
  transform: translateY(1px);
}

/* --- Day-of-week header & calendar grid --- */
.dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1h);
  margin-bottom: 6px;
  padding: 0;
}
.dow,
.grid {
  width: 100%;
  box-sizing: border-box;
}
.dow div {
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  font-family: var(--font-ui);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1h);
  padding: 0;
}

/* --- Cel·les de dia ---
 * Fora del rang: mateix fons que les cel·les sense número (--calendar-day-muted-bg).
 * Rang seleccionat: tons primaris (com abans del canvi de contrast amb els dies no seleccionats).
 */
.day {
  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: var(--calendar-day-muted-bg);
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition:
    transform 0.06s ease,
    border-color 0.12s ease,
    background 0.12s ease;
  user-select: none;
}
.day:hover {
  border-color: var(--actionable-border);
}
.day:active {
  transform: translateY(1px);
}
.day.muted {
  opacity: 0.35;
  cursor: default;
  background: var(--calendar-day-muted-bg);
}
.day.muted:hover {
  border-color: var(--line);
}
.day.start,
.day.end {
  background: rgba(var(--color-primary-rgb), var(--opacity-30));
  border-color: rgba(var(--color-primary-rgb), var(--opacity-70));
}
.day.inrange {
  background: rgba(var(--color-primary-rgb), var(--opacity-20));
  border-color: rgba(var(--color-primary-rgb), var(--opacity-40));
}
.dot {
  position: absolute;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-xs);
  background: var(--color-primary);
  opacity: 0.9;
}

/* --- Panell dret i disposició de cerca --- */
.right-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 2px 0;
}
.search-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* Fila compacta: camps curts (p. ex. Curts / Llargs / Salts al visor Sardanes) */
.search-grid-inline-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

/* Placeholder amb tipografia condensada per a camps amb exemples llargs */
.input--placeholder-condensed::placeholder {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-xl);
  line-height: 1.22;
  font-weight: 400;
}

@media (max-width: 520px) {
  .search-grid-inline-row {
    grid-template-columns: 1fr;
  }
}

/* Dues cards al sidebar: mateixa separació que .main-layout gap (var(--space-4)) */
.sidebar-panel > .simple-filters-card + .simple-filters-card {
  margin-top: var(--space-4);
}

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Megamenú, drawer mòbil i sidebar: amaga interval per text sota 521px (mateix tall que results) */
@media (max-width: 520px) {
  .calendar-date-range-fields {
    display: none !important;
  }

  /* Drawer navegació: sense bloc de dates, sense marge extra sota la fila avui/demà/… (el .mobile-filters-body ja té padding-top) */
  .mobile-agenda-wrap .month {
    margin-bottom: 0;
  }
}

/* --- Cercador de dates amb rang opcional (`date-search-field.view.js`) ---
 *
 * Layout (rang tancat):
 *   ┌──────────────────────────────────[×][+ Rang]┐
 *   │ camp principal                               │
 *   └──────────────────────────────────────────────┘
 *   hint
 *
 * Layout (rang obert). El «+ Rang» desapareix; «fins a» apareix com a notch
 * sobre la vora superior de l'input final (igual que «Data Estrena» sobre el
 * camp principal).  L'alçada del row NO canvia, evitant salt vertical.
 *
 *                            ┌─ fins a ─────────[×]┐
 *   ┌─────────────[×]┐      │ camp final           │
 *   │ camp principal  │      └──────────────────────┘
 *   └─────────────────┘
 *   hint
 */
.date-search-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.date-search-field__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  width: 100%;
}

/* Camp principal */
.date-search-field__main-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

/* Camp final: mateixa mida i posició relativa per al notch + × absolut */
.date-search-field__range-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.date-search-field__input {
  width: 100%;
  height: 100%;
  display: block;
}

/* Contenidor absolut dels botons interns del camp principal (× i + Rang). */
.date-search-field__main-actions {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.date-search-field__main-actions > .input-clear {
  position: static;
  top: auto;
  right: auto;
  transform: none;
}

/*
 * Padding dret del camp principal: espai per al contenidor d'accions.
 * Rang tancat: × (20px) + gap (4px) + «+ Rang» (~56px) + vora del botó (2px) + marges ≈ 94px.
 * Rang obert:  «+ Rang» amagat → només × possible ≈ 32px.
 */
.date-search-field[data-range-open='false'] .date-search-field__input--main {
  padding-right: 94px;
}

.date-search-field[data-range-open='true'] .date-search-field__input--main {
  padding-right: 32px;
}

/* Padding dret del camp final: espai per al × absolut (20px + marges). */
.date-search-field__input--to {
  padding-right: 32px;
}

/* «+ Rang»: mateixa vora que `.input` (per defecte i focus); hover/active de vora com `.input` (sense canvi de color de vora al hover; sense estil natiu de botó) */
.date-search-field__add-range {
  margin: 0;
  padding: 4px 8px;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--actionable-line);
  border-radius: var(--radius-xl);
  background: var(--actionable-wash);
  color: var(--color-primary-strong);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.date-search-field__add-range::-moz-focus-inner {
  border: 0;
}

/* Com `.input`: la vora no canvia al hover (només el fons al sidebar es rebaixa més avall). */
.date-search-field__add-range:hover:not(:focus) {
  border-color: var(--actionable-line);
}

.sidebar .date-search-field__add-range:hover:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

/* En clic sense focus: mateixa vora que el repòs dels `.input`; el UA dels botons pot canviar-la si no ho forçem. */
.date-search-field__add-range:active {
  border-color: var(--actionable-line);
}

.date-search-field__add-range:focus {
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg);
}

.date-search-field__add-range:focus:active {
  border-color: var(--input-focus-border);
}

.date-search-field__add-range:focus-visible {
  outline: none;
}

/* Etiqueta «fins a» — estil notch (solapament sobre la vora superior de l'input). */
.date-search-field__range-label {
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}

/* Estats: mostrar/amagar rang. */
.date-search-field[data-range-open='false'] .date-search-field__range-wrap {
  display: none;
}

.date-search-field[data-range-open='true'] .date-search-field__add-range {
  display: none;
}

/* Hint sota la fila (12px, verd/vermell). */
.date-search-field__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-family: var(--font-ui);
  min-height: 1em;
  color: var(--muted);
}

.date-search-field__hint[data-tone='ok'] {
  color: var(--color-bool-true);
}

.date-search-field__hint[data-tone='error'] {
  color: var(--color-bool-false);
}

.date-search-field__hint[data-tone='none']:empty {
  display: none;
}

/* Notch label principal: mateix patró que altres camps del panell. */
.field:has(> .date-search-field) {
  position: relative;
  padding-top: 4px;
}

.field:has(> .date-search-field) > .label {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
  pointer-events: none;
}

.field:has(> .date-search-field) .date-search-field__input {
  padding-top: 17px;
  padding-bottom: 10px;
  font-family: var(--font-body);
}

.field:has(> .date-search-field) .date-search-field__input::placeholder {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-xl);
  line-height: 1.25;
  font-weight: 400;
}

.sidebar .field:has(> .date-search-field) .date-search-field__input {
  padding-top: 14px;
  padding-bottom: 8px;
}

/* Sidebar: alineació del notch «Data estrena» amb la resta de camps (mateixes
   mètriques que `.sidebar .field:has(> .input…) > .label` i `padding-top: 3px`). */
.sidebar .field:has(> .date-search-field) {
  padding-top: 3px;
}

.sidebar .field:has(> .date-search-field) > .label {
  left: 8px;
  top: 4px;
  padding: 0 3px;
}

/* Sidebar: padding intern reduït perquè el botó hi càpiga sense créixer. */
.sidebar .date-search-field[data-range-open='false'] .date-search-field__input--main {
  padding-right: 82px;
}

.sidebar .date-search-field[data-range-open='true'] .date-search-field__input--main {
  padding-right: 28px;
}

.sidebar .date-search-field__input--to {
  padding-right: 28px;
}

.sidebar .date-search-field__add-range {
  padding: 3px 6px;
}

/* --- Camps de formulari --- */
.field .label,
.type-title {
  display: block;
  font-size: var(--font-sm);
  color: var(--muted);
  font-weight: 800;
  font-family: var(--font-ui);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.field .label {
  margin: 0 0 5px;
}

.type-title {
  margin: 0 0 2px;
}

/* Etiqueta fixa al contorn (Material outlined), sense animació ni text dins del camp */
.field:has(> .input:is(input, textarea)),
.field:has(.filter-tag-field.input),
.field:has(> select.input),
.field:has(> .filter-sidebar-custom-select),
.field:has(> .bool-filter-tristate > button.input),
div:has(> .type-title + .chips) {
  position: relative;
  padding-top: 4px;
}

.field:has(> .input:is(input, textarea)) > .label,
.field:has(.filter-tag-field.input) > .label,
.field:has(> select.input) > .label,
.field:has(> .filter-sidebar-custom-select) > .label,
.field:has(> .bool-filter-tristate > button.input) > .label,
div:has(> .type-title + .chips) > .type-title {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
}

div:has(> .type-title + .chips) > .type-title {
  z-index: 10;
}

.field:has(> .input:is(input, textarea)) > .label:is(div),
.field:has(.filter-tag-field.input) > .label:is(div),
.field:has(> select.input) > .label:is(div),
.field:has(> .filter-sidebar-custom-select) > .label:is(label),
.field:has(> .filter-sidebar-custom-select) > .label:is(div) {
  pointer-events: none;
}

.field:has(> .input:is(input, textarea)) > .input {
  padding-top: 17px;
  padding-bottom: 10px;
}

.field:has(> select.input) > select.input {
  padding-top: 17px;
  padding-bottom: 10px;
}

.field:has(> .filter-sidebar-custom-select) > .filter-sidebar-custom-select .filter-sidebar-custom-select__trigger {
  padding-top: 17px;
  padding-bottom: 10px;
}

.field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.input {
  padding-top: 17px;
  padding-bottom: 10px;
}

.field:has(.filter-tag-field.input) .filter-tag-field.input {
  padding-top: 14px;
  padding-bottom: 8px;
}

.field .field-error {
  margin: 6px 0 0;
  font-size: var(--font-sm);
  color: #c0392b;
  line-height: 1.35;
}
.input {
  padding: 10px 12px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  font-size: var(--font-xl);
  outline: none;
  transition: border-color 0.12s ease;

  width: 100%;
  display: block;
}

.input::placeholder,
textarea.input::placeholder {
  color: var(--color-placeholder);
}

/* Cerca global: cos amb font-body; exemple (placeholder) amb pila compacta, mateixa mida que .input */
.topbar .field.topbar-search-field {
  position: relative;
}

.field.topbar-search-field > .input.topbar-search__input {
  font-family: var(--font-body);
  font-size: var(--font-xl);
  line-height: 1.25;
}

.field.topbar-search-field > .input.topbar-search__input::placeholder {
  font-family: var(--font-taules-condensed);
  font-size: var(--font-xl);
  line-height: 1.25;
  font-weight: 400;
}

.input:focus {
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg);
}

/* Hover coherent amb opcions d’autocomplete / desplegable Ordenar (sense trepitjar el focus) */
.field.topbar-search-field > .input.topbar-search__input:hover:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

.sidebar .field:has(> .input:is(input, textarea)) > .input:hover:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

/* date-search-field: fills indirectes; hover al wrap perquè × / + Rang (sobre l'input) mantinguin el mateix ombrejat que la resta de camps */
.sidebar .field:has(> .date-search-field) .date-search-field__main-wrap:hover .date-search-field__input--main:not(:focus),
.sidebar .field:has(> .date-search-field) .date-search-field__range-wrap:hover .date-search-field__input--to:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

.sidebar .field .filter-tag-field.input:hover:not(:focus-within) {
  background-color: var(--filter-option-hover-bg);
}

/* Cerca global (capçalera / drawer): mateix notch i .input; espai per la lupa i el clear */
.field.topbar-search-field:has(> .topbar-search__icon) > .input.topbar-search__input {
  padding-right: 44px;
}

.field.topbar-search-field:has(> .input-clear:not([hidden])) > .input.topbar-search__input {
  padding-right: 72px;
}

.field.topbar-search-field > .input-clear {
  right: 40px;
}

.field.topbar-search-field > .topbar-search__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}

.field.topbar-search-field > .topbar-search__icon svg {
  display: block;
}

/* Botó esborrar/restablir (estètica propera a Ant Design Input allowClear: rodona gris + creu clara) */
.field:has(> .input-clear:not([hidden])) > .input:is(input, textarea) {
  /* Marge dret del botó (5px) + ample del botó (20px) + una mica d’aire */
  padding-right: 30px;
}

.field:has(> .input-clear:not([hidden])) > select.input {
  padding-right: 30px;
}

.input-clear {
  /* Afinació vertical del botó sencer (rodona + creu): p. ex. -2px per pujar-lo */
  --input-clear-nudge-y: 0px;
  /* Creu blanca sobre la rodona --line */
  --input-clear-cross-color: var(--card);
  position: absolute;
  right: 5px;
  top: 50%;
  bottom: auto;
  /*
   * El 50% del .field és el centre geomètric del contenidor; el text queda una mica més avall
   * (notch). +2px compensa sense passar-se (abans +4/+9px quedava massa avall).
   */
  transform: translateY(calc(-50% + 2px + var(--input-clear-nudge-y)));
  z-index: 2;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}

/* Rodona: 20px = mateixa mida que l’àrea de clic (viewBox 24, r≈10 escalat) */
.input-clear::before {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--line);
  pointer-events: none;
}

/*
 * X (viewBox 24×24, stroke 2.5); mateixa escala que la rodona.
 */
.input-clear::after {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  background-color: var(--input-clear-cross-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M8%208%20L16%2016%20M16%208%20L8%2016'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M8%208%20L16%2016%20M16%208%20L8%2016'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  pointer-events: none;
}

.input-clear:hover::before {
  filter: brightness(0.92);
}

.input-clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-form-focus-rgb), var(--opacity-40));
}

.input-clear[hidden] {
  display: none;
}
/* --- Desplegable del panell de filtres simples (mateixa estètica que input text) --- */
.simple-filters-body :is(select, button).filter-sidebar-select,
.simple-filters-card :is(select, button).filter-sidebar-select {
  width: 100%;
  max-width: 100%;
  display: block;
  min-height: var(--ctrl-min-height);
  font-size: var(--font-xl);
  font-weight: 400;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  text-align-last: auto;
  color: var(--text-strong);
  line-height: 1.25;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--actionable-wash);
  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.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: calc(100% - 12px) 50%;
  padding: 10px 40px 10px 12px;
  border-radius: var(--ctrl-radius);
  box-sizing: border-box;
  cursor: pointer;
}

/* Tri-estat booleà: valor «Qualsevol» (buit) amb el mateix to que els placeholders dels inputs */
.simple-filters-body :is(select, button).filter-sidebar-select.filter-sidebar-select--indifferent-value,
.simple-filters-card :is(select, button).filter-sidebar-select.filter-sidebar-select--indifferent-value {
  color: var(--color-placeholder);
}

.simple-filters-body :is(select, button).filter-sidebar-select:focus,
.simple-filters-card :is(select, button).filter-sidebar-select:focus {
  border-color: var(--input-focus-border);
  background-color: var(--input-focus-bg);
}

.simple-filters-body :is(select, button).filter-sidebar-select:hover:not(:focus),
.simple-filters-card :is(select, button).filter-sidebar-select:hover:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

/* El trigger del desplegable custom hereta `.filter-sidebar-select` (sidebar / app); la compacta Taules només a `.filter-autocomplete-list` sota `.db-section`. «Ordenar» (data-filter-key=sort) mateixa pila que la resta del formulari. */

.simple-filters-body select.filter-sidebar-select::-ms-expand,
.simple-filters-card select.filter-sidebar-select::-ms-expand {
  display: none;
}

.simple-filters-body .field:has(> select.input) > select.filter-sidebar-select,
.simple-filters-card .field:has(> select.input) > select.filter-sidebar-select {
  padding-top: 17px;
  padding-bottom: 10px;
}

.simple-filters-body .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.filter-sidebar-select,
.simple-filters-card .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.filter-sidebar-select {
  padding-top: 17px;
  padding-bottom: 10px;
}

/* Desplegable booleà tri-estat (llista sobre el grid; mateixes icones que les cel·les) */
.bool-filter-tristate {
  position: relative;
  width: 100%;
}

.bool-filter-tristate:has(.bool-filter-tristate__list:not([hidden])) {
  z-index: 60;
}

.bool-filter-tristate__trigger-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-width: 0;
}

.bool-filter-tristate--text-only .bool-filter-tristate__trigger-inner {
  gap: 0;
}

/* Desplegable genèric (Ordenar, etc.): `<select>` ocult + listbox amb tokens de l’autocomplete */
.filter-sidebar-custom-select {
  position: relative;
  width: 100%;
}

.filter-sidebar-custom-select:has(.filter-autocomplete-list:not([hidden])) {
  z-index: 60;
}

.filter-sidebar-custom-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.filter-sidebar-custom-select__trigger {
  width: 100%;
  text-align: left;
}

.filter-sidebar-custom-select__trigger-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.bool-filter-tristate__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--actionable-wash);
  border: 1px solid var(--actionable-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  max-height: min(40vh, 220px);
  overflow-y: auto;
}

.bool-filter-tristate__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--font-xl);
  font-family: inherit;
  font-weight: 400;
}

.bool-filter-tristate__option:hover,
.bool-filter-tristate__option:focus {
  outline: none;
  background: var(--filter-option-hover-bg);
}

.bool-filter-tristate__option[aria-selected='true'] {
  background: rgba(var(--color-primary-rgb), var(--opacity-05));
}

/* Qualsevol (sense filtre): placeholder; Sí/No: mateix color i pes que el text als inputs de cerca */
.bool-filter-tristate__option--neutral {
  color: var(--color-placeholder);
}

.bool-filter-tristate__option--value {
  color: var(--text-strong);
}

.bool-filter-tristate__ico--true {
  color: var(--color-bool-true);
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
}

/* Mateixa mètrica que la creu; sense vermell — reserva d’espai visual */
.bool-filter-tristate__ico--false {
  color: transparent;
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
}

/* --- Grup de checkboxes exclusius (p. ex. filtre «Perfil» a Persones) ---
 * Notch label al contorn (patró coherent amb .input, select, .bool-filter-tristate);
 * cada opció ocupa una línia amb una casella nativa. Visualment totes marcades
 * = estat «sense filtrar» (vegeu createRadioGroupFilterField).
 */
.field:has(> .filter-radio-group) {
  position: relative;
  padding-top: 4px;
}

.field:has(> .filter-radio-group) > .label {
  position: absolute;
  left: 10px;
  top: 4px;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  background: var(--field-notch-bg, var(--card));
  pointer-events: none;
}

.filter-radio-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 8px;
  border: 1px solid var(--actionable-line);
  border-radius: var(--radius-xl);
  background: var(--actionable-wash);
  box-sizing: border-box;
  width: 100%;
}

.filter-radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: var(--radius-lg);
  font-size: var(--font-xl);
  font-weight: 400;
  font-family: var(--font-taules-condensed);
  color: var(--color-placeholder);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease;
}

.filter-radio-option__input {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  accent-color: rgb(var(--color-primary-rgb));
}

.filter-radio-option__label {
  flex: 1 1 auto;
  line-height: 1.2;
}

.filter-radio-option.is-active {
  color: var(--text-strong);
}

.filter-radio-option__input:focus-visible {
  outline: 2px solid rgba(var(--color-form-focus-rgb), 0.4);
  outline-offset: 2px;
}


/* --- Camp d’autor amb etiquetes (tags) --- */
.filter-tag-field.input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 8px 10px;
  /* Mateix to que `.input` i la llista oberta `.filter-autocomplete-list` (no `--card`). */
  background-color: var(--actionable-wash);
}

.filter-tag-field.input:focus-within {
  border-color: var(--input-focus-border);
  background-color: var(--input-focus-bg);
}

.filter-tag-chips {
  display: contents;
}

.filter-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 1px 1px 1px 5px;
  border-radius: var(--radius-chip);
  border: 1px solid rgba(var(--color-primary-rgb), var(--opacity-20));
  background: rgba(var(--color-primary-rgb), var(--opacity-15));
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-strong);
  font-family: var(--font-ui);
  max-width: 100%;
}

.filter-tag-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  font-weight: 700;
}

.filter-tag-chip-remove {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.filter-tag-chip-remove:hover {
  color: var(--text-strong);
  background: rgba(var(--ink-rgb), var(--opacity-06));
}

.filter-tag-input {
  flex: 1 1 120px;
  min-width: 5em;
  border: none;
  background: transparent;
  font-size: var(--font-xl);
  color: var(--text-strong);
  outline: none;
  padding: 4px 0;
}

.filter-tag-input::placeholder {
  color: var(--color-placeholder);
}

/* --- Autocomplete (catàleg: autors, taules: Autor, etc.) --- */
.filter-autocomplete {
  position: relative;
}

/* Tancada: absolute sota el camp. Oberta: el `<ul>` passa a `document.body` (classe --portal) i rep position:fixed + z-index (filters-panel.view.js). */
.filter-autocomplete-list.filter-autocomplete-list--portal {
  margin: 0;
}

/* Portal al body: mateixa pila que .db-section / #section-cataleg (selectors ancestrals perduts). */
.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--typo-taules,
.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--typo-taules .filter-autocomplete-option {
  font-family: var(--font-taules-condensed);
}

.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--typo-app,
.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--typo-app .filter-autocomplete-option {
  font-family: var(--font-body);
}

/*
 * Sidebar: mateixos tokens que .sidebar (layout.css). Al body, var(--font-md/-sm) dels ítems
 * tornen a coincidir amb el filtre; sense això es veuen les mides del :root.
 */
.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--sidebar-context {
  --font-xs: 8px;
  --font-sm: 10px;
  --font-base: 10px;
  --font-md: 11px;
  --font-lg: 12px;
  --font-xl: 13px;
  --font-2xl: 14px;
  --font-3xl: 22px;
  --font-4xl: 28px;
}

.filter-autocomplete-list.filter-autocomplete-list--portal.filter-autocomplete-list--sidebar-context .filter-autocomplete-option {
  padding: 6px 10px;
}

/* Fons alineat amb `.input` / `.filter-tag-field.input` (no `var(--card)`): mateix sistema visual que la resta del panell. */
.filter-autocomplete-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  bottom: auto;
  z-index: 30;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  max-height: min(78vh, 600px);
  overflow-y: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  box-shadow: var(--shadow-soft);
}

/*
 * Scrollbar de llistes de filtres: track amb el mateix `--actionable-wash` que el cos del desplegable
 * (Firefox + WebKit); thumb primari com `mobile-nav.css`. Aplica també al tri-estat booleà.
 */
.filter-autocomplete-list,
.bool-filter-tristate__list {
  scrollbar-width: thin;
  scrollbar-color: var(--actionable-border) var(--actionable-wash);
}

.filter-autocomplete-list::-webkit-scrollbar,
.bool-filter-tristate__list::-webkit-scrollbar {
  width: 10px;
}

.filter-autocomplete-list::-webkit-scrollbar-thumb,
.bool-filter-tristate__list::-webkit-scrollbar-thumb {
  background: var(--actionable-border);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.filter-autocomplete-list::-webkit-scrollbar-track,
.bool-filter-tristate__list::-webkit-scrollbar-track {
  background: var(--actionable-wash);
}

.filter-autocomplete-option {
  padding: 6px 12px;
  font-size: var(--font-md);
  line-height: 1.18;
  font-family: inherit;
  font-weight: 400;
  color: var(--text-strong);
  cursor: pointer;
}

.filter-autocomplete-option--separator {
  pointer-events: none;
  user-select: none;
  cursor: default;
  padding: 0.5rem 0 0.55rem;
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
  /* Barra al 90% d’amplada de la fila (la llista del desplegable), centrada. */
  background: linear-gradient(
        var(--actionable-border),
        var(--actionable-border)
      )
      center / 90% 1px no-repeat transparent !important;
}

.sidebar .filter-autocomplete-option--separator {
  padding: 0.5rem 0 0.55rem;
}

/* Mateixa pila tipogràfica que .results-table tbody td (results.css) */
.db-section .filter-autocomplete-list:not([data-filter-key='sort']),
.db-section .filter-autocomplete-list:not([data-filter-key='sort']) .filter-autocomplete-option {
  font-family: var(--font-taules-condensed);
}

.db-section .filter-autocomplete-list[data-filter-key='sort'],
.db-section .filter-autocomplete-list[data-filter-key='sort'] .filter-autocomplete-option {
  font-family: var(--font-body);
}

#section-cataleg .filter-autocomplete-list,
#section-cataleg .filter-autocomplete-option {
  font-family: var(--font-body);
}

@media (max-width: 1400px) {
  .filter-autocomplete-option {
    font-size: var(--font-sm);
  }
}

.filter-autocomplete-option:hover:not(.filter-autocomplete-option--separator),
.filter-autocomplete-option.is-active:not(.filter-autocomplete-option--separator) {
  background: var(--filter-option-hover-bg);
}

/* Amb navegació per teclat, el ratolí pot quedar sobre una altra fila: sense ressalt de hover allà. */
.filter-autocomplete-list.filter-autocomplete-list--keyboard-focus
  .filter-autocomplete-option:hover:not(.is-active):not(.filter-autocomplete-option--separator) {
  background: transparent;
}

/* --- Chips de filtre (dues button-bars de tipus) --- */
.chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
}
/*
 * Megamenú: les dues barres de tipus es fonen en una única barra visual.
 * La primera barra perd el border dret i les cantonades dretes; la segona
 * perd les cantonades esquerres. El border esquerre de la segona actua de divisor.
 */
.agenda-mm .chips {
  flex-direction: row;
  gap: 0;
}
.agenda-mm .chips .chips-bar {
  width: auto;
  flex: 0 0 auto;
}
/*
 * Juntura entre les dues barres al megamenú: un sol traç vertical; el primer xip
 * de la segona barra conserva el border esquerre (divisor).
 */
.agenda-mm .chips .chips-bar:first-child > button.chip:last-child {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.agenda-mm .chips .chips-bar:last-child > button.chip:first-child {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Cada barra de tipus: sense marc al contenidor; vores com la resta (var(--actionable-line), primari). */
.chips-bar {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-xl);
  gap: 1px;
  /* Franja 1px entre xips (blanc explícit; el gap és el separador visual) */
  background: #fff;
  box-shadow: none;
}
.chips-bar > button.chip {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  min-height: var(--ctrl-min-height);
  padding: var(--ctrl-pad-y) var(--ctrl-pad-x);
  gap: var(--space-2);
  border-top: 1px solid var(--actionable-line);
  border-bottom: 1px solid var(--actionable-line);
  border-left: none;
  border-right: none;
  border-radius: 0;
  font-weight: var(--ctrl-font-weight);
  letter-spacing: var(--ctrl-letter-spacing);
  font-family: var(--font-ui);
  box-sizing: border-box;
}
.chips-bar > button.chip:first-child {
  border-left: 1px solid var(--actionable-line);
}
.chips-bar > button.chip:last-child {
  border-right: 1px solid var(--actionable-line);
}
/* Text dels tipus: mateixa mida que abans (.chip .chip-txt), no --ctrl-font-size dels altres controls */
.chips-bar > button.chip .chip-txt {
  font-size: var(--font-base);
}
.chip {
  --chip-main: rgba(var(--color-primary-rgb), 1);
  --chip-border: rgba(var(--color-primary-rgb), var(--opacity-50));
  --chip-soft: var(--actionable-hover);

  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border: 1px solid rgba(var(--ink-rgb), var(--opacity-15));
  border-radius: var(--radius-lg);
  cursor: pointer;
  user-select: none;
  background: var(--calendar-day-muted-bg);
  transition:
    transform 0.06s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}
.chip.type-ballada {
  --chip-main: rgb(var(--color-ballada-rgb));
  --chip-border: rgba(var(--color-ballada-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-ballada-rgb)) 10%, white);
}
.chip.type-concert {
  --chip-main: rgb(var(--color-concert-rgb));
  --chip-border: rgba(var(--color-concert-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-concert-rgb)) 10%, white);
}
.chip.type-aplec {
  --chip-main: rgb(var(--color-aplec-rgb));
  --chip-border: rgba(var(--color-aplec-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-aplec-rgb)) 10%, white);
}
.chip.type-concurs {
  --chip-main: rgb(var(--color-concurs-rgb));
  --chip-border: rgba(var(--color-concurs-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-concurs-rgb)) 10%, white);
}
.chip.type-curset {
  --chip-main: rgb(var(--color-curset-rgb));
  --chip-border: rgba(var(--color-curset-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-curset-rgb)) 10%, white);
}
.chip.type-altres {
  --chip-main: rgb(var(--color-altres-rgb));
  --chip-border: rgba(var(--color-altres-rgb), var(--opacity-50));
  --chip-soft: color-mix(in srgb, rgb(var(--color-altres-rgb)) 10%, white);
}
/* Color unificat: el botó sencer (icona + text) hereta el mateix color */
.chip.on {
  color: var(--chip-main);
}
.chip:not(.on) {
  color: rgba(var(--chip-icon-rgb), var(--opacity-40));
}
/* Icona dins chip: sense marc ni fons */
.chip .chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}
.chip .chip-ico svg,
.chip .chip-ico svg * {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
}
.chip:not(.on) {
  opacity: 0.75;
  filter: grayscale(0.3) saturate(0.5);
}
.chip:not(.on):hover {
  opacity: 0.75;
  filter: grayscale(0.3);
  border-color: var(--actionable-border);
}
.chip:active {
  transform: translateY(1px);
}
.chip input {
  display: none;
}
.chip.on {
  border-color: var(--chip-border);
  background: var(--chip-soft);
}
.chip.on .tick {
  border-color: var(--chip-main);
  background: var(--chip-main);
}
.chip.on .tick svg {
  opacity: 1;
}
.chip svg {
  fill: currentColor;
  stroke: currentColor;
}
.chip .chip-txt {
  font-weight: 900;
  font-family: var(--font-ui);
  font-size: var(--font-base);
  white-space: nowrap;
  text-transform: lowercase;
}

/* --- Icon pill --- */
.icon-pill {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--cal-main, var(--actionable-hover));
  color: var(--cal-soft, rgba(51, 23, 30, var(--opacity-10)));
}
.icon-pill svg,
.icon-pill svg * {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
}

/* --- Mini-selects (desplegables mes/any) — alçada i estètica alineades amb --ctrl-* --- */
.mini-select,
.mini-year {
  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);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  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: 16px 16px;
  background-position: calc(100% - 4px) 50%;
  padding: 0 30px 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;
}
.mini-select::-ms-expand,
.mini-year::-ms-expand {
  display: none;
}
.mini-select {
  width: 96px;
}
.mini-select.mini-year {
  width: 62px;
  padding: 0 22px 0 4px;
}
.mini-select:focus,
.mini-year:focus {
  border-color: var(--input-focus-border);
  background-color: var(--input-focus-bg);
}
.mini-select,
.mini-select.mini-year {
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
}

/* --- Popover de calendari i model --- */
.cal-model {
  display: none;
}
.month-head {
  position: relative;
}
.cal-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 12px);
  max-width: calc(100% - 12px);
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  z-index: 20;
  box-shadow: var(--shadow-soft);
}
.cal-popover[data-kind="year"] {
  width: calc(100% - 4px);
  max-width: calc(100% - 4px);
}
.cal-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.cal-trigger {
  text-align: left;
}
.cal-trigger .bb-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}
.cal-popover[hidden] {
  display: none;
}
.cal-popover .cal-grid {
  display: grid;
  gap: var(--space-1h);
}
.cal-popover .cal-grid.month {
  grid-template-columns: repeat(3, 1fr);
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.cal-popover .cal-grid.year {
  grid-template-columns: repeat(4, 1fr);
  border: 0;
  background: transparent;
  padding: 0;
}
.cal-popover .day.cal-opt {
  width: 100%;
}
.sidebar .cal-popover .day.cal-opt {
  width: 100%;
}

/* --- Barra de botons --- */
.button-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  border-radius: var(--ctrl-radius);
  background: var(--actionable-line);
  box-shadow: none;
  transition: var(--ctrl-transition);
  isolation: isolate;
}
.month-head .month-select.button-bar {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  justify-content: flex-start;
}
.month-head .month-select.button-bar .mini-select {
  flex: 1 1 0%;
  min-width: 0;
}
.month-head .month-select.button-bar .mini-year {
  flex: 0 0 auto;
  min-width: 2.75rem;
}
.month-select.button-bar {
  flex: 0 0 auto;
}
.button-bar > :is(button, select, a) {
  box-shadow: none;
  border-radius: 0;
  position: relative;
  z-index: 0;
}
/* El separador entre segments és el gap 1px amb fons blanc del contenidor (patró Tipus). */
.button-bar > :is(button, select, a):first-child {
  border-top-left-radius: var(--ctrl-radius);
  border-bottom-left-radius: var(--ctrl-radius);
}
.button-bar > :is(button, select, a):last-child {
  border-top-right-radius: var(--ctrl-radius);
  border-bottom-right-radius: var(--ctrl-radius);
}
.button-bar > :is(button, select, a):focus {
  box-shadow: var(--ctrl-shadow-hover);
}
.button-bar > :is(button, select, a):active {
  box-shadow: var(--ctrl-shadow-active);
}
.button-bar > :is(button, select, a):hover,
.button-bar > :is(button, select, a):focus,
.button-bar > :is(button, select, a):active {
  position: relative;
  /* Per sota de l'etiqueta «Tipus» (z-index 10); per sobre dels segments veïns (z-index 0) */
  z-index: 9;
}
.month-footer.button-bar {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  justify-content: flex-start;
  box-sizing: border-box;
}
.month-footer.button-bar > button {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  padding: 0 2px;
}
.button-bar > :is(button, select, a):active {
  transform: scale(1, var(--ctrl-scale-active));
}
.button-bar > :is(button, a) .bb-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transition: var(--ctrl-transition);
  will-change: transform;
}
.button-bar > :is(button, a):active .bb-content {
  transform: scale(var(--ctrl-scale-active), 1);
}

/* Tipus: gap + fons blanc = separador entre xips. Especificitat (0,2,0) > .button-bar (0,1,0) per gap. */
.button-bar.chips-bar {
  gap: 1px;
  background: #fff;
}
.button-bar.chips-bar > button + button {
  margin-left: 0;
}
.button-bar.chips-bar > button.chip {
  background-color: var(--actionable-wash);
}
.button-bar.chips-bar > button.chip.on {
  background: var(--chip-soft);
}
/* Marc structural uniforme: l'escala i l'ombra donen feedback, el border sempre és el marc compartit.
   Fons: wash original (sobre parent #fff la semi-transparència és correcta). */
.button-bar.chips-bar > button.chip.on,
.button-bar.chips-bar > button.chip:hover {
  border-color: var(--actionable-line);
}
.button-bar.chips-bar > button.chip:hover {
  background-color: var(--actionable-wash);
}
.button-bar.chips-bar > button.chip.on:hover {
  background: var(--chip-soft);
}

/* --- Sobreescriptures compactes (globals després dels valors per defecte) --- */
.month .month-head,
.month .month-title-row {
  width: 100%;
  box-sizing: border-box;
}
.month-head .month-title-row {
  flex-wrap: nowrap;
}
.month-select {
  gap: var(--space-1);
}
.day.muted {
  box-shadow: none;
}
.day.muted:active {
  transform: none;
  box-shadow: none;
}

/* Calendari: barres segmentades amb gap del color del border (patró unificat). */
.month .month-select.button-bar,
.month .month-footer.button-bar {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-xl);
  gap: 1px;
  padding: 0;
  background: var(--actionable-line);
  align-items: stretch;
}

.month .month-nav.button-bar {
  display: flex;
  width: auto;
  flex: 0 0 auto;
  max-width: none;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-xl);
  gap: 1px;
  padding: 0;
  background: var(--actionable-line);
  align-items: stretch;
}

.month .month-select.button-bar {
  min-width: min(12rem, 100%);
  flex: 1 1 auto;
  width: auto;
}

.month .month-select.button-bar > :is(button, select, a, .cal-trigger, .mini-select, .mini-year),
.month .month-nav.button-bar > :is(button, select, a),
.month .month-footer.button-bar > :is(button, select, a) {
  flex: 1 1 auto;
  min-width: min-content;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
  padding: var(--ctrl-pad-y) var(--ctrl-pad-x);
  font-size: var(--ctrl-font-size);
  font-weight: var(--ctrl-font-weight);
  font-family: var(--font-ui);
  letter-spacing: var(--ctrl-letter-spacing);
  color: var(--text-strong);
  border-top: 1px solid var(--actionable-line);
  border-bottom: 1px solid var(--actionable-line);
  border-left: none;
  border-right: none;
  background-color: var(--actionable-wash);
  transition: var(--ctrl-transition);
}
.month .month-select.button-bar > :first-child,
.month .month-nav.button-bar > :first-child,
.month .month-footer.button-bar > :first-child {
  border-left: 1px solid var(--actionable-line);
}
.month .month-select.button-bar > :last-child,
.month .month-nav.button-bar > :last-child,
.month .month-footer.button-bar > :last-child {
  border-right: 1px solid var(--actionable-line);
}

/* Mes/any: permeten repartir l’espai sense min-content; el footer manté la regla genèrica d’amunt */
.month .month-select.button-bar > :is(button, select, a, .cal-trigger, .mini-select, .mini-year) {
  min-width: 0;
}

/* Fletxa del desplegable més a la vora per guanyar amplada de text (mateix SVG que .mini-select) */
.month .month-select.button-bar > :is(select.mini-select:not(.mini-year), button.cal-trigger.mini-select) {
  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: 16px 16px;
  background-position: calc(100% - 5px) 50%;
  padding: var(--ctrl-pad-y) 26px var(--ctrl-pad-y) var(--ctrl-pad-x);
}
.month .month-select.button-bar > :is(select.mini-year, button.mini-year.cal-trigger) {
  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: 16px 16px;
  background-position: calc(100% - 4px) 50%;
  padding: var(--ctrl-pad-y) 22px var(--ctrl-pad-y) var(--ctrl-pad-x);
}

/* Fletxes </>: més estretes que alçada per cedir amplada al desplegable de mes sense créixer la filera */
.month .month-nav.button-bar > .icon-btn {
  flex: 0 0 auto;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: var(--ctrl-min-height);
  min-height: var(--ctrl-min-height);
  box-sizing: border-box;
}

/* Mes absorbeix l’espai flexible; any només el necessari (4 xifres + fletxa) */
.month .month-select.button-bar > :nth-child(1) {
  flex: 1 1 0%;
  min-width: 0;
}

.month .month-select.button-bar > :nth-child(2) {
  flex: 0 0 auto;
  min-width: 2.75rem;
}

.month .month-footer.button-bar > .today-btn {
  white-space: nowrap;
}

.month .month-footer.button-bar > .today-btn:hover,
.month .month-nav.button-bar > .icon-btn:hover,
.month .month-select.button-bar > :is(.mini-select, .mini-year, .cal-trigger):hover {
  background-color: var(--actionable-hover);
}

.month .month-select.button-bar > :is(button, select, a, .cal-trigger):focus,
.month .month-nav.button-bar > :is(button, select, a):focus,
.month .month-footer.button-bar > :is(button, select, a):focus {
  background-color: var(--input-focus-bg);
  outline: none;
}



/* --- Sobreescriptures en context de sidebar --- */
/* Px fixos addicionals (la resta hereda tokens redefinits a .sidebar a layout.css) */
.sidebar .card.filters,
.sidebar .simple-filters-card {
  padding: 9px 11px;
}

.sidebar .filters-row {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
.sidebar .month {
  width: 100%;
  border-radius: 11px;
  padding: 8px 8px 8px;
}

.sidebar .month-head {
  margin-bottom: 6px;
}

.sidebar .month-footer,
.sidebar .month > .month-footer {
  margin-top: 6px;
}

.sidebar .dow {
  margin-bottom: 5px;
}

.sidebar .dow div {
  font-size: 9px;
}

.sidebar .day {
  font-size: 10px;
}

.sidebar .icon-btn svg {
  width: 13px;
  height: 13px;
}

.sidebar .today-btn {
  padding: 0 5px;
}

.sidebar .dot {
  bottom: 2px;
  width: 5px;
  height: 5px;
}

.sidebar .input {
  padding: 8px 10px;
}

.sidebar .field:has(> .input:is(input, textarea)) > .input {
  padding-top: 14px;
  padding-bottom: 8px;
}

.sidebar .field:has(> select.input) > select.input {
  padding-top: 14px;
  padding-bottom: 8px;
}

.sidebar .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.input {
  padding-top: 14px;
  padding-bottom: 8px;
}

.sidebar .field:has(> .input:is(input, textarea)) > .label,
.sidebar .field:has(.filter-tag-field.input) > .label,
.sidebar .field:has(> select.input) > .label,
.sidebar .field:has(> .filter-sidebar-custom-select) > .label,
.sidebar .field:has(> .bool-filter-tristate > button.input) > .label,
.sidebar div:has(> .type-title + .chips) > .type-title {
  left: 8px;
  top: 4px;
  padding: 0 3px;
}

.sidebar .field:has(> .input:is(input, textarea)),
.sidebar .field:has(> select.input),
.sidebar .field:has(> .filter-sidebar-custom-select),
.sidebar .field:has(> .bool-filter-tristate > button.input),
.sidebar div:has(> .type-title + .chips) {
  padding-top: 3px;
}

.sidebar .filter-tag-field.input {
  min-height: 35px;
  padding: 6px 8px;
}

.sidebar .filter-tag-chip-remove {
  width: 18px;
  height: 18px;
  font-size: 12px;
}

.sidebar .filter-tag-chip-text {
  max-width: 160px;
}

.sidebar .month :is(.mini-select, .mini-year):hover:not(:focus) {
  background-color: var(--filter-option-hover-bg);
}

.sidebar .simple-filters-body :is(select, button).filter-sidebar-select,
.sidebar .simple-filters-card :is(select, button).filter-sidebar-select {
  background-size: 14px 14px;
  padding: 8px 32px 8px 10px;
}

.sidebar .simple-filters-body .field:has(> select.input) > select.filter-sidebar-select,
.sidebar .simple-filters-card .field:has(> select.input) > select.filter-sidebar-select {
  padding-top: 14px;
  padding-bottom: 8px;
}

.sidebar .simple-filters-body .field:has(> .filter-sidebar-custom-select) > .filter-sidebar-custom-select .filter-sidebar-custom-select__trigger,
.sidebar .simple-filters-card .field:has(> .filter-sidebar-custom-select) > .filter-sidebar-custom-select .filter-sidebar-custom-select__trigger {
  padding-top: 14px;
  padding-bottom: 8px;
}

.sidebar .simple-filters-body .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.filter-sidebar-select,
.sidebar .simple-filters-card .field:has(> .bool-filter-tristate > button.input) > .bool-filter-tristate > button.filter-sidebar-select {
  padding-top: 14px;
  padding-bottom: 8px;
}

.sidebar .chip {
  padding: 6px 8px;
}

.sidebar .chip .chip-ico svg,
.sidebar .chip .chip-ico svg * {
  width: 12px;
  height: 12px;
}

.sidebar .icon-pill {
  width: 21px;
  height: 21px;
}

.sidebar .icon-pill svg,
.sidebar .icon-pill svg * {
  width: 12px;
  height: 12px;
}

.sidebar .mini-select {
  width: 77px;
  background-size: 13px 13px;
  padding: 0 24px 0 8px;
}

.sidebar .mini-select.mini-year {
  width: 50px;
  padding: 0 18px 0 3px;
}

.sidebar .month .month-select.button-bar > :is(select.mini-select:not(.mini-year), button.cal-trigger.mini-select) {
  background-size: 13px 13px;
  background-position: calc(100% - 4px) 50%;
  padding: var(--ctrl-pad-y) 21px var(--ctrl-pad-y) var(--ctrl-pad-x);
}

.sidebar .month .month-select.button-bar > :is(select.mini-year, button.mini-year.cal-trigger) {
  background-size: 13px 13px;
  background-position: calc(100% - 3px) 50%;
  padding: var(--ctrl-pad-y) 18px var(--ctrl-pad-y) var(--ctrl-pad-x);
}

.sidebar .month .month-nav.button-bar > .icon-btn {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
}

.sidebar .month .month-select.button-bar > :nth-child(2) {
  min-width: 2.2rem;
}

.sidebar .month-select.button-bar .mini-select,
.sidebar .month-select.button-bar .mini-year {
  padding-right: 21px;
  background-position: calc(100% - 4px) 50%;
}

.sidebar .month-select.button-bar .mini-year {
  padding-right: 18px;
  background-position: calc(100% - 3px) 50%;
}

.sidebar .cal-popover {
  top: calc(100% + 6px);
  border-radius: 11px;
  padding: 8px;
}

.sidebar .filter-autocomplete-list {
  max-height: 264px;
  top: calc(100% + 3px);
  bottom: auto;
}

.sidebar .filter-autocomplete-option {
  padding: 6px 10px;
}

.sidebar .field .field-error {
  margin: 5px 0 0;
}

.sidebar .field .label {
  margin: 0 0 4px;
}

.sidebar .type-title {
  margin: 0 0 2px;
}
/* Agenda (sidebar): calendari sense requadre (el marc és .card.filters); ratlla inferior entre blocs */
#filtersSidebar .filters-row > .month {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0 var(--space-4);
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
#filtersSidebar .filters-sidebar-dates .filters-row > .month {
  margin: 0 0 var(--space-2);
}

/*
 * Megamenú agenda: el calendari va dins d’un card com el .month base, amb el mateix padding
 * que .filters a la targeta d’agenda del desktop (9px 11px; veure bloc .filters dalt).
 */
.agenda-mm .mm-ag-left .month {
  border: 3px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  margin: 0;
}

.sidebar .right-panel {
  width: 100%;
}

/* Primera targeta agenda: ratlla més centrada entre button-bar i camps (sense tocar gap del grid-2col) */
#filtersSidebar .filters-sidebar-dates .filters-row {
  gap: var(--space-2);
}

/* Agenda sidebar: dues targetes (dates vs cerca) */
#filtersSidebar .sidebar-panel > .card.filters + .card.filters {
  margin-top: var(--space-4);
}

/* --- Sobreescriptures del drawer de filtres --- */
/* CORRECCIÓ: controls mes/any al drawer de filtres (sense wrap + etiquetes centrades) */
#filtersSidebar .month-title-row {
  flex-wrap: nowrap;
}
/* Evita desbordament horitzontal: el min-width gran dels controls trencava els marges del panell */
#filtersSidebar .month-head,
#filtersSidebar .month-title-row,
#filtersSidebar .filters-row > .month,
.agenda-mm .month-head,
.agenda-mm .mm-ag-left .month {
  min-width: 0;
  max-width: 100%;
}
#filtersSidebar .month-title-row > .month-select {
  flex: 1 1 auto;
  min-width: 0;
}
#filtersSidebar .month-title-row > .month-nav {
  flex: 0 0 auto;
}
/* Megamenú: .month-head sense .month-title-row (mateix repartiment que el sidebar) */
.agenda-mm .month-head > .month-select {
  flex: 1 1 auto;
  min-width: 0;
}
.agenda-mm .month-head > .month-nav {
  flex: 0 0 auto;
}
#filtersSidebar .month .month-select.button-bar,
.agenda-mm .month .month-select.button-bar {
  min-width: 0;
}
#filtersSidebar .month .month-select.button-bar > :is(button, select, a, .cal-trigger, .mini-select, .mini-year),
#filtersSidebar .month .month-nav.button-bar > :is(button, select, a),
#filtersSidebar .month .month-footer.button-bar > :is(button, select, a),
.agenda-mm .month .month-select.button-bar > :is(button, select, a, .cal-trigger, .mini-select, .mini-year),
.agenda-mm .month .month-nav.button-bar > :is(button, select, a),
.agenda-mm .month .month-footer.button-bar > :is(button, select, a) {
  min-width: 0;
}

/* Lloc/cobla/tipus: grid i flex amb minmax(0) per no desbordar el panell (sense forçar ellipsis als chips) */
#filtersSidebar .card.filters {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#filtersSidebar .filters-row,
#filtersSidebar .right-panel {
  min-width: 0;
  max-width: 100%;
}
#filtersSidebar .search-grid {
  grid-template-columns: minmax(0, 1fr);
}
#filtersSidebar .grid-2col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#filtersSidebar .field,
#filtersSidebar .input,
#filtersSidebar div:has(> .type-title + .chips),
#filtersSidebar .chips {
  min-width: 0;
  max-width: 100%;
}
#filtersSidebar .input {
  width: 100%;
  box-sizing: border-box;
}
#filtersSidebar .chips-bar {
  min-width: 0;
  max-width: 100%;
}

.month-select.button-bar .mini-select,
.month-select.button-bar .mini-year {
  width: auto;
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
  padding-left: var(--ctrl-pad-x);
  padding-right: 26px;
  background-position: calc(100% - 6px) 50%;
}
.month-select.button-bar .mini-year {
  padding-right: 22px;
  background-position: calc(100% - 5px) 50%;
}

/* ================================================
   Sobreescriptures responsives
   ================================================ */

/*
 * Ordre dels filtres textuals de l'agenda als drawers laterals.
 *
 * L'HTML del sidebar i del megamenú posa Lloc → Cobles → Tipus (ordre desktop).
 * En mode drawer (≤1400px), Tipus puja al capdamunt perquè en un panell estret
 * i vertical és el filtre més discriminant i mereix la màxima visibilitat.
 * Al megamenú desktop es deixa al final: en horitzontal no perd importància,
 * évitar-lo al centre redueix el pes cromàtic dels chips de colors, i situat
 * al peu amb l'espai buit flotant a sota hi guanya presència visual.
 *
 * Al drawer del menú principal (`.mobile-filters-body`) el reordenament és
 * directament a l'HTML perquè aquell markup és exclusiu de mòbil.
 */
@media (max-width: 1400px) {
  #filtersSidebar .search-grid > div:has(> .type-title + .chips) {
    order: -1;
  }
}

@media (max-width: 1400px) {
  .month {
    width: 100%;
  }
  .right-panel {
    width: 100%;
    min-width: unset;
  }
  .search-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1400px) {
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ctrl-min-height);
    font-size: var(--ctrl-font-size);
    font-weight: var(--ctrl-font-weight);
    letter-spacing: var(--ctrl-letter-spacing);
    padding: var(--ctrl-pad-y) 14px;
    border-radius: var(--ctrl-radius);
    box-sizing: border-box;
    border: 1px solid var(--ui-overlay-subtle);
    background: var(--color-primary-strong);
    color: var(--card);
  }
  .filters-toggle {
    position: fixed;
    top: calc(var(--topbar-height, 72px) - 19px);
    left: 8px;
    z-index: 60;
  }
  body.filters-open .filters-toggle {
    display: none;
  }
}

@media (min-width: 1401px) {
  .filters-toggle {
    display: none;
  }
}

@media (max-width: 1400px) {
  .month-title-row {
    flex-wrap: wrap;
  }
  .filters-toggle::before {
    display: none;
  }
  .btn.btn-ghost.filters-toggle {
    background: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    color: var(--card);
  }
  .filters-toggle svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    opacity: 1;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    display: block;
    align-self: center;
    flex: 0 0 auto;
    pointer-events: none;
  }
  .month .month-select.button-bar > :is(.mini-select, .mini-year, .cal-trigger),
  .month .month-footer.button-bar > .today-btn {
    min-height: var(--ctrl-min-height);
    height: auto;
  }
  .month .day {
    min-height: 36px;
    height: 36px;
  }
  .sidebar .month .day {
    min-height: 29px;
    height: 29px;
  }
  .sidebar-panel .month {
    padding: 5px;
  }
  #filtersSidebar .sidebar-panel .month {
    padding: 0 0 var(--space-4);
  }
  .sidebar-panel .month .grid {
    grid-template-columns: repeat(7, 1fr);
    justify-content: stretch;
    gap: var(--space-1);
    padding: 0;
  }
  .sidebar-panel .month .dow {
    grid-template-columns: repeat(7, 1fr);
    justify-content: stretch;
    gap: var(--space-1);
    padding: 0;
  }
  .sidebar .day {
    height: 29px;
    width: 29px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .day.muted:hover {
    transform: none;
    box-shadow: none;
  }

  /* Shadow i scale al fill individual: identifica quin segment s'està hovirant.
     Fons opac perquè cobreixi completament els segments veïns en escalar.
     Especificitat (0,2,1) guanya sobre controls.css :is():hover (0,2,0). */
  .button-bar > :is(button, select, a):hover {
    box-shadow: var(--ctrl-shadow-hover);
    transform: scale(var(--ctrl-scale-hover));
    background-color: var(--actionable-hover);
  }
}



@media (max-width: 1400px) {
  .cal-popover .day.cal-opt {
    min-height: 44px;
  }
  .sidebar .cal-popover .day.cal-opt {
    min-height: 35px;
  }
}

/*
 * Sidebar agenda (≤520px): sense camps d’interval, amaguem el panell dret i el gap;
 * el .month no du padding inferior extra (el @1400px el posava per separar dels camps).
 * La targeta manté el padding vertical de .filters (9px 11px al sidebar), simètric dalt i baix.
 */
@media (max-width: 520px) {
  #filtersSidebar .filters-sidebar-dates .filters-row {
    gap: 0;
  }
  #filtersSidebar .filters-sidebar-dates .right-panel {
    display: none;
  }
  #filtersSidebar .sidebar-panel .filters-sidebar-dates .filters-row > .month {
    margin: 0;
    padding: 0;
    border-bottom: none;
  }
}