:root {
  /* Variant més fosca de --dark-muted, només per a text dins l'admin:
     --dark-muted (0.6) sobre blanc queda per sota del 4.5:1 que exigeix
     WCAG AA per a text normal (~4.3:1). No es toca --dark-muted en si
     (és global i l'usen també pàgines públiques) per no alterar-ne
     l'aspecte fora d'aquí. */
  --admin-muted-text: rgba(34, 31, 30, 0.7);
}

/* Amplia l'àrea clicable/tàctil dels botons circulars petits (26-28px)
   fins als ~44px que recomana WCAG 2.5.5, sense canviar-ne la mida
   visual: un pseudo-element invisible més gran que el propi botó
   n'absorbeix els clics/tocs del voltant. */
.objectiu-tactil {
  position: relative;
}

.objectiu-tactil::after {
  content: '';
  position: absolute;
  inset: -9px;
}

.admin-login-card {
  max-width: 360px;
  width: 100%;
  background: var(--light);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 60px -20px rgba(34, 31, 30, 0.35);
  padding: 40px;
}

.admin-login-card h1 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 24px;
}

/* .admin-shell no és una targeta centrada com les pàgines públiques:
   és una pantalla completa que pot ser més curta que el viewport (per
   exemple en mòbil, on només es veu un panell alhora). El
   align-items:center del body compartit (variables.css) l'empenyeria
   cap avall deixant un buit enorme a sobre; l'ancorem a dalt aquí. */
body:has(> .admin-shell) {
  align-items: flex-start;
  padding: 0;
}

.admin-shell {
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 32px 24px;
}

.admin-shell h1 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
}

.admin-columns {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 24px;
}

.admin-col {
  flex: 1 1 0;
  min-width: 0;
}

.admin-col--calendari {
  flex: 0 0 400px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
}

.admin-col-title {
  font-family: var(--font-sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--admin-muted-text);
  text-align: center;
  margin: 0 0 12px;
}

.admin-col-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
}

.admin-col-title-row .admin-col-title {
  margin: 0;
}

