/* ===============
   LA PAGINA DEL GRUPPO - come sono fatti i gruppi social.
   --------------------------------------------------------------------------
   Sfogo giusto del titolare (13/09/2026): "ma sai come sono fatti i gruppi
   social? .. e uno schifo .. ma sai come sono fatte le classi css". La pagina
   prima erano 25 elementi in fila: copertina, titolo, una riga di info, un
   tasto e basta. Un gruppo social ha:

     . una TESTATA con la copertina, il nome sopra, i numeri e i tasti
     . le SCHEDE (Bacheca, Informazioni, Persone, Regole) - si cambia senza
       ricaricare, e senza finestre
     . una COLONNA di fianco con l'identita del gruppo e le facce delle persone
     . i post con la faccia di chi scrive, il testo e i media

   File dedicato e caricato per ultimo, come forms-standard.css: cosi' non lo
   tocca chi riscrive groups-app.css, e le regole vincono.
   Tutto sotto .gr-app: nav e guscio restano fuori.
   =============== */

/* ------------------------------------------------------- la testata --- */
/* LA TESTATA NON TAGLIA PIÙ IL SUO CONTENUTO (28/09/2026). Prima il contenuto era `absolute` in fondo
   a una copertina di altezza FISSA (260/190/168/150): bastava un nome su due righe — o i caratteri
   grandi di sistema — e il pezzo in alto della testata (il tipo del gruppo) finiva tagliato via da
   `overflow: hidden`. L'ha trovato il controllo del menu dei tre puntini, misurando: sul telefono a
   390px il contenuto era alto 166px dentro una copertina da 150.
   Adesso la copertina è uno SFONDO (`absolute`, riempie la testata) e il contenuto sta in FLUSSO:
   l'altezza della testata è ALMENO quella di prima, ma cresce se il contenuto è più alto. Sul caso
   normale non cambia niente (260 esatti, e nessuno scatto: la foto resta ritagliata con `cover`). */
