/* ==========================================================================
   Retocs per a mòbil i per a l'app instal·lada
   ==========================================================================

   El panell es va fer per a pantalla gran i al mòbil se li notava: es podia
   fer zoom, hi havia scroll lateral, el text tocava les vores i el carnet
   sortia tallat. Això va a part de panel.css perquè es vegi d'un cop tot el
   que s'ha tocat per al mòbil, i es pugui desfer sense remenar la resta.

   Es carrega sempre, però gairebé tot va dins de media queries.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Comportament d'aplicació, no de pàgina web
   -------------------------------------------------------------------------- */

html {
    /* Que el rebot d'iOS no arrossegui la pàgina de sota */
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;   /* iOS engrandia el text en girar el mòbil */

    /*
      I que no es pugui arrossegar de costat. Amb el dit damunt del carnet del
      perfil es podia moure tota la pàgina cap als laterals i sortir-se de la
      pantalla: el body ja retallava, però el document seguia deixant-s'hi
      moure i quedava tot desquadrat.
    */
    overflow-x: clip;
    overscroll-behavior-x: none;
}

body {
    /*
      Xarxa de seguretat contra el scroll lateral. S'hi fa servir "clip" i no
      "hidden" expressament: hidden convertiria el body en un contenidor de
      scroll i trencaria els elements enganxats (position: sticky) que hi ha
      als formularis d'articles i de notificacions.
    */
    overflow-x: clip;
    overscroll-behavior-x: none;
}

/*
  El carnet no és res que s'hagi de moure de costat: amb el dit al damunt,
  només ha de deixar passar el desplaçament vertical de la pàgina. Sense això
  s'hi podia arrossegar en horitzontal i la pantalla quedava desplaçada.
*/
.carnet-soci,
#carnet-preview-container,
.carnet-modal-content {
    touch-action: pan-y;
}

/* El nom de la plataforma, al costat del títol de la pantalla */
.topbar-plataforma {
    font-weight: 400;
    color: #6c7a89;
}

/* El ressaltat blau en tocar un botó delata que allò és una web */
a, button, .nav-item, .tab, .btn, [onclick] {
    -webkit-tap-highlight-color: transparent;
}

/*
  touch-action: manipulation treu el zoom de doble toc i, de passada, el retard
  de 300 ms que alguns navegadors encara apliquen abans de reconèixer un clic.
*/
button, .btn, .nav-item, .tab, a[href], [onclick], label, input, select {
    touch-action: manipulation;
}

/* La interfície no s'ha de poder seleccionar com si fos text d'una pàgina.
   El contingut de debò sí: articles, missatges, taules... */
.sidebar, .topbar, .tabs, .btn, .nav-item, .plat-icon, .badge {
    -webkit-user-select: none;
    user-select: none;
}

/* --------------------------------------------------------------------------
   2. Res no ha de sortir per la vora
   -------------------------------------------------------------------------- */

/*
  LA causa del scroll lateral de tota l'aplicació.

  .app-layout és un flex i .main-content n'és un element. Els elements d'un
  flex tenen min-width: auto per defecte, que vol dir "no t'encongeixis per
  sota del que ocupa el teu contingut". Amb una taula ampla o una paraula
  llarga a dins, .main-content creixia fins als 556 px en una pantalla de 375
  i arrossegava tota la pàgina de costat.

  Amb min-width: 0 sí que s'encongeix, i el contingut ample es queda dins del
  seu propi quadre amb scroll (taules, codi) en comptes de moure la pàgina.
*/
.main-content {
    min-width: 0;
}

.app-layout {
    max-width: 100%;
}

/*
  Les files que fan de flex també s'han de poder encongir. Es fa sobre la fila
  sencera i no sobre cada fill: encongir els fills sense mesura és el que
  deixava el text en una columna d'una lletra.
*/
.quota-row, .usuari-item, .filters-bar, .card-header, .page-header {
    min-width: 0;
}

img, video, canvas, svg, iframe, table, pre {
    max-width: 100%;
}

img, video {
    height: auto;
}