.btn-crear-evento {
  width: 26px;
  height: 26px;
  /* Marge vertical negatiu: el botó (26px) és més alt que la línia del
     títol (~16.7px, com "CALENDARI"); sense això, la fila del títol
     "Esdeveniments" seria uns 9px més alta que la del calendari i la
     taula començaria més avall que el requadre del calendari. El marge
     negatiu compensa la diferència perquè la fila ocupi el mateix espai
     que un títol sol, sense canviar la mida visual del botó. */
  margin: -4.66px 0;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid rgba(34, 31, 30, 0.3);
  background: var(--white);
  color: var(--dark);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-crear-evento:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--light);
}

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(34, 31, 30, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.admin-modal-overlay.hidden {
  display: none;
}

.admin-modal {
  background: var(--light);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 60px -20px rgba(34, 31, 30, 0.35);
  padding: 28px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Amb els 3 idiomes en columnes (.camps-traduccio), 420px queda massa
   estret un cop es treu el padding: cada textarea es queda amb ~110px i
   el formulari sencer es veu apretat. A partir d'on hi ha marge de
   sobres a la pantalla, s'eixampla el modal perquè cada columna respiri. */
@media (min-width: 860px) {
  .admin-modal {
    max-width: 760px;
    padding: 44px;
  }
}

.btn-tancar-modal {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(34, 31, 30, 0.3);
  background: var(--white);
  color: var(--dark);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-mobile-tabs {
  display: none;
}

@media (max-width: 960px) {
  .admin-columns {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-col {
    width: 100%;
  }

  .admin-col--calendari {
    flex: 1 1 0;
    position: static;
  }

  .admin-mobile-tabs {
    display: flex;
    gap: 8px;
    margin-top: 24px;
  }

  .admin-columns {
    margin-top: 16px;
  }

  .admin-mobile-tab {
    flex: 1 1 0;
    background: var(--white);
    border: 1px solid rgba(34, 31, 30, 0.15);
    border-radius: var(--radius-pill);
    padding: 10px 8px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--admin-muted-text);
    cursor: pointer;
  }

  .admin-mobile-tab--actiu {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--light);
  }

  .admin-columns .admin-col {
    display: none;
  }

  .admin-columns .admin-col--panell-actiu {
    display: block;
  }

  .admin-shell h1 {
    font-size: 20px;
    word-break: break-word;
  }

  .camps-dates-parella {
    flex-direction: column;
  }
}

.admin-table-scroll {
  overflow-x: auto;
  border-radius: 16px;
  margin: 0 auto;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  /* Marge perquè la barra de desplaçament no quedi enganxada a l'última
     fila (evita clicar-la per error en intentar arrossegar la barra). */
  padding-bottom: 10px;
}

/* A partir del breakpoint on el calendari ja és sticky (vegeu
   .admin-col--calendari), la taula també hi cap sense necessitat de scroll
   horitzontal. Traiem l'overflow-x aquí perquè, si es mantingués, el
   navegador el converteix automàticament en overflow-y:auto, i això fa que
   la capçalera sticky de la taula quedi enganxada només dins d'aquest
   requadre (que mai fa scroll intern) en lloc de seguir la pàgina com el
   calendari. Per sota del breakpoint (mòbil) el calendari tampoc és
   sticky, així que no cal aquest comportament i es manté el scroll
   horitzontal habitual. */
@media (min-width: 961px) {
  .admin-table-scroll {
    overflow-x: visible;
  }
}


/* Agafador de la barra de desplaçament ben visible i gruixut (Chrome/Edge/
   Safari), perquè sempre es vegi clarament on i com arrossegar-la. */
.admin-table-scroll::-webkit-scrollbar {
  height: 12px;
}

.admin-table-scroll::-webkit-scrollbar-track {
  background: rgba(34, 31, 30, 0.08);
  border-radius: var(--radius-pill);
}

.admin-table-scroll::-webkit-scrollbar-thumb {
  background-color: var(--dark);
  border-radius: var(--radius-pill);
  border: 3px solid var(--light);
}

/* Botons de fletxa per desplaçar la taula: alternativa fiable a la barra
   nativa (que en alguns navegadors/SO no es veu ni s'agafa bé). Només es
   mostren quan la taula realment no hi cap sencera. */
.admin-table-scroll-embolcall {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* Amb align-items:flex-start, els botons queden alineats amb la
   capçalera de la taula (28px) en lloc de flotar centrats a mig aire
   d'una taula alta amb moltes files. */
.admin-table-scroll-embolcall .btn-scroll-taula {
  margin-top: 6px;
}

.admin-table-scroll-embolcall .admin-table-scroll {
  flex: 1 1 0;
  min-width: 0;
}

.btn-scroll-taula {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--white);
  border: 1px solid rgba(34, 31, 30, 0.2);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: var(--dark);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.admin-table-scroll-embolcall.amb-overflow .btn-scroll-taula {
  display: flex;
}

.btn-scroll-taula:hover:not(:disabled) {
  background: rgba(34, 31, 30, 0.06);
}

.btn-scroll-taula:disabled {
  opacity: 0.3;
  cursor: default;
}

.admin-table {
  width: 100%;
  min-width: 640px;
  /* "separate" (en lloc de "collapse") perquè la ratlla de sota de cada
     fila es dibuixa amb box-shadow (no amb border-bottom): amb
     border-collapse:collapse i una capçalera sticky, Chrome pot pintar
     les vores de les files que passen per sota per damunt de la
     capçalera fixa (es veuen "a través"). Amb border-spacing:0 el canvi
     no deixa cap escletxa visible entre files. */
  border-collapse: separate;
  border-spacing: 0;
  /* Gris del fons de la pàgina, no blanc: amb border-radius directament a
     cel·les concretes (i no al <table>, que no es pot arrodonir de manera
     fiable), a les cantonades arrodonides es pot arribar a veure aquest
     fons "de darrere" del propi element table. Si fos blanc, hi apareixia
     un rectangle blanc estrany als vorals; en gris, es camufla amb la
     pàgina. */
  background: var(--light);
  margin: 0;
  font-size: 13px;
  table-layout: fixed;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 14px;
  box-shadow: inset 0 -1px 0 0 rgba(34, 31, 30, 0.08);
  line-height: 1.4;
}

.admin-table th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--admin-muted-text);
}

.admin-table--eventos thead th {
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
  box-shadow: inset 0 -1px 0 0 rgba(34, 31, 30, 0.08);
}

/* Les cel·les de les cantonades de la capçalera són arrodonides, però com
   que la capçalera és sticky (flota per sobre de les files quan la pàgina
   fa scroll), l'engruna que talla l'arc deixava veure el color de la fila
   que passa per sota just en aquell punt. Solució: la cel·la en si queda
   sempre grisa (quadrada, com el fons de la pàgina, sense border-radius),
   i el blanc arrodonit és un pseudo-element per sobre seu que no arriba a
   les cantonades. Així la cantonada mai deixa veure res de sota, sigui
   quin sigui l'estat de scroll. */
.admin-table--eventos thead tr:first-child th:first-child,
.admin-table--eventos thead tr:first-child th:last-child {
  position: sticky;
  background: var(--light);
  border-radius: 0;
}

.admin-table--eventos thead tr:first-child th:first-child::before,
.admin-table--eventos thead tr:first-child th:last-child::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  z-index: -1;
}

