/* =========================================================
   Reserves · vista mòbil (targetes)
   Fins a 860 px d'ample, la taula de 9 columnes es converteix en una
   pila de targetes pensades per al polze:
     - franja de color a l'esquerra = urgència (semàfor)
     - una sola línia llegible amb dates, nits, persones i règim
     - avís si l'entrada és a prop
     - contacte i accions com a botons grans a baix de tot
   A l'escriptori no canvia res. Les dades extra les afegeix
   reserves-mobil.js.
   ========================================================= */

/* Elements que només existeixen per al mòbil: amagats a l'escriptori */
.res-m-resum,
.res-m-ordre { display: none; }

@media (max-width: 860px) {
  /* ---------- Filtres: carrusel horitzontal, sense salts de línia ---------- */
  #reserves-filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -2px;
    padding: 2px 2px 4px;
  }
  #reserves-filtres::-webkit-scrollbar { display: none; }
  #reserves-filtres .reserves-lg { flex-shrink: 0; white-space: nowrap; padding: 8px 14px; font-size: 12px; }

  /* ---------- Ordenar (substitueix les capçaleres de la taula) ---------- */
  .res-m-ordre {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gris-clar);
    text-transform: uppercase;
    letter-spacing: .4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .res-m-ordre::-webkit-scrollbar { display: none; }
  .res-m-ordre button {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gris);
    background: transparent;
    border: 1px dashed var(--linia-forta);
    border-radius: 20px;
    padding: 6px 12px;
  }
  .res-m-ordre button.on { color: #7d2b7d; border: 1px solid #d9b8d9; background: #f9f0f9; }

  /* ---------- La taula deixa de ser taula ---------- */
  #seccio-reserves .reserves-taula-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  #seccio-reserves table.reserves-taula,
  #seccio-reserves table.reserves-taula tbody { display: block; width: 100%; min-width: 0; }
  #seccio-reserves table.reserves-taula thead { display: none; }
  #reserves-cos > tr { display: block; }
  #reserves-cos > tr > td { display: block; }
  #reserves-cos > tr:hover td { background: none; }

  /* ---------- Targeta ---------- */
  #reserves-cos > tr.res-m-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 10px;
    padding: 14px 14px 12px 18px;
    background: var(--card, #fff);
    border: 1px solid var(--linia);
    border-radius: 16px;
    box-shadow: var(--ombra);
    overflow: hidden;
  }
  #reserves-cos > tr.res-m-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--linia-forta);
  }
  #reserves-cos > tr.res-m-vermell::before { background: var(--vermell); }
  #reserves-cos > tr.res-m-groc::before { background: var(--taronja); }
  #reserves-cos > tr.res-m-verd::before { background: var(--verd-mig); }

  #reserves-cos > tr.res-m-card > td { padding: 0; border: 0; background: none; }

  /* Columnes que ja es resumeixen a la línia de dades */
  #reserves-cos > tr.res-m-card > td:nth-child(1),
  #reserves-cos > tr.res-m-card > td:nth-child(2),
  #reserves-cos > tr.res-m-card > td:nth-child(4),
  #reserves-cos > tr.res-m-card > td:nth-child(5),
  #reserves-cos > tr.res-m-card > td:nth-child(6),
  #reserves-cos > tr.res-m-card > td:nth-child(7) { display: none; }

  /* Nom i insígnies */
  #reserves-cos > tr.res-m-card > td:nth-child(3) { font-size: 13px; line-height: 1.5; }
  #reserves-cos > tr.res-m-card .reserves-nom-link { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
  #reserves-cos > tr.res-m-card .reserves-cat-pill { margin-right: 6px; }
  #reserves-cos > tr.res-m-card [class^="reserves-"][class$="-badge"] { margin: 4px 4px 0 0; }
  #reserves-cos > tr.res-m-card .reserves-cases { font-size: 12px; margin-top: 4px; }

  /* Línia de dades: dates · nits · persones · règim */
  .res-m-resum {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
  .res-m-xip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tinta);
    background: #f3f5f4;
    border-radius: 20px;
    padding: 4px 10px;
    line-height: 1.3;
  }
  .res-m-xip .icona-svg { color: var(--gris); }
  .res-m-xip.buit { color: var(--gris-clar); font-weight: 500; font-style: italic; }
  .res-m-xip.aprop { color: #8a3a00; background: #ffe8d6; }
  .res-m-alta { font-size: 11px; color: var(--gris-clar); margin-top: 6px; }

  /* Contacte: nom a dalt, telèfon / WhatsApp / correu com a botons */
  #reserves-cos > tr.res-m-card > td:nth-child(8) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--linia);
    font-size: 12.5px;
  }
  #reserves-cos > tr.res-m-card > td:nth-child(8) > div { flex-basis: 100%; font-weight: 700; }
  #reserves-cos > tr.res-m-card .reserves-contacte {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--blau-clar, #eef4fc);
    border-radius: 20px;
    padding: 0 12px;
  }
  #reserves-cos > tr.res-m-card .wa-bt { min-height: 34px; padding: 0 12px; font-size: 12px; margin: 0; }

  /* Accions: botons grans i fàcils de tocar */
  #reserves-cos > tr.res-m-card > td:nth-child(9) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  #reserves-cos > tr.res-m-card > td:nth-child(9) button {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 38px;
    margin: 0;
    font-size: 12px;
  }

  /* Disponibilitat desplegada: enganxada a sota de la seva targeta */
  #reserves-cos > tr.reserves-fila-ocupacio { margin: -14px 0 12px; }
  #reserves-cos > tr.reserves-fila-ocupacio > td {
    padding: 18px 14px 14px;
    border: 1px solid var(--linia);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    overflow-x: auto;
  }

  /* "Mostrar 10 més" i "Cap sol·licitud" */
  #reserves-cos > tr:not(.res-m-card):not(.reserves-fila-ocupacio) > td { border: 0; padding: 12px 0; text-align: center; }
  #reserves-cos .reserves-mes { width: 100%; padding: 12px 18px; }
}