/* ==========================================================================
   CAMPI E <select> - lo standard della app, in un file suo.
   --------------------------------------------------------------------------
   Segnalazione del titolare (13/09/2026): "il carret di destra di select e
   appicicato e non ha padding - select dovrebbe essere standard ovunque".

   Perche' un file dedicato: lo standard del select serve a TUTTE le pagine, ma
   il foglio dell area gruppi (`groups-app.css`) continua a essere riportato
   indietro da qualcosa che lo tiene aperto altrove, e con lui spariva anche la
   correzione. Questo file e' piccolo, fa UNA cosa, e nessuno ne ha una copia
   vecchia da rimettere: si carica per ULTIMO, quindi vince.

   Cos'e' lo standard (identico a `.mood-select` in mood-ui.css, che l'app usa
   gia' da prima): il <select> nativo disegna la sua freccia contro il bordo
   destro e non c'e' modo di spostarla - serve `appearance: none` + un chevron
   SVG di sfondo a 12px dal bordo, con 34px riservati a destra. Con
   `appearance:none` il browser toglie ANCHE il padding: va ridichiarato.

   Lo scopo `.gr-app` lo tiene fuori dal nav e dal guscio: nessuna pagina
   estranea cambia aspetto.
   ========================================================================== */

/* I campi (testo, area, select): aspetto unico, coi colori del tema. */
.gr-app .gr-input,
.gr-app .gr-area,
.gr-app .mood-select {
    display: block; width: 100%; max-width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--gr-border, var(--mood-border, #2A2A4A));
    border-radius: 10px;
    background-color: var(--gr-card, var(--mood-bg-card, #15152A));
    color: var(--gr-text, var(--mood-text, #F0F0FF));
    font: inherit; font-size: .92rem; line-height: 1.35;
}
.gr-app .gr-area { min-height: 96px; resize: vertical; }
.gr-app .mood-select { cursor: pointer; }
.gr-app .gr-input:focus,
.gr-app .gr-area:focus,
.gr-app .mood-select:focus {
    outline: 2px solid var(--mood-primary, #6C5CE7);
    outline-offset: 1px;
    border-color: var(--mood-primary, #6C5CE7);
}

/* La freccia: chevron dell app (var --mood-select-arrow di mood-ui.css, con lo
   stesso disegno come riserva), 15x15, a 12px dal bordo, 34px riservati. */
.gr-app .mood-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--mood-select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d91' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px 15px;
    padding-right: 34px;
    cursor: pointer;
}
.gr-app .mood-select::-ms-expand { display: none; }   /* Edge legacy: doppia freccia */

/* Nella barra dei filtri i comandi sono compatti: freccia piu' vicina, come fa
   lo standard per le tabelle (right 9px / 27px). */
.gr-app .gr-barra .mood-select { background-position: right 9px center; padding-right: 27px; }

/* Le righe di stato VUOTE non occupano spazio. Sta qui e non in groups-social.css
   perche' questo foglio lo caricano TUTTE le pagine dell'area (percorso, setup,
   gruppo, elenco), mentre quello della pagina social no: mettendola li' la riga
   vuota restava visibile nel percorso (segnalazione del titolare 13/09: "???").
   Il `!important` e' voluto: nessun altro foglio 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,
/* E in generale: una NOTA vuota non si vede. Con lo sfondo a pillola (che il
   titolare ha dato a .gr-nota) una nota vuota sembra un errore senza messaggio:
   segnalato il 13/09/2026 su #grRegoleEsito. Vale per tutte, anche future. */
.gr-app .gr-nota:empty { display: none !important; }

/* ==========================================================================
   LE FACCE (avatar e miniature): LA MISURA LA DECIDE LA CLASSE, non il file.
   --------------------------------------------------------------------------
   Difetto vero visto in prova il 13/09: un avatar VIDEO usciva a 416px con
   `object-fit: contain`, perche' un <video> senza width/height in CSS prende la
   sua dimensione naturale (un <img> no: quello si adatta). Le regole delle facce
   devono quindi valere per ENTRAMBI i tipi, e dare sempre misura e ritaglio.
   E' il completamento di 4-bis / 4-bis-quater: se una faccia puo' essere un
   video, il CSS non puo' contare sulla misura del file. */
.gr-app .gr-avatar,
.gr-app .gr-faccia,
.gr-app .gr-membro-img,
.gr-app .gr-post__img {
    display: block; width: 40px; height: 40px;
    border-radius: 999px; object-fit: cover; flex: none;
    background: var(--gr-card-2, var(--mood-bg-hover, #1E1E3A));
    pointer-events: none;            /* una faccia decorativa non ruba il clic */
}
.gr-app .gr-avatar--p { width: 30px; height: 30px; }
.gr-app .gr-faccia { width: 34px; height: 34px; }
.gr-app .gr-membro-img { width: 24px; height: 24px; }
.gr-app .gr-post__img { width: 34px; height: 34px; }

/* ==========================================================================
   LA CONFERMA DELLE REGOLE (13/09/2026: "chi entra nel gruppo deve aderire alle
   regole"). La casella deve essere un bersaglio comodo, e il riquadro delle
   regole deve staccare dal resto: e' la cosa che si sta accettando. */
.gr-app .gr-conferma {
    display: flex; align-items: flex-start; gap: .55rem;
    margin: .9rem 0 .4rem; font-size: .92rem; font-weight: 700; cursor: pointer;
}
.gr-app .gr-conferma input {
    flex: none; width: 20px; height: 20px; margin-top: .1rem;
    accent-color: var(--mood-primary, #6C5CE7);
}
.gr-app .gr-regole-box { border-color: rgba(124, 92, 231, .45); }
.gr-app .gr-regole-box .gr-regole { max-height: 22rem; overflow: auto; padding-right: .3rem; }