/*
  Paraules llarguíssimes (adreces de correu, URLs, noms de fitxer) eixamplaven
  la pàgina i obligaven a moure-la de costat per llegir la resta.

  IMPORTANT: aquí hi va break-word i no anywhere. Semblen el mateix, però
  "anywhere" també compta a l'hora de calcular l'amplada mínima del contingut:
  amb un min-width: 0 al costat, el navegador entén que una caixa pot ser tan
  estreta com una lletra, i el text acabava en una columna d'un caràcter.
  "break-word" parteix la paraula si cal, però no encongeix la caixa.
*/
.page-content, .card, .modal, .table td, .table th,
.usuari-item, .form-help, .alert, .toast {
    overflow-wrap: break-word;
}

/* Les taules amples es mouen dins del seu quadre, no arrosseguen la pàgina */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

@media (max-width: 768px) {
    /*
      Files de taula més baixes.

      La taula ja es mou de costat dins del seu quadre, però les columnes
      s'estrenyien tant que a cada cel·la hi cabien dues o tres lletres i el
      text es partia en quatre o cinc línies: files de 105 px per ensenyar un
      nom i un correu.

      Deixant que el text no es parteixi, la fila baixa a 67 px i la taula
      passa de 847 a 1051 px d'ample. Com que de tota manera s'ha de moure de
      costat per veure-la sencera, val més que sigui una mica més ampla i molt
      més curta: es veuen el triple de files d'un cop d'ull.
    */
    .table td, .table th {
        white-space: nowrap;
        padding: 10px 12px;
    }

    /* Les cel·les amb diverses línies pròpies (nom a sobre, detall a sota)
       han de poder seguir partint-se */
    .table td div, .table td small, .table td .badge {
        white-space: normal;
    }

    /* Que es noti que es pot moure de costat */
    .table-wrapper {
        border-radius: var(--radius-sm);
        overscroll-behavior-x: contain;
    }
}