.admin-table--eventos thead tr:first-child th:first-child::before {
  border-top-left-radius: 16px;
}

.admin-table--eventos thead tr:first-child th:last-child::before {
  border-top-right-radius: 16px;
}

/* Cantonades arrodonides com el calendari (taula de compres, que no és
   sticky i per tant no té el problema anterior). */
.admin-table--compras thead tr:first-child th:first-child {
  border-top-left-radius: 16px;
}

.admin-table--compras thead tr:first-child th:last-child {
  border-top-right-radius: 16px;
}

/* El color de fila (estat, ratlla clara/fosca) es defineix al <tr>, però
   el <td> és transparent i només el mostra "a través": el border-radius
   d'un td de cantonada no arrodoneix el fons real, que és el del tr (i
   overflow:hidden a nivell de <tr> no es pot fer servir de manera fiable,
   els navegadors no el respecten sempre en elements amb display:table-row
   �?" deixava una costura blanca als vorals). Solució: el <td> de l'última
   fila agafa directament el fons calculat del seu <tr> (herència forçada),
   així el seu propi border-radius sí que el retalla correctament.*/
.admin-table tbody tr:last-child td {
  background: inherit;
}

.admin-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}

.admin-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

.admin-table--eventos th:nth-child(1), .admin-table--eventos td:nth-child(1) { width: 26%; }
.admin-table--eventos th:nth-child(2), .admin-table--eventos td:nth-child(2) { width: 24%; }
.admin-table--eventos th:nth-child(3), .admin-table--eventos td:nth-child(3) { width: 17%; }
.admin-table--eventos th:nth-child(4), .admin-table--eventos td:nth-child(4) { width: 17%; }
.admin-table--eventos th:nth-child(5), .admin-table--eventos td:nth-child(5) { width: 16%; }

/* La taula de compres es dimensiona segons el contingut (no percentatges
   forçats): si no hi cap tot a l'amplada disponible, el requadre (mateixa
   amplada que el formulari de dalt) mostra scroll horitzontal en lloc de
   trencar o solapar columnes. */
.admin-table--compras {
  table-layout: auto;
  width: auto;
  min-width: 100%;
}

.admin-table--compras th,
.admin-table--compras td {
  white-space: nowrap;
}

