.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
}
.filters-row input, .filters-row select {
  width: auto;
  margin-bottom: 0;
  border-color: var(--border);
  height: 38px;
  box-sizing: border-box;
}
#ticketSearch {
  max-width: 340px;
  flex: 1 1 220px;
  -webkit-appearance: none;
  appearance: none;
}
#ticketProjectFilter {
  max-width: 220px;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.8rem;
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2358698c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tickets-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.1rem; }
.tickets-card-head h2 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 0.3rem; }
.tickets-count { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }

.chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.9rem 0; }
.status-chips, .priority-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips-divider { width: 1px; height: 18px; background: var(--border); }

.status-chip, .priority-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.status-chip:hover, .priority-chip:hover { border-color: var(--input-border); background: var(--surface-soft); }
.status-chip.active { background: var(--action); border-color: var(--action); color: #fff; }
.status-chip .chip-count, .priority-chip .chip-count { opacity: 0.7; font-weight: 500; }

.priority-chip.active[data-priority=""]        { background: var(--action); border-color: var(--action); color: #fff; }
.priority-chip.active[data-priority="baixa"]   { background: var(--priority-baixa); border-color: var(--priority-baixa); color: #fff; }
.priority-chip.active[data-priority="mitjana"] { background: var(--priority-mitjana); border-color: var(--priority-mitjana); color: #fff; }
.priority-chip.active[data-priority="alta"]    { background: var(--priority-alta); border-color: var(--priority-alta); color: #fff; }
.priority-chip.active[data-priority="critica"] { background: var(--priority-critica); border-color: var(--priority-critica); color: #fff; }

.search-field { position: relative; flex: 1 1 240px; max-width: 340px; display: flex; align-items: center; }
.search-field.author-field { flex: 1 1 180px; max-width: 240px; }
.search-field svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-soft); pointer-events: none; }
.search-field input { padding-left: 32px; margin-bottom: 0; width: 100%; }

.ticket-repo {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-soft);
  border-radius: 5px;
  padding: 0.1rem 0.45rem;
}

/* --- Tauler de zones per urgència --- */
.zones-board { display: flex; flex-direction: column; gap: 1rem; }

.urgency-zone {
  border: 1px solid color-mix(in srgb, var(--zone-color) 30%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--zone-color) 6%, var(--card));
  padding: 0.85rem 1rem 1rem;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.urgency-zone-empty { opacity: 0.55; background: color-mix(in srgb, var(--zone-color) 3%, var(--card)); }

.urgency-zone-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.urgency-zone-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--zone-color); flex-shrink: 0; }
.urgency-zone-head h3 { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.urgency-zone-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--zone-color);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  min-width: 1.4rem;
  text-align: center;
}

.urgency-zone-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.urgency-zone-empty-msg { margin: 0; font-size: 0.82rem; color: var(--ink-soft); padding: 0.4rem 0.1rem; }

/* L'ombra viu al frame (no a .ticket-card, que té mask): un filter/box-shadow
   sobre un element amb mask multi-capa provoca una costura visible en
   repintar (p. ex. en hover), just a la vora on el mask talla. */
.ticket-card-frame {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 320px;
  flex: 0 1 260px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(22,35,63,0.05);
  transition: box-shadow 0.15s ease;
}
@media (max-width: 620px) {
  /* Una targeta per fila, sempre amb la mateixa amplada: evita que el
     text llarg d'algunes descripcions faci créixer unes targetes més
     que altres quan flex-basis + contingut competeixen per l'espai. */
  .ticket-card-frame { flex: 1 1 100%; max-width: 420px; }
}
.ticket-card-frame:hover { box-shadow: 0 8px 20px -8px rgba(22,35,63,0.25); }
/* Repassa amb una línia la mossegada semicircular que el mask retalla a .ticket-card,
   dibuixant només el mig cercle que cau DINS de la targeta (no cap enfora). */
.ticket-card-frame::before, .ticket-card-frame::after {
  content: '';
  position: absolute;
  left: 60px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 50%, var(--border) 50%);
  background: transparent;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.ticket-card-frame::before { top: 0; clip-path: inset(50% 0 0 0); }
.ticket-card-frame::after { top: 100%; clip-path: inset(0 0 50% 0); }