/* --------------------------------------------------------------------------
   3. Mòbil
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    /*
      iOS fa zoom sol en tocar un camp amb lletra de menys de 16 px, i després
      la pantalla es queda desquadrada. És el zoom que més molestava i no es
      pot treure amb el viewport: l'única manera és pujar la mida de lletra.
    */
    .form-control,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="date"], input[type="datetime-local"],
    input[type="time"], select, textarea {
        font-size: 16px;
    }

    /* Mateix motiu, a la pantalla d'inici de sessió (té el seu propi full) */
    .input-wrapper input,
    .login-form input,
    .btn-login {
        font-size: 16px;
    }

    /* La targeta del login, amb marge respecte de l'osca i la barra inferior */
    .login-right, .login-box, .login-container {
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    /* El cercador tenia una amplada fixa de 280 px i sortia de la pantalla */
    .search-box,
    .search-box input,
    .search-box input.form-control {
        width: 100%;
        min-width: 0;
    }

    .filters-bar {
        gap: 10px;
    }
    .filters-bar form {
        flex-direction: column;
        width: 100%;
    }
    .filters-bar select,
    .filters-bar input,
    .filters-bar .btn {
        width: 100%;
    }

    /*
      Marges. Es tenen en compte els laterals segurs del dispositiu: hi ha
      mòbils amb pantalla corbada o amb osca que retallen una mica per un
      costat, i llavors el text d'aquell costat queda més arrapat que el de
      l'altre.
    */
    .page-content {
        padding-top: 16px;
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .card {
        padding: 16px 14px;
    }

    /*
      Capçaleres de pàgina: el títol i el botó s'encavalcaven.

      El .page-header original és un flex amb flex-wrap: wrap. En passar-lo a
      columna, els fills es feien més amples que el contenidor (356 px dins de
      292) per com es reparteix l'espai de les línies. En comptes de dependre
      d'aquest càlcul, se'ls diu l'amplada i s'acaba la discussió.
    */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 12px;
    }
    .page-header > * {
        width: 100%;
        max-width: 100%;
        /* Perquè el bloc de botons pugui encongir-se: sense això sortia per la
           dreta a les pantalles estretes */
        min-width: 0;
    }
    /* Els blocs de botons de la capçalera, un sota l'altre si no hi caben */
    .page-header > div[style*="flex"] {
        flex-wrap: wrap;
    }
    .page-header .btn {
        width: 100%;
        justify-content: center;
    }

    /*
      Barres d'accions enganxades a baix (el formulari d'articles en té una).
      En una pantalla de 568 px ocupen massa i tapaven els camps del formulari:
      no es podia tocar el títol perquè al damunt hi havia un botó. A mòbil van
      al final del formulari, com un bloc més.
    */
    .page-content [style*="position:sticky"],
    .page-content [style*="position: sticky"] {
        position: static !important;
    }

    /* Els botons d'acció d'un card, un sota l'altre i ocupant l'ample */
    .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .card-header .btn {
        width: 100%;
        justify-content: center;
    }

    /* Prou gran per encertar-hi amb el dit */
    .btn, .nav-item, .tab {
        min-height: 44px;
    }
    /*
      A la capçalera, només el nom de la pantalla. El "- Plataforma del Club
      Tennis Reus Monterols" és evidència del Kit Digital i es manté a
      l'ordinador, però al mòbil ocupava més que el títol i el deixava sense
      lloc.
    */
    .topbar-plataforma {
        display: none;
    }

    /*
      Els camps de data no s'encongeixen sols: tenen una amplada mínima pròpia
      del navegador i al perfil la data de naixement sortia de la pantalla.
    */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* El botó del menú només feia 23 px d'ample */
    .topbar-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Xips i botonets de filtre: no cal que facin 44, però 30 és poc */
    .cat-tag-btn, .badge-btn, .chip, .plat-icon {
        min-height: 36px;
    }
    .cat-tag-btn {
        display: inline-flex;
        align-items: center;
        padding-left: 12px;
        padding-right: 12px;
    }
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm {
        min-height: 38px;
    }

    /*
      Pestanyes.

      Abans es movien de costat, i amb dues pestanyes que no hi cabien per poc
      la segona quedava tallada arran de la vora dreta: semblava que faltés el
      marge. Ara es reparteixen l'espai i, si no hi caben, passen a la línia de
      sota. Res tallat i res amagat.
    */
    .tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 6px;
    }
    .tabs .tab {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }

    /* Els quadres flotants han de cabre */
    .modal {
        max-width: 100%;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
    }
    /*
      Els quadres flotants, centrats.

      Hi va haver una versió amb align-items: flex-start perquè els llargs no
      es tallessin per baix. Va sortir malament: els curts (el detall d'un
      esdeveniment, per exemple) quedaven enganxats a dalt de tot i semblava un
      error. Ara van centrats i, com que el quadre té alçada màxima i es pot
      moure per dins, els llargs tampoc es tallen.
    */
    .modal-backdrop {
        padding: 16px;
        align-items: center;
        overflow-y: auto;
    }

    /*
      Els avisos, a baix i ocupant l'ample.

      Compte amb aquest quadre: a panel.css té top: 24px. En afegir-hi bottom
      sense treure el top, el contenidor passava a ocupar tota la pantalla
      d'alt a baix i, amb z-index 2000, es menjava tots els tocs encara que no
      hi hagués cap avís a dins. No s'obria el menú ni responien els botons.
      Per això cal el top: auto.
    */
    .toast-container {
        top: auto;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        max-width: none;
    }
    .toast { max-width: none; }
}

/*
  I la xarxa de seguretat, per a totes les mides: el contenidor d'avisos no ha
  de rebre mai cap toc, només els avisos que hi hagi a dins. Sense això,
  qualsevol canvi que li doni alçada torna a bloquejar la interfície.
*/
.toast-container {
    pointer-events: none;
}
.toast-container > * {
    pointer-events: auto;
}