.gr-app .gr-hero {position: relative;display: grid;grid-template-rows: 1fr;align-items: end;min-height: 260px;border-radius: 18px;overflow: hidden;border: 1px solid var(--gr-border, var(--mood-border, #2A2A4A));margin-bottom: 3rem;}
.gr-app .gr-hero__cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, rgba(124,92,231,.35), var(--gr-card-2, #1E1E3A)); }
.gr-app .gr-hero__cover img, .gr-app .gr-hero__cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-app .gr-hero__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.78) 100%); }
.gr-app .gr-hero__dentro { position: relative; min-width: 0; padding: 1.2rem 1.2rem 1.1rem; color: #fff; }
.gr-app .gr-hero__dentro h1 { font-size: 1.7rem; font-weight: 800; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.gr-app .gr-hero__riga { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: .45rem 0 0; font-size: .86rem; opacity: .95; }
.gr-app .gr-hero__tasti { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.gr-app .gr-hero__tasti .gr-btn {box-shadow: 0 2px 10px rgba(0,0,0,.25);}

/* ------------------------------- UN TASTO, E I TRE PUNTINI (28/09/2026) ---
   Il titolare, con la pagina del suo gruppo aperta: «questo dei gruppi facciamolo diventare un
   dropmenu con i tre puntini così non invade le cover dei gruppi». Prima la testata era una fila di
   tasti (sul telefono una griglia a quattro colonne da 183px che scorreva di lato) e si mangiava la
   copertina — cioè la foto del gruppo. Adesso in chiaro resta il tasto che conta, e il resto sta
   dentro il menu. */
.gr-app .gr-hero__tasti {align-items: center;}
.gr-app .gr-hero__tasti .gr-btn {min-height: 44px;}     /* misura da dito (sul telefono era 35px) */
.gr-app .gr-hero__menu-tasto {width: 44px;min-height: 44px;padding: 0;flex: none;}
.gr-app .gr-hero__menu-tasto svg {width: 20px;height: 20px;}
.gr-app .gr-hero__menu-tasto.is-aperto {background: var(--gr-card-2);}

/* IL PANNELLO E' `fixed`, NON `absolute` (e non e' un vezzo): la testata ha `overflow: hidden` —
   serve a tagliare la copertina sugli angoli — e un pannello assoluto verrebbe TAGLIATO via. La
   posizione la calcola groups.js sotto il tasto, e non esce mai dallo schermo. */
.gr-app .gr-menu {
    position: fixed;left: 0;top: 0;right: auto;z-index: 1250;
    width: max-content;min-width: 236px;max-width: min(92vw, 320px);
    max-height: calc(100dvh - 96px);overflow-y: auto;overscroll-behavior: contain;
    padding: 6px;border: 1px solid var(--gr-border);border-radius: 14px;
    background: var(--gr-card);box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
}
.gr-app .gr-menu__voce {
    display: flex;align-items: center;gap: 10px;width: 100%;min-height: 44px;
    padding: 10px;border: 0;border-radius: 10px;background: none;
    color: var(--gr-text);font-family: inherit;font-size: .88rem;font-weight: 600;
    text-align: left;text-decoration: none;cursor: pointer;
}
.gr-app .gr-menu__voce:hover {background: var(--gr-card-2);}
.gr-app .gr-menu__voce svg {width: 18px;height: 18px;flex: none;color: var(--gr-muted);}
.gr-app .gr-menu__voce--pericolo,
.gr-app .gr-menu__voce--pericolo svg {color: var(--gr-danger);}
.gr-app .gr-menu__separatore {display: block;height: 1px;margin: 6px 4px;background: var(--gr-border);}

/* ------------------------------------------------- schede e pannelli --- */
.gr-app .gr-tabbar {display: flex;flex-wrap: wrap;gap: .25rem;border-bottom: 1px solid var(--gr-border, var(--mood-border, #2A2A4A));margin-bottom: .9rem;align-items: center;}
.gr-app .gr-tab {padding: .6rem .85rem;border: 0;background: none;color: var(--gr-muted, var(--mood-text-muted, #8888AA));font-size: .9rem;font-weight: 700;border-bottom: 2px solid transparent;cursor: pointer;display: flex;gap: 10px;align-items: center;}
.gr-app .gr-tab:hover { color: var(--gr-text, var(--mood-text, #F0F0FF)); }
.gr-app .gr-tab.is-on { color: var(--gr-primary, var(--mood-primary, #6C5CE7)); border-bottom-color: var(--gr-primary, var(--mood-primary, #6C5CE7)); }
.gr-app .gr-pannello { display: block; }

/* ------------------------------------------- la colonna di fianco --- */
.gr-app .gr-identita { display: grid; gap: .85rem; }
.gr-app .gr-dato {display: flex;gap: 10px;font-size: .85rem;align-items: center;}
.gr-app .gr-dato svg { width: 15px; height: 15px; color: var(--gr-muted, var(--mood-text-muted, #8888AA)); flex: none; }
.gr-app .gr-dato b { font-weight: 700; }
.gr-app .gr-facce { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.gr-app .gr-faccia { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; background: var(--gr-card-2, #1E1E3A); border: 2px solid var(--gr-card, var(--mood-bg-card, #15152A)); }
.gr-app .gr-persone { display: grid; gap: .5rem; }
.gr-app .gr-persona { display: flex; align-items: center; gap: .6rem; }
.gr-app .gr-persona__testo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.gr-app .gr-persona__nome { font-size: .9rem; font-weight: 700; }
.gr-app .gr-persona__sotto { font-size: .76rem; color: var(--gr-muted, var(--mood-text-muted, #8888AA)); }

/* ------------------------------------------------------------ i post --- */
.gr-app .gr-post { border: 1px solid var(--gr-border, var(--mood-border, #2A2A4A)); border-radius: 16px; background: var(--gr-card, var(--mood-bg-card, #15152A)); padding: .85rem .95rem; }
.gr-app .gr-post + .gr-post { margin-top: .85rem; }
.gr-app .gr-post__chi { display: flex; flex-direction: column; min-width: 0; }
.gr-app .gr-post__testo { margin-top: .55rem; font-size: .92rem; line-height: 1.55; }
.gr-app .gr-post__media img, .gr-app .gr-post__media video { border-radius: 12px; max-height: 420px; width: auto; }
.gr-app .gr-comporre { border: 1px solid var(--gr-border, var(--mood-border, #2A2A4A)); border-radius: 16px; background: var(--gr-card, var(--mood-bg-card, #15152A)); padding: .8rem; }
.gr-app .gr-regole { white-space: pre-wrap; font-size: .9rem; line-height: 1.6; }

@media (max-width: 960px) {
   .gr-app .gr-dato {
       display: flex;
       gap: 10px;
       font-size: .85rem;
       align-items: center;
       flex-wrap: wrap;
   }
    .gr-app .gr-hero { min-height: 190px; }
    .gr-app .gr-hero__dentro h1 { font-size: 1.35rem; }
}

/* ===============
   LE FACCE SONO MEDIA MISTI (immagine o video).
   --------------------------------------------------------------------------
   Segnalazione del titolare (13/09/2026): nel setup, la riga di una persona con
   l avatar VIDEO finiva dentro un <img> (un .mp4 in un <img> non si vede).
   Regola 4-bis: si passa da MoodMedia. Qui il CSS rende quelle classi valide per
   ENTRAMBI i tipi: le regole valgono per l elemento che porta la classe, quindi
   vanno bene anche su <video>; in piu' i media decorativi non devono rubare il
   clic al collegamento che li contiene. */
.gr-app .gr-avatar,
.gr-app .gr-faccia,
.gr-app .gr-membro-img,
.gr-app .gr-post__img {pointer-events: none;}
.gr-app video.gr-avatar,
.gr-app video.gr-faccia,
.gr-app video.gr-membro-img,
.gr-app video.gr-post__img { object-fit: cover; }

/* ===============
   I TESTI LUNGHI, E LE RIGHE VUOTE CHE NON DEVONO ESISTERE.
   --------------------------------------------------------------------------
   Segnalazione del titolare (13/09/2026): "poi non e' formattabile", mostrando il
   riepilogo dell ultimo passo: descrizione e regole (testi lunghi, con a capo)
   finivano in una riga sola, allineati a destra, con i ritorni a capo PERSI.
   E sotto il riepilogo restava una riga di stato vuota ("???").

   Un testo scritto da una persona si mostra come l ha scritto: `pre-line` tiene
   gli a capo, `pre-wrap` anche gli spazi. E quando un valore e' lungo non sta
   accanto all etichetta: va sotto, per conto suo. */
.gr-app .gr-riepilogo > div { flex-wrap: wrap; }
.gr-app .gr-riepilogo dd { white-space: pre-line; }
.gr-app .gr-riepilogo__lungo {
    display: block !important;
    border-bottom: 1px dashed var(--gr-border, var(--mood-border, #2A2A4A));
    padding-bottom: .5rem;
}
.gr-app .gr-riepilogo__lungo dt { margin-bottom: .15rem; }
.gr-app .gr-riepilogo__lungo dd {
    display: block; text-align: left; font-weight: 400;
    font-size: .88rem; line-height: 1.55; color: var(--gr-text, var(--mood-text, #F0F0FF));
}

/* I testi delle persone (descrizioni, regole): con gli a capo che hanno scritto. */
.gr-app .gr-testo { white-space: pre-line; }

/* Le righe di stato VUOTE non occupano spazio: erano righe fantasma nel markup
   (il "???" del titolare). Appena arrivano hanno contenuto, e si vedono. */
.gr-app .gr-esito:empty,
.gr-app .gr-nota[role="status"]:empty { display: none; }

/* ===============
   LE RIGHE DI STATO VUOTE: non devono occupare spazio (il "???" del titolare).
   --------------------------------------------------------------------------
   Il riquadro di stato esiste per i messaggi ("Fatto.", "Non riuscito.") e sta
   vuoto finche' non serve. Ma un elemento vuoto prende comunque il suo spazio:
   nel markup si vedeva una riga vuota inspiegabile.
   Qui si nasconde SOLO quando e' vuoto. Il `!important` e' voluto: qualsiasi
   foglio (anche uno modificato a mano) non deve poter rimettere in vista una
   riga vuota. Appena arriva il testo, torna visibile normalmente.
   =============== */
.gr-app .gr-esito:empty,
.gr-app .gr-nota[role="status"]:empty,
.gr-app [role="status"]:empty { display: none !important; }