.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; }

.search-field { position: relative; flex: 1 1 220px; 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 !important; width: 100%; }

#ticketProjectFilter {
  max-width: 220px;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.8rem !important;
  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");
}

.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; }

/* --- Tauler de zones per urgència (només lectura) --- */
.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; }

.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;
}

/* 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, 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;
  overflow: hidden;
  cursor: pointer;
  -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%);
}
.urgency-icon { display: inline-flex; }
.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-field { display: flex; align-items: center; }
.ticket-card-foot { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--ink-soft); }

.priority-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #f5f6f8;
}
.priority-tag[data-priority="baixa"]   { color: var(--priority-baixa); }
.priority-tag[data-priority="mitjana"] { color: #8a6004; }
.priority-tag[data-priority="alta"]    { color: #b8430a; }
.priority-tag[data-priority="critica"] { color: var(--priority-critica); }

.status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.status-badge[data-status="no_comencat"] { background: var(--status-no-comencat-bg); color: var(--status-no-comencat-ink); }
.status-badge[data-status="comencat"]    { background: var(--status-comencat-bg); color: var(--status-comencat-ink); }
.status-badge[data-status="en_espera"]   { background: var(--status-en-espera-bg); color: var(--status-en-espera-ink); }
.status-badge[data-status="acabat"]      { background: var(--status-acabat-bg); color: var(--status-acabat-ink); }
.status-badge[data-status="cancelat"]    { background: var(--status-cancelat-bg); color: var(--status-cancelat-ink); }