/* Alçada màxima amb scroll vertical propi: si no fos així, amb moltes
   compres la barra de desplaçament horitzontal quedaria molt avall (calia
   baixar per tota la llista abans de poder-la fer servir). Capçalera fixa
   perquè segueixi visible en desplaçar-se verticalment. */
.admin-table-scroll--compras {
  max-height: 480px;
  overflow-y: auto;
}

.admin-table--compras thead th {
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 1;
}

.admin-table-row-link {
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.admin-table td:nth-child(1) span,
.admin-table td:nth-child(2) span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.admin-table td:nth-child(3) span,
.admin-table td:nth-child(4) span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* Files sense color d'estat propi (p. ex. la taula de compres): les
   parelles amb un gris molt suau i les senars explícitament blanques (ara
   que el <table> ja no és blanc per defecte, vegeu .admin-table). */
.admin-table tbody tr:nth-child(odd) {
  background: var(--white);
}

.admin-table tbody tr:nth-child(even) {
  background: var(--light);
}

.admin-table tbody tr.admin-table-row--verd,
.admin-table tbody tr.admin-table-row--vermell,
.admin-table tbody tr.admin-table-row--gris {
  background: var(--fila-color);
}

.admin-table tbody tr.admin-table-row--verd { --fila-color: #C7D9BE; }
.admin-table tbody tr.admin-table-row--vermell { --fila-color: #F0C9C4; }
.admin-table tbody tr.admin-table-row--gris { --fila-color: #DEDBD8; }

.admin-table tbody tr.admin-table-row--verd:hover,
.admin-table tbody tr.admin-table-row--vermell:hover,
.admin-table tbody tr.admin-table-row--gris:hover {
  filter: brightness(0.92) saturate(1.15);
}

.admin-table tbody tr.admin-table-row--vinculat {
  box-shadow: inset 0 0 0 1px rgba(34, 31, 30, 0.3);
}

.admin-form {
  background: var(--white);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-link-back {
  color: var(--dark);
  font-size: 13px;
  display: block;
  margin-top: 16px;
  text-align: center;
}

/* Dins d'un .admin-topbar amb un altre element al costat (p. ex. el
   botó "Tancar sessió"), el link ja queda alineat per justify-content:
   space-between + align-items:center del propi topbar, així que el
   margin-top i el text-align:center pensats per quan va sol
   desalinearien verticalment els dos elements. */
.admin-topbar .admin-link-back {
  margin-top: 0;
  text-align: left;
}

.entrades-restants {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entrades-restants-numero {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  min-width: 18px;
  text-align: right;
}

.entrades-restants-barra {
  flex: 1 1 auto;
  min-width: 40px;
  max-width: 70px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(34, 31, 30, 0.08);
  overflow: hidden;
}

.entrades-restants-barra-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
}

.entrades-restants--normal .entrades-restants-numero { color: var(--admin-muted-text); }
.entrades-restants--normal .entrades-restants-barra-fill { background: #8fae86; }

.entrades-restants--baixes .entrades-restants-numero { color: #6b5a1f; }
.entrades-restants--baixes .entrades-restants-barra-fill { background: #e0b23f; }

.entrades-restants--esgotades .entrades-restants-numero { color: var(--error); }
.entrades-restants--esgotades .entrades-restants-barra-fill { background: var(--error); }

.btn-secundari {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(34, 31, 30, 0.3);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-secundari:hover {
  background: rgba(34, 31, 30, 0.06);
}

/* "Tancar sessió" ha de destacar més que un botó secundari normal (és
   l'única acció de la barra superior), per això porta una vora més
   gruixuda i fosca, sense fons de color. */
#btn-logout {
  border-width: 1.5px;
  border-color: var(--dark);
}

#btn-logout:hover {
  background: rgba(34, 31, 30, 0.08);
}

.btn-perillos {
  display: inline-block;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(179, 38, 30, 0.4);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--error);
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-perillos:hover {
  background: rgba(179, 38, 30, 0.08);
}

.btn-cancelar-compra {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(179, 38, 30, 0.4);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--error);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.btn-cancelar-compra:hover {
  background: rgba(179, 38, 30, 0.08);
}

.btn-primary--perillos {
  margin-top: 12px;
  background: var(--white);
  color: var(--error);
  border-color: var(--error);
}

.btn-primary--perillos:hover {
  background: rgba(179, 38, 30, 0.08);
}

/* Calendari d'esdeveniments (columna al costat de la taula) */
.admin-calendari {
  background: var(--white);
  border-radius: 16px;
  padding: 20px;
}

.admin-calendari-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.admin-calendari-mes {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}

.btn-calendari-nav {
  background: transparent;
  border: 1px solid rgba(34, 31, 30, 0.2);
  border-radius: var(--radius-pill);
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 16px;
  color: var(--dark);
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-calendari-nav:hover {
  background: rgba(34, 31, 30, 0.06);
}

.btn-calendari-avui {
  display: block;
  margin: -8px auto 14px;
  background: transparent;
  border: 1.5px solid var(--dark);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--dark);
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-calendari-avui:hover {
  background: rgba(34, 31, 30, 0.08);
}

.admin-calendari-diesetmana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}

.admin-calendari-diesetmana span {
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--admin-muted-text);
}

.admin-calendari-graella {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(38px, auto);
  gap: 2px;
  touch-action: manipulation;
}

.calendari-dia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding-top: 4px;
  font-size: 12px;
  color: var(--dark);
  border-radius: 8px;
  touch-action: manipulation;
}

.calendari-dia--buit {
  visibility: hidden;
}

.calendari-dia-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
}

.calendari-dia--avui .calendari-dia-numero {
  font-weight: 600;
  border-radius: 50%;
}

.calendari-dia--avui .calendari-dia-numero:not(.calendari-event) {
  background: #C9DBEF;
}

.calendari-event--avui {
  box-shadow: 0 0 0 2px #C9DBEF;
}

.calendari-event-embolcall {
  position: relative;
}

.calendari-event-comptador {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--dark);
  color: var(--light);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.calendari-event {
  border-radius: 8px;
  cursor: pointer;
  border: none;
  padding: 0;
  color: var(--dark);
  font-weight: 600;
  text-decoration: none !important;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: box-shadow 0.15s ease;
}

.calendari-event--verd { background: #C7D9BE; }
.calendari-event--vermell { background: #F0C9C4; }
.calendari-event--gris { background: #DEDBD8; }

.calendari-event--vinculat {
  box-shadow: 0 0 0 1px rgba(34, 31, 30, 0.3);
}

.admin-calendari-llegenda {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--admin-muted-text);
}

.admin-calendari-llegenda span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.calendari-punt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.calendari-punt--verd { background: #C7D9BE; }
.calendari-punt--vermell { background: #F0C9C4; }
.calendari-punt--gris { background: #DEDBD8; }

/* Vinyeta (tooltip) en passar el cursor per sobre d'un event del calendari */
.calendari-tooltip {
  position: fixed;
  z-index: 20;
  background: var(--dark);
  color: var(--light);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 12px 24px -8px rgba(34, 31, 30, 0.45);
  max-width: min(240px, calc(100vw - 16px));
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.calendari-tooltip strong {
  font-weight: 600;
}

.calendari-tooltip-link {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 2px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  color: var(--light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  touch-action: manipulation;
}

/* Mini-calendari compartit pels camps "Data de l'esdeveniment" i "Data
   límit de compra" al formulari de creació: tots dos queden costat a
   costat i s'obre el mateix calendari per triar-los, un darrere l'altre
   (primer l'esdeveniment, després el termini). Un cop triat el dia de
   l'esdeveniment, el calendari marca aquell dia i pinta més clar els dies
   entre avui i aquell dia (el rang vàlid per triar el termini). */
.camp-amb-minicalendari {
  position: relative;
}

.camps-dates-parella {
  display: flex;
  gap: 16px;
}

.camps-dates-parella .camp-data {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.camps-dates-parella .camp-data input {
  cursor: pointer;
  background: var(--white);
}

/* Els 3 idiomes del Nom/Descripció en columnes, no un sota l'altre. Amb
   textarea (en lloc d'input) el text llarg salta de línia dins del propi
   camp en comptes de desbordar-lo horitzontalment. */
.camps-traduccio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 6px;
}

.camp-traduccio {
  position: relative;
  min-width: 0;
}

.camp-traduccio label {
  padding-right: 22px;
}

.camps-traduccio textarea {
  resize: vertical;
  min-height: 72px;
}

/* Cadenat de bloqueig de traducció, a l'extrem superior dret de cada
   camp (fora del flux, així no toca el selector d'asterisc obligatori
   "label:has(+ textarea[required])", que necessita label i textarea
   com a germans immediats). Estat per defecte discret; en bloquejar es
   fon amb el mateix to fosc que la resta de botons de l'admin. */
.btn-bloqueig-traduccio {
  position: absolute;
  top: -3px;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(34, 31, 30, 0.3);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-bloqueig-traduccio:hover {
  background: rgba(34, 31, 30, 0.08);
  color: var(--dark);
}

.btn-bloqueig-traduccio[aria-pressed="true"] {
  color: var(--light);
  background: var(--dark);
}

.btn-bloqueig-traduccio[aria-pressed="true"]:hover {
  background: #3a3532;
}

@media (max-width: 640px) {
  .camps-traduccio {
    grid-template-columns: 1fr;
  }
}

/* Mateix patró que .admin-col-title-row del modal principal: títol i
   creu centrats junts com una sola unitat (no el títol tot sol forçat
   dins d'una columna estreta), perquè el text tingui la seva amplada
   natural i mai quedi xafat contra la icona. */
.mini-calendari-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
}

.mini-calendari-titol {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--admin-muted-text);
  margin: 0;
  text-align: center;
}

.mini-calendari-header .btn-tancar-modal {
  flex-shrink: 0;
}

.mini-calendari-hora {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(34, 31, 30, 0.08);
}

.mini-calendari-hora label {
  margin: 0;
  font-size: 11px;
  color: var(--admin-muted-text);
}

.mini-calendari-hora input[type="time"] {
  width: auto;
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  border: 1px solid rgba(34, 31, 30, 0.2);
  border-radius: 8px;
}

.mini-calendari-seguent {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

/* Centrat al mig del modal (no just sota les dates): amb position:fixed
   respecte al viewport es manté al mig independentment de per on vagi el
   scroll intern del formulari, ja que el propi modal ja queda centrat en
   pantalla per .admin-modal-overlay. */
.mini-calendari {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  z-index: 15;
  background: var(--light);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 12px 24px -8px rgba(34, 31, 30, 0.35);
}

.mini-calendari .admin-calendari-mes {
  font-size: 13px;
}

.calendari-dia--fora-rang {
  color: rgba(34, 31, 30, 0.3);
}

.calendari-dia--interval .calendari-dia-numero {
  background: rgba(34, 31, 30, 0.1);
  border-radius: 8px;
}

.calendari-dia--marcat .calendari-dia-numero {
  background: var(--dark);
  color: var(--light);
  border-radius: 8px;
  font-weight: 600;
}

.calendari-dia--seleccionat .calendari-dia-numero {
  outline: 2px solid var(--dark);
  outline-offset: 1px;
}

.mini-calendari-llegenda {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  font-size: 10px;
  color: var(--admin-muted-text);
}

.mini-calendari-llegenda span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.calendari-punt--marcat { background: var(--dark); }
.calendari-punt--interval { background: rgba(34, 31, 30, 0.2); }