@media (max-width: 768px) {

    /* Els grups de dos camps ja passen a un; els de tres, també */
    .form-grid-3, .stats-grid {
        grid-template-columns: 1fr;
    }

    /*
      Cada pantalla es va fer la seva graella amb l'atribut style
      (dashboard-cols, llistes d'esdeveniments, fitxes de soci...). A mòbil
      totes han de ser d'una columna, i cal !important perquè un estil escrit
      a l'element mana sobre qualsevol full.
    */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /*
      I el que de debò treia la pàgina de mare: els fills d'una graella tenen
      min-width: auto, o sigui "no m'encongeixo per sota del que ocupa el meu
      contingut". Un carril d'una columna acabava fent 528 px en una pantalla
      de 375.

      Va només sobre graelles, no sobre qualsevol flex: aplicar-ho a
      [style*="flex"] > * era massa ample i encongia caixes que no tocava.
    */
    .page-content [style*="grid"] > *,
    .dashboard-cols > *,
    .stats-grid > *, .form-grid-2 > *, .form-grid-3 > * {
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   4. Osca i barra inferior (iPhone i Android moderns)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* Cal viewport-fit=cover al <meta> perquè env() tingui valors */
    .topbar {
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
    }

    .sidebar {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar-user {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

/* --------------------------------------------------------------------------
   5. Només quan està instal·lada com a app
   -------------------------------------------------------------------------- */

@media (display-mode: standalone) {
    /*
      Amb "black-translucent" a iOS el contingut passa per sota del rellotge i
      la bateria. La barra superior s'abaixa perquè no quedi tapada.
    */
    .topbar {
        padding-top: env(safe-area-inset-top);
        height: auto;
        min-height: 64px;
    }

    /* Dins d'una app, arrossegar el text de la interfície no té sentit */
    body {
        -webkit-user-select: none;
        user-select: none;
    }
    /* ...però el contingut sí que s'ha de poder copiar */
    .page-content p, .page-content td, .ql-editor,
    .card, input, textarea, select {
        -webkit-user-select: text;
        user-select: text;
    }
}

/* --------------------------------------------------------------------------
   6. Perfil: una mica més d'aire als costats
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /*
      Al perfil gairebé tot són camps que ocupen tota l'amplada i quedaven
      enganxats a la vora. Aquí eixamplem el marge de tota la pàgina.
    */
    body[data-page="perfil"] .page-content {
        padding-left: 18px;
        padding-right: 22px;
    }

    /*
      El camp de data d'Android no encongeix el seu contingut intern (el
      "dd/mm/aaaa" i la icona del calendari viuen en un shadow DOM amb amplada
      pròpia), i amb la lletra a 16 px es desbordava cap a la dreta. Retallar-lo
      i treure-li el farciment intern el manté dins de la caixa.
    */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"] {
        overflow: hidden;
    }
    input[type="date"]::-webkit-datetime-edit,
    input[type="datetime-local"]::-webkit-datetime-edit,
    input[type="time"]::-webkit-datetime-edit,
    input[type="month"]::-webkit-datetime-edit {
        padding: 0;
        min-width: 0;
    }
    input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
        margin: 0;
    }
    input[type="date"]::-webkit-calendar-picker-indicator {
        margin-left: 0;
        padding: 0 0 0 4px;
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   7. Objectius de dit prou grans
   -------------------------------------------------------------------------- */

/* Per amplada no n'hi ha prou: un mobil en horitzontal fa 812 px i segueix
   sent un dit. "pointer: coarse" es justament aixo, que s'hi toca amb el dit. */
@media (max-width: 768px), (pointer: coarse) {
    /*
      Els dos botons del peu del menú (perfil i tancar sessió) feien 32 px, i
      el de tancar l'avís de prova de notificacions, 30. Amb el dit se'n falla
      la meitat de les vegades: la mida recomanada és 44.
    */
    .user-action-btn {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
    .prova-push-tancar {
        width: 44px;
        height: 44px;
        top: 4px;
        right: 4px;
    }
}

/* --------------------------------------------------------------------------
   8. Pantalla d'inici de sessió
   -------------------------------------------------------------------------- */

@media (max-width: 768px), (pointer: coarse) {
    /* L'ull per veure la contrasenya feia 32 px: massa poc per encertar-lo */
    .toggle-password {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*
      "Has oblidat la contrasenya?" només feia 17 px d'alt. Li donem alçada de
      dit amb farciment, sense moure'l de lloc a la vista.
    */
    .forgot-link {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 4px 0;
    }
}

/* --------------------------------------------------------------------------
   9. La barra superior, amb tres icones
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /*
      En afegir el globus, a 320 px el títol llarg ("Esdeveniments") empenyia
      la icona de perfil fora de la pantalla i quedava tallada. El títol és
      l'element que ha de cedir: sense min-width no s'encongeix mai, i sense
      flex-shrink les icones no tenen el lloc garantit.
    */
    .topbar-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar-actions {
        flex-shrink: 0;
    }
}

/* En pantalles molt estretes, retallar una mica els espais dona l'aire just */
@media (max-width: 360px) {
    .topbar-actions { gap: 8px; }
    .topbar-toggle { margin-right: 8px; }
}