.ticket-card {
  display: flex;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--ink) 50%, var(--border) 50%);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle 6px at 60px 0%, #000 99%, transparent 100%),
    radial-gradient(circle 6px at 60px 100%, #000 99%, transparent 100%);
  -webkit-mask-composite: source-over, xor, xor;
  mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle 6px at 60px 0%, #000 99%, transparent 100%),
    radial-gradient(circle 6px at 60px 100%, #000 99%, transparent 100%);
  mask-composite: exclude, exclude;
}

.ticket-card-urgency {
  flex-shrink: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.75rem 0.25rem;
  background: var(--card);
  border-right: 2px dashed color-mix(in srgb, var(--ink) 50%, var(--border) 50%);
}
.ticket-card-urgency .urgency-icon svg { width: 20px; height: 20px; }
.ticket-card-number { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); }

.ticket-card-main {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--status-color, var(--card)) 16%, var(--card));
}
.ticket-card-top { display: flex; align-items: flex-start; gap: 0.5rem; }
.ticket-card-desc {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ticket-card-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.ticket-card-actions .icon-btn { width: 28px; height: 28px; }
.ticket-card-actions .icon-btn svg { width: 14px; height: 14px; }

@media (pointer: coarse) {
  /* La targeta és petita i compacta (per disseny), però amb el dit calen
     44px reals d'àrea de toc a cada acció; la icona visual es queda
     igual, l'àrea que envolta creix. */
  .ticket-card-actions { gap: 0.1rem; }
  .ticket-card-actions .icon-btn { width: 44px; height: 44px; }
}

.ticket-card-field { display: flex; align-items: center; }
.ticket-card-field .priority-select, .ticket-card-field .status-select { font-size: 0.72rem; padding-top: 0.2rem; padding-bottom: 0.2rem; }

.ticket-card-foot { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--ink-soft); }
.ticket-card-autodelete {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  text-align: center;
}

.priority-select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.28rem 1.6rem 0.28rem 0.65rem;
  margin-bottom: 0;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background-color: color-mix(in srgb, currentColor 16%, var(--card));
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2358698c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  cursor: pointer;
}
.priority-select:disabled { opacity: 0.6; cursor: progress; }
.priority-select option { color: var(--ink); background: var(--card); font-weight: 400; }
.priority-select[data-priority="baixa"]   { color: var(--priority-baixa); }
.priority-select[data-priority="mitjana"] { color: var(--priority-mitjana); }
.priority-select[data-priority="alta"]    { color: var(--priority-alta); }
.priority-select[data-priority="critica"] { color: var(--priority-critica); }

.info-tip { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; }
.info-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--ink-soft);
  background: transparent;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.info-icon:hover, .info-icon:focus-visible { border-color: var(--ink); color: var(--ink); }
.info-popover {
  display: none;
  position: absolute;
  top: 130%;
  left: 0;
  z-index: 20;
  width: 250px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink);
  cursor: default;
}
.info-tip:hover .info-popover, .info-tip:focus-within .info-popover { display: block; }
.info-popover p { margin: 0 0 0.5rem; font-size: 0.78rem; line-height: 1.4; }
.info-popover table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.info-popover th, .info-popover td { text-align: left; padding: 2px 4px; text-transform: none; font-weight: 600; }
.info-popover td { font-weight: 400; }

.urgency-icon { display: inline-flex; }
.urgency-icon svg { width: 24px; height: 24px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: rgba(22,35,63,0.08); color: var(--ink); }
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { background: var(--danger-bg); }
.status-select {
  width: auto;
  margin-bottom: 0;
  padding: 0.35rem 1.6rem 0.35rem 0.7rem;
  border: none;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2358698c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.status-select[data-status="no_comencat"] { background-color: var(--status-no-comencat-bg); color: var(--status-no-comencat-ink); }
.status-select[data-status="comencat"]    { background-color: var(--status-comencat-bg); color: var(--status-comencat-ink); }
.status-select[data-status="en_espera"]   { background-color: var(--status-en-espera-bg); color: var(--status-en-espera-ink); }
.status-select[data-status="acabat"]      { background-color: var(--status-acabat-bg); color: var(--status-acabat-ink); }
.status-select[data-status="cancelat"]    { background-color: var(--status-cancelat-bg); color: var(--status-cancelat-ink); }
.status-select:disabled { opacity: 0.6; cursor: progress; }
.status-select option { color: var(--ink); background: var(--card); font-weight: 400; }