/* Mood Admin Area - stili esterni (regola: niente CSS inline nelle viste) */
.admin-wrap {
    max-width: 1800px;
    margin: 0 auto;
    padding: 1.25rem 1rem 4rem;
    font-family: inherit;
    color: var(--mood-text, #e6e6ef);
}

.admin-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.admin-title h1 { margin: 0; font-size: 1.5rem; line-height: 1.1; }
.admin-sub {color: var(--mood-text-muted, #8b8b9e);font-size: 0.85rem;text-wrap: auto;}

.admin-identity {
    font-size: 0.8rem;
    color: var(--mood-text-muted, #8b8b9e);
    background: var(--mood-bg-card, #181825);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.45rem 0.9rem;
}
.admin-identity b { color: var(--mood-primary, #6c5ce7); }

.admin-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--mood-border, #2b2b3d);
    margin-bottom: 1.25rem;
    padding-bottom: 0.55rem;
}

/* Le 17 aree raggruppate per famiglia (Quadro / Contenuti / Persone / Denaro /
   Sistema): prima erano 17 pulsanti identici in fila e non si capiva l'ordine. */
.admin-tabs-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.admin-tabs-group + .admin-tabs-group {
    padding-left: 0.85rem;
    border-left: 1px dashed var(--mood-border, #2b2b3d);
}
.admin-tabs-group__label {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--mood-text-muted, #8b8b9e);
    margin-right: 0.15rem;
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text-muted, #8b8b9e);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.45rem 0.8rem;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-tab:hover { color: var(--mood-text, #e6e6ef); border-color: var(--mood-primary, #6c5ce7); }
.admin-tab.active {
    background: var(--mood-primary, #6c5ce7);
    border-color: var(--mood-primary, #6c5ce7);
    color: #fff;
}
/* Il ring di focus serve alla tastiera, ma non deve restare acceso dopo un click */
.admin-tab:focus { outline: none; }
.admin-tab:focus-visible { outline: 2px solid var(--mood-primary, #6c5ce7); outline-offset: 2px; }

/* Ogni area e' una COLONNA di blocchi impilati: prima era `display: flex` con
   `justify-content: space-around`, quindi card, tabelle e barre si affiancavano
   e finivano "appiccicate" (e tutte le aree sembravano la stessa cosa). */
.admin-view { display: none; }
.admin-view.active { display: block; animation: moodFadeIn 0.2s ease; }
@keyframes moodFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* Un solo ritmo verticale fra i blocchi dell'area (card, tabelle, note, barre). */
.admin-view.active > * + * {margin-top: 1.15rem;/* display: inline-grid; *//* gap: 1rem; */}
.admin-view.active > .admin-toolbar { margin-bottom: 0; }

/* Intestazione dell'area: icona + titolo + descrizione + colore dell'area.
   Serve a capire a colpo d'occhio DOVE si e': prima ogni area cominciava
   direttamente con una card e l'una valeva l'altra. */
.admin-area-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--mood-border, #2b2b3d);
    border-left: 4px solid var(--area-accent, var(--mood-primary, #6c5ce7));
    border-radius: var(--mood-radius, 16px);
    background: var(--mood-bg-card, #181825);
    background-image: linear-gradient(90deg, var(--area-tint, rgba(108, 92, 231, 0.10)), transparent 62%);
}
.admin-area-head__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--area-accent, var(--mood-primary, #6c5ce7));
    background: var(--area-tint, rgba(108, 92, 231, 0.10));
    border: 1px solid var(--mood-border, #2b2b3d);
}
.admin-area-head__icon svg { width: 20px; height: 20px; }
.admin-area-head__title { margin: 0; font-size: 1.12rem; line-height: 1.2; }
.admin-area-head__desc {
    margin: 0.22rem 0 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--mood-text-muted, #8b8b9e);
    max-width: 80ch;
}
/* Contenitore di titolo + descrizione: `min-width: 0` serve perche' un testo
   lungo non allarghi la testata oltre lo schermo (difetto tipico del flex). */
.admin-area-head__text { flex: 1 1 auto; min-width: 0; }

/* Colore proprio di ogni area: lo usano l'intestazione e i titoli delle card,
   cosi' si riconosce subito a quale area appartiene un blocco. */
#admin-pane-overview      { --area-accent: #6c5ce7; --area-tint: rgba(108, 92, 231, 0.12); }
#admin-pane-access        { --area-accent: #0984e3; --area-tint: rgba(9, 132, 227, 0.12); }
#admin-pane-brand         { --area-accent: #e17055; --area-tint: rgba(225, 112, 85, 0.12); }
#admin-pane-algorithm     { --area-accent: #00b894; --area-tint: rgba(0, 184, 148, 0.12); }
#admin-pane-users         { --area-accent: #00cec9; --area-tint: rgba(0, 206, 201, 0.12); }
#admin-pane-posts         { --area-accent: #6c5ce7; --area-tint: rgba(108, 92, 231, 0.12); }
#admin-pane-reports       { --area-accent: #d63031; --area-tint: rgba(214, 48, 49, 0.12); }
#admin-pane-media         { --area-accent: #0984e3; --area-tint: rgba(9, 132, 227, 0.12); }
#admin-pane-rights        { --area-accent: #fdcb6e; --area-tint: rgba(253, 203, 110, 0.14); }
#admin-pane-creative      { --area-accent: #a29bfe; --area-tint: rgba(162, 155, 254, 0.14); }
#admin-pane-moderation    { --area-accent: #e84393; --area-tint: rgba(232, 67, 147, 0.12); }
#admin-pane-marketplace   { --area-accent: #f39c12; --area-tint: rgba(243, 156, 18, 0.14); }
#admin-pane-piani         { --area-accent: #2ecc71; --area-tint: rgba(46, 204, 113, 0.14); }
#admin-pane-influencer    { --area-accent: #9b59b6; --area-tint: rgba(155, 89, 182, 0.14); }
#admin-pane-providers     { --area-accent: #00b894; --area-tint: rgba(0, 184, 148, 0.12); }
#admin-pane-minors        { --area-accent: #16a085; --area-tint: rgba(22, 160, 133, 0.12); }
#admin-pane-announcements { --area-accent: #e67e22; --area-tint: rgba(230, 126, 34, 0.12); }
#admin-pane-groups        { --area-accent: #3498db; --area-tint: rgba(52, 152, 219, 0.12); }
/* L'editoriale (03/10/2026): e' il colore del servizio — quello della sua pagina,
   `/landing/editorial/` — cosi' l'area e la landing si riconoscono per la stessa tinta. */
#admin-pane-editoriale    { --area-accent: #3f6df0; --area-tint: rgba(63, 109, 240, 0.12); }

/* Statistiche: numero di colonne FISSO, cosi' le righe restano sempre piene.
   Con auto-fit le 12 card si distribuivano 7 + 3, con la seconda riga monca. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 1200px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Variante a 4 colonne (gli 8 numeri del Programma influencer): restano 4+4. */
.stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .stat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat-card {
    background: var(--mood-bg-card, #181825);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius, 16px);
    padding: 0.9rem 1rem;
}
.stat-card .stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mood-text-muted, #8b8b9e);
}
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; margin-top: 0.15rem; }
.stat-card .stat-hint { margin-top: 0.2rem; font-size: 0.68rem; line-height: 1.3; color: var(--mood-text-muted, #8b8b9e); }
.stat-card.danger .stat-value { color: var(--mood-danger, #e74c3c); }
.stat-card.warn .stat-value { color: #f1c40f; }
.stat-card.ok .stat-value { color: #2ecc71; }

.admin-two-col {
    display: inline-flex;
    gap: 1rem;
    /* Ogni card resta alta quanto il suo contenuto: prima la card "Annunci"
       veniva stirata a vuoto per pareggiare l'altezza della colonna vicina. */
    flex-direction: column;
    width: -webkit-fill-available;
    margin-top: 1rem;
}
@media (max-width: 860px) {
    .admin-two-col { grid-template-columns: 1fr; }
    .admin-wrap { padding-top: 0.75rem; }
}

.admin-card {
    background: var(--mood-bg-card, #181825);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius, 16px);
    padding: 1.05rem 1.15rem;
    margin-bottom: 2rem;
}
/* Titolo di sezione con la marca di colore dell'area: si riconosce a quale
   area appartiene il blocco anche solo scorrendo la pagina. */
.admin-card > h3 {
    margin: 0 0 0.8rem;
    padding-left: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 1rem;
    display: flex;
    gap: 5px;
    border-bottom: 1px solid var(--area-accent, var(--mood-primary, #6c5ce7));
}

.admin-toolbar {
    display: flex;
    gap: 0.6rem 0.7rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.9rem;
}
.admin-toolbar input[type="search"],
.admin-toolbar select {
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    min-width: 160px;
}
.admin-toolbar input[type="search"] { flex: 1 1 220px; }

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius, 16px);
    background: var(--mood-bg-card, #181825);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 720px;
}

.admin-table b{
    display: block;
    font-weight: 500;
    position: relative;
    height: 35px;
    overflow: hidden;
    text-wrap: auto;
    line-height: normal;
}
.admin-table b::after{
    content: "...";
    position: absolute;
    bottom: 2px;
    right: 0;
    padding-left: 4px;
}
.admin-table .admin-sub b{
    display: block;
    font-weight: 200;
    position: relative;
    height: 35px;
    overflow: hidden;
    text-wrap: auto;
    line-height: normal;
}
.admin-table th,
.admin-table td {
    text-align: left;
    padding: 9px 10px;
    vertical-align: middle;
}
.admin-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mood-text-muted, #8b8b9e);
    white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: var(--mood-bg-hover, #1f1f30); }
.admin-table select {
    background: transparent;
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 8px;
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
    max-width: 140px;
}
/* Righe alternate per leggibilita' */
.admin-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

/* Anteprima thumbnail nella tabella post */
.admin-thumb {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: var(--mood-bg, #181825);
    border: 1px solid var(--mood-border, #2b2b3d);
}
.admin-thumb--empty { opacity: 1; border-style: dashed; position: relative; }
/* LA MINIATURA CHE NON C'E' (24/09/2026). Prima il ripiego era scritto DENTRO l'HTML
   (`onerror="this.className='admin-thumb admin-thumb--empty'"`), in tre punti diversi: Javascript nel
   markup, e la casella restava con l'icona di immagine rotta del browser. Adesso la classe la mette un
   ascoltatore solo (vedi `admin-core.js`) e qui la casella diventa un vero segnaposto: nessuna icona
   rotta, bordo tratteggiato, e un trattino in mezzo che dice «non c'e'». */
.admin-thumb--empty::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1px;
    margin: -0.5px 0 0 -6px;
    background: var(--mood-text-muted, #8b8b9e);
}
.admin-thumb--txt,
.admin-thumb--img,
.admin-thumb--vid,
.admin-thumb--lnk,
.admin-thumb--audio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--mood-text-muted, #8b8b9e);
    background: var(--mood-bg, #181825);
    border: 1px dashed var(--mood-border, #2b2b3d);
}
/* Miniatura di un brano senza copertina: l'icona della nota (la stessa che usa
   l'app nella scheda del brano), non una casella vuota ne' una parola. */
.admin-thumb--audio { color: var(--mood-text-muted, #8b8b9e); }
.admin-thumb--audio svg { width: 20px; height: 20px; }
/* Contenuto troncato con ellissi */
td.admin-cell-content{
    overflow: initial;
    text-overflow: initial;
    max-width: initial !important;
}
.admin-cell-content {
    display: flex;
    gap: 10px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mood-text, #e6e6ef);
}
.admin-cell-content b{
    display: block;
    font-weight: 200;
    position: relative;
    height: 35px;
    overflow: hidden;
    text-wrap: auto;
    line-height: normal;
}
.admin-cell-content b::after{
    content: "...";
    position: absolute;
    bottom: 2px;
    right: 0;
    padding-left: 4px;
}
/* Niente wrap "brutale": le celle restano su una riga, il contenuto si tronca */
.admin-table td {white-space: nowrap;}
.admin-table td.admin-cell-content {max-width: max-content;white-space: normal;}
.admin-table td .badge {margin-right: 8px;background: var(--bg-color);}
.admin-table td .admin-link-btn {/* margin-left: 6px; */}
.admin-table td select { min-width: 112px; }


/* Attivita' recente (Panoramica): una riga = thumb + autore + testo + data.
   Griglia e non flex: la thumbnail resta centrata sulla riga (prima stava
   sulla linea di base del testo, quindi "sfalsata") e il testo si accorcia
   con i puntini invece di andare a capo su piu' righe. */
.admin-activity-item {
    display: grid;
    grid-template-columns: 44px minmax(0, max-content) minmax(0, 1fr) auto;
    grid-template-areas: "thumb who what when";
    align-items: center;
    column-gap: 10px;
}
.admin-activity-item .act-thumb { grid-area: thumb; display: inline-flex; }
.admin-activity-item .act-thumb .admin-thumb { width: 44px; height: 34px; border-radius: 8px; }
.admin-activity-item .who {
    grid-area: who;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
}
.admin-activity-item .what {
    grid-area: what;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mood-text, #e6e6ef);
    text-decoration: none;
}
.admin-activity-item .what:hover { text-decoration: underline; }
.admin-activity-item .what.is-empty { color: var(--mood-text-muted, #8b8b9e); font-style: italic; }
.admin-activity-item .when {
    grid-area: when;
    font-size: 0.72rem;
    color: var(--mood-text-muted, #8b8b9e);
    white-space: nowrap;
}
/* Tipo di contenuto in parole (Foto / Video / Storia...), non lo slug del DB */
.act-kind {
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 6px;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--mood-text-muted, #8b8b9e);
}

/* Area Admin - Brand & UI */
.brand-meta { font-size: 0.85rem; color: var(--mood-text-muted); }
.brand-meta p { margin: 4px 0; }
.brand-meta .brand-note { margin-top: 8px; padding: 8px 10px; background: var(--mood-bg-hover); border-radius: 8px; }

.brand-group { margin-top: 1rem; }
.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}

.brand-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mood-bg);
    color: var(--mood-text);
    border: 1px solid var(--mood-border);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
    font-size: 0.85rem;
    transition: border-color 0.2s;
}
.brand-chip:hover { border-color: var(--mood-primary); }

.brand-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--chip-color, transparent);
    border: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
}
.brand-chip-name { flex: 1; min-width: 0; }
.brand-chip-hex {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--mood-text-muted);
    text-transform: uppercase;
}

/* Area Admin - Feed AI (configurazione algoritmo) */
.algo-group { margin-top: 1rem; }
.algo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.algo-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--mood-text-muted);
}
.algo-field input,
.algo-field select {
    background: var(--mood-bg);
    color: var(--mood-text);
    border: 1px solid var(--mood-border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.88rem;
}
.algo-field input:focus,
.algo-field select:focus { outline: none; border-color: var(--mood-primary); }
.algo-hint { align-self: center; font-size: 0.8rem; color: var(--mood-text-muted); }
#algoSave:disabled, #algoReset:disabled { opacity: 0.5; cursor: not-allowed; }


.admin-toggle-verified,
.admin-toggle-private,
.admin-link-btn {
    background: var(--mood-bg, transparent);
    color: var(--mood-primary, #6c5ce7);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 8px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.admin-toggle-verified:hover,
.admin-toggle-private:hover,
.admin-link-btn:hover { border-color: var(--mood-primary, #6c5ce7); }
/* "Privato" si vede subito: chi e' privato non compare nelle ricerche ne' agli altri utenti. */
.admin-toggle-private { font-weight: 600; }
.admin-toggle-private[data-v="0"] { color: var(--mood-text-muted, #7c7c92); }
.admin-table a { color: var(--mood-primary, #6c5ce7); text-decoration: none; }
.admin-table a:hover { text-decoration: underline; }


.admin-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.admin-avatar {
    border: 1px solid var(--area-accent);
}
.admin-cell-user { display: flex; align-items: center; gap: 0.6rem; }
.admin-cell-user .uname { font-weight: 600; }
.admin-cell-user .uname .uname-at { opacity: 0.7; font-weight: 400; }
.admin-cell-user .uemail { font-size: 0.75rem; color: var(--mood-text-muted, #8b8b9e); }

.badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    border: 1px solid transparent;
    text-transform: capitalize;
    margin: auto;
}
/* I BADGE DEI RUOLI NON HANNO PIU' BISOGNO DI `!important` (24/09/2026).
   Servivano perche' `mood-ui.css` (foglio globale) arrivava DOPO questo file e vinceva lui.
   Adesso l'ordine e' quello giusto (globale prima, admin dopo) e l'area admin non prende piu'
   regole di select dal foglio globale: senza `!important` la regola vince per ordine, come deve. */
.badge.role-founder {color: #fff;background: var(--mood-primary, #6c5ce7) !important;border-color: var(--mood-primary, #6c5ce7) !important;}
.badge.role-global_admin { color: #fff; background: var(--mood-primary, #6c5ce7); border-color: var(--mood-primary, #6c5ce7); }
.badge.role-super_admin { color: #fff; background: #8e44ad; border-color: #8e44ad; }
.badge.role-admin {
    color: #fff;background: #c0392b !important;border-color: #c0392b !important;margin-right: 0px !important;
}
.badge.role-staff {
    color: #14202a; background: #1abc9c !important; border-color: #1abc9c; 
}
.badge.role-consulente {
    color: #fff; 
    background: #2980b9 !important; 
    border-color: #2980b9 !important;
}
.badge.role-moderator {
    color: #ffffff;
    background: #f1c40f !important;
    border-color: #f1c40f !important;
}
.badge.role-user {
    color: var(--mood-text-muted, #8b8b9e); 
    border-color: var(--mood-border, #2b2b3d);
}

.badge.st-active { color: #2ecc71; border-color: #2ecc71; }
.badge.st-limited { color: #f1c40f; border-color: #f1c40f; }
.badge.st-blocked, .badge.st-deleted { color: #e74c3c; border-color: #e74c3c; }
.badge.cat-ultime_novita { color: #fff; background: #8e44ad; border-color: #8e44ad; }
.badge.cat-comunicazioni { color: #fff; background: #2980b9; border-color: #2980b9; }

/* Categorie di moderazione: stesso codice colore delle pill di severita',
   cosi' un "violence" rosso si legge a colpo d'occhio come severita' alta. */
.badge.cat-violence, .badge.cat-hate, .badge.cat-gore, .badge.cat-harassment,
.badge.cat-bullying, .badge.cat-self_harm, .badge.cat-csam, .badge.cat-terrorism {
    color: #e74c3c; border-color: rgba(231, 76, 60, 0.5); background: rgba(231, 76, 60, 0.1);
}
.badge.cat-adult, .badge.cat-nudity, .badge.cat-sexual, .badge.cat-spam,
.badge.cat-gambling, .badge.cat-drugs, .badge.cat-alcohol, .badge.cat-weapons,
.badge.cat-copyright, .badge.cat-misinformation {
    color: #d9a018; border-color: rgba(217, 160, 24, 0.5); background: rgba(217, 160, 24, 0.1);
}

.admin-pagination {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.9rem;
}
.admin-pagination button {
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}
.admin-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-pagination span { font-size: 0.8rem; color: var(--mood-text-muted, #8b8b9e); }

/* Barra filtri + ricerca per la lista accessi */
.admin-access-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.admin-access-bar input[type="search"] {
    flex: 1 1 200px;
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
}
.admin-access-bar select {
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    min-width: 150px;
}

/* Ricerca e paginazione della lista accessi. Queste classi sono usate dal modulo
   (admin-access.js) e prima non avevano una regola propria: erano vestite solo
   dal contenitore, quindi bastava spostare un elemento per perderne lo stile. */
.admin-search {
    flex: 1 1 200px;
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
}
.admin-page-prev,
.admin-page-next {
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}
.admin-page-prev:disabled,
.admin-page-next:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-page-prev:hover:not(:disabled),
.admin-page-next:hover:not(:disabled) { border-color: var(--mood-primary, #6c5ce7); }
.admin-page-info { font-size: 0.8rem; color: var(--mood-text-muted, #8b8b9e); }

/* Elenco attivita': solo il contenitore. Le regole di riga stanno in
   .admin-activity-item (una sola definizione: prima ce n'erano due in
   conflitto e quella vecchia annullava troncamento e allineamento). */
.admin-activity {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* UNA RIGA = UN FATTO, TUTTO ATTACCATO A SINISTRA (04/10/2026). Con `space-between` l'ora
   scappava a filo destro e restava a 576px dal fatto che racconta: la riga si leggeva in due
   pezzi, uno a sinistra e uno a destra — «deve essere così», col testo e l'ora vicini, e la
   distanza la fa solo il `gap`. Fuori di qui: `margi;` (una riga senza i due punti) e un
   secondo `padding` che rifaceva il primo: il browser li buttava via senza dirlo. */
.admin-activity li {
    font-size: 0.86rem;
    line-height: 1.35;
    display: inline-flex;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 13px;
    border-bottom: 1px solid var(--border-color);
}
.admin-activity li .when{
    font-size: 0.7rem;
    color: var(--mood-text-muted);
}
.announcement-summary {display: flex;flex-direction: column;gap: 0.6rem;margin-top: 1rem;}
.announcement-summary .ann-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 10px;
    font-size: 0.88rem;
    align-items: flex-start;
}
.announcement-summary .ann-head {display: flex;gap: 0.5rem;align-items: center;}
.announcement-summary .ann-head strong {
    font-size: 11px;
}
.announcement-summary .ann-count {font-size: 11px;}
.announcement-summary .ann-last {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--mood-text-muted, #8b8b9e);
    overflow-wrap: anywhere;
}
.announcement-summary + .admin-link-btn { margin-top: 0.7rem; }

/* LA NOTA DEL FILMATO VECCHIO (11/10/2026). Le risposte della guida restano quando il video
   cambia: dentro una riga, questa nota dice che quel giudizio non è su questo video. Piccola e
   diversa dal testo scritto dalla persona, perché è una nota NOSTRA — e chi legge deve poter
   dire in un istante quale delle due cose sta leggendo. */
.guida-vecchio { font-style: italic; opacity: 0.7; }

.announce-hint {
    background: var(--mood-bg-card, #181825);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-left: 3px solid var(--mood-primary, #6c5ce7);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--mood-text-muted, #8b8b9e);
    margin-bottom: 0.9rem;
}

/* Sottotitolo esplicativo sotto il titolo di una card */
.admin-caption {
    margin: 0 0 0.7rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--mood-text-muted, #8b8b9e);
}

.admin-empty {
    text-align: center;
    color: var(--mood-text-muted, #8b8b9e);
    padding: 2.2rem 1rem;
    font-size: 0.9rem;
}

.admin-msg {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-primary, #6c5ce7);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    z-index: 9999;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
.admin-msg.show { display: block; }

/* ===============
   AREA ADMIN - ACCESSI (chi entra in quale area)
   --------------------------------------------------------------------------
   PERCHE' COSI': prima ogni utente era un mosaico di cartellini larghi 240px con
   DUE interruttori identici e senza etichetta (lettura/scrittura): non si
   capiva quale fosse quale, le due colonne non si allineavano e le aree non
   erano raggruppate. Ora ogni area e' UNA riga "nome -> menu", dentro una lista
   sola, divisa nelle stesse famiglie dei tab in alto (QUADRO, CONTENUTI...).
   =============== */
#accessUsers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 80%), 1fr));
    gap: 14px;
    align-items: start;
}
.perm-user { margin-top: 0; max-width: none; }
.perm-user-head {
    display: grid;
    gap: 10px;
    margin-bottom: 8px;
    width: -webkit-fill-available;
    align-content: space-between;
    grid-auto-flow: column;
}
.perm-user-head .uemail { font-size: 0.8rem; color: var(--mood-text-muted); margin-left: 6px; }
/* Riepilogo: dice in due parole cosa puo' fare davvero questa persona */
.perm-sum {
    font-size: 0.78rem;
    color: var(--mood-text-muted);
    border-left: 2px solid var(--mood-border);
    padding: 1px 0 1px 8px;
    margin-bottom: 10px;
}
/* La riga del RUOLO: dice quante aree vedrebbe questo ruolo senza permessi scritti, e offre di
   scriverle. Sta sotto il riepilogo e sopra "Accesso completo", perche' e' la stessa domanda:
   "cosa vede davvero questa persona?". */
.perm-ruolo {
    font-size: 0.78rem;
    color: var(--mood-text-muted);
    margin: -4px 0 10px;
    padding: 1px 0 1px 8px;
    border-left: 2px solid var(--mood-primary);
}
.perm-ruolo b { color: var(--mood-text); }
.perm-ruolo .admin-link-btn { font-size: 0.78rem; }

/* "Accesso completo": sta sopra l'elenco perche' vale su tutte le righe sotto */
.perm-star-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    margin-bottom: 10px;
    border: 1px solid var(--mood-primary);
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
}
.perm-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
/* Intestazione delle due colonne di levette: e' quello che mancava prima -
   due interruttori identici senza etichetta erano un indovinello. */
.perm-head {
    display: grid;
    grid-template-columns: 1fr 46px 46px;
    align-items: end;
    gap: 6px;
    padding: 0 8px 0 10px;
    margin-bottom: 4px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mood-text-muted);
}
.perm-head span { text-align: center; }
.perm-head span:first-child { text-align: left; }
/* Etichetta di famiglia, come i gruppi di schede in alto */
.perm-fam {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mood-text-muted);
    margin: 9px 0 2px;
}
.perm-fam:first-child { margin-top: 0; }
.perm-item {
    display: grid;
    grid-template-columns: 1fr 46px 46px;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--mood-text);
    background: var(--mood-bg);
    border: 1px solid var(--mood-border);
    border-radius: 8px;
    padding: 3px 8px 3px 10px;
}
/* Permesso attivo: si vede a colpo d'occhio quali aree sono concesse */
.perm-item.is-on { border-color: var(--mood-primary); box-shadow: inset 3px 0 0 var(--mood-primary); }
.perm-item .perm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-item .perm-ro { font-style: normal; font-size: 0.7rem; color: var(--mood-text-muted); }
/* Nelle aree in sola lettura la colonna "Scrivi" non ha la levetta: c'e' un
   trattino, cosi' le due colonne restano allineate e si capisce che e' voluto. */
.perm-item .perm-no { text-align: center; color: var(--mood-text-muted); opacity: 0.5; }
.perm-item .switch { justify-self: center; }
/* Levette compatte: 38x20, due per riga su 14 righe. Il bersaglio resta la
   levetta intera (piu' il `title`, che dice cosa accende). */
.perm-item .switch--mini { width: 38px; height: 20px; }
.perm-item .switch--mini .slider::before { height: 14px; width: 14px; left: 3px; bottom: 3px; }
.perm-item .switch--mini input:checked + .slider::before { transform: translateX(18px); }

/* Preset: le pillole che accendono piu' aree insieme */
.perm-preset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}
.perm-preset__label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mood-text-muted);
}
.perm-preset__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font: inherit;
    font-size: 0.74rem;
    color: var(--mood-text);
    background: var(--mood-bg);
    border: 1px solid var(--mood-border);
    border-radius: 999px;
    cursor: pointer;
}
.perm-preset__btn:hover,
.perm-preset__btn:focus-visible { border-color: var(--mood-primary); color: var(--mood-primary); }
.perm-preset__btn em { font-style: normal; font-size: 0.66rem; color: var(--mood-text-muted); }

/* Legenda dei livelli, sopra la lista */
.admin-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-bottom: 12px;
    font-size: 0.78rem;
    color: var(--mood-text-muted);
}
.admin-legend__item b { color: var(--mood-text); font-weight: 600; }



/* ===== Feed AI - UI rifinita ===== */
.algo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.algo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mood-bg-card);
    color: var(--mood-text);
    border: 1px solid var(--mood-border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.algo-btn svg { width: 15px; height: 15px; }
.algo-btn:hover { border-color: var(--mood-primary); }
.algo-btn-primary { background: var(--mood-primary); border-color: var(--mood-primary); color: #fff; }
.algo-btn-primary:hover { background: var(--mood-primary-dark); }
.algo-btn:disabled, .algo-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.algo-lock { font-size: 0.78rem; color: var(--mood-text-muted); display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.algo-lock svg { width: 14px; height: 14px; }

.algo-grid-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 860px) { .algo-grid-main { grid-template-columns: 1fr; } }

.algo-card {
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: 16px;
    padding: 14px 16px;
}
.algo-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    margin-bottom: 10px;
}
.algo-card-title svg { width: 16px; height: 16px; color: var(--mood-primary); }

.algo-modes { display: grid; gap: 8px; }
.algo-mode {
    text-align: left;
    background: var(--mood-bg);
    border: 1px solid var(--mood-border);
    border-radius: 12px;
    padding: 9px 12px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.algo-mode b { display: block; color: var(--mood-text); font-size: 0.92rem; }
.algo-mode small { color: var(--mood-text-muted); font-size: 0.78rem; line-height: 1.35; display: block; margin-top: 2px; }
.algo-mode:hover, .algo-mode.is-active { border-color: var(--mood-primary); }
.algo-mode.is-active { background: rgba(108, 92, 231, 0.12); }

.algo-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.algo-stat {
    background: var(--mood-bg);
    border: 1px solid var(--mood-border);
    border-radius: 10px;
    padding: 8px 10px;
}
.algo-stat b { display: block; font-size: 1.15rem; }
.algo-stat span { font-size: 0.72rem; color: var(--mood-text-muted); }
.algo-stat-mode b { color: var(--mood-primary); text-transform: capitalize; }

.algo-explainer {
    background: var(--mood-bg-card);
    border-left: 3px solid var(--mood-primary);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    color: var(--mood-text-muted);
    margin-bottom: 12px;
}
.algo-explainer span { font-weight: 700; color: var(--mood-text); }

.algo-group { margin-bottom: 12px; }
.algo-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.algo-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--mood-bg);
    border: 1px solid var(--mood-border);
    border-radius: 10px;
    padding: 8px 10px;
    justify-content: space-between;
}
.algo-field.is-changed { border-color: var(--mood-primary); }
.algo-fname {
    font-size: 0.74rem;
    color: var(--mood-text-muted);
    line-height: 1.25;
}
.algo-field input,
.algo-field select {
    background: var(--mood-bg-card);
    color: var(--mood-text);
    border: 1px solid var(--mood-border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}
.algo-field input:focus, .algo-field select:focus { outline: none; border-color: var(--mood-primary); }

.algo-card.algo-clean {border: 0;background: transparent;padding: 0;display: flex;gap: 1rem;flex-direction: column;}
.algo-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    margin-bottom: 4px;
}
#algoGroups{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.algo-preset {
    text-align: left;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: 12px;
    padding: 9px 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.algo-preset b { display: block; color: var(--mood-text); font-size: 0.9rem; }
.algo-preset small { color: var(--mood-text-muted); font-size: 0.76rem; line-height: 1.35; display: block; margin-top: 2px; }
.algo-preset:hover, .algo-preset.is-active { border-color: var(--mood-primary); }
.algo-preset.is-active { background: rgba(108, 92, 231, 0.12); }
.algo-help {
    font-size: 0.7rem;
    color: var(--mood-text-muted);
    line-height: 1.3;
    min-height: 2.1em;
}

/* ===== PIANO DI DISTRIBUZIONE (scheda «Feed AI», 03/10/2026) =====
   Il titolare: «non è chiaro non capisco come l'algoritmo calcola la distribuzione». Il piano dice
   in una schermata che cosa fa il feed con queste impostazioni (responso), quali elementi pesano e
   come (righe numerate), come si compone una pagina, e il sunto di ogni setup. Il testo arriva dal
   server: qui c'è solo come si legge. */
.algo-plan { margin-bottom: 12px; }
.algo-plan-card { display: flex; flex-direction: column; gap: 12px; }
.algo-plan-badge {
    margin-left: auto; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--mood-primary); border: 1px solid var(--mood-primary); border-radius: 999px; padding: 1px 8px;
}
.algo-plan-verdict { border-radius: 12px; padding: 10px 12px; border-left: 3px solid var(--mood-primary); background: var(--mood-bg); }
.algo-plan-verdict.is-chrono { border-left-color: #38a169; }
.algo-plan-verdict > b { display: block; font-size: 0.96rem; margin-bottom: 4px; }
.algo-plan-verdict > p { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--mood-text); }
.algo-plan-nums { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.algo-plan-nums span {
    background: var(--mood-bg-card); border: 1px solid var(--mood-border); border-radius: 9px;
    padding: 5px 9px; font-size: 0.68rem; color: var(--mood-text-muted);
}
.algo-plan-nums b { display: block; font-size: 0.9rem; color: var(--mood-text); text-transform: capitalize; }
.algo-plan-anteprima { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.74rem; color: var(--mood-text-muted); }
.algo-plan-anteprima svg { width: 14px; height: 14px; }
.algo-plan-block-title { font-size: 0.82rem; font-weight: 700; color: var(--mood-text); display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.algo-plan-block { margin-bottom: 2px; }
.algo-plan-avvisi { display: flex; flex-direction: column; }
.algo-plan-block-title svg { width: 15px; height: 15px; color: var(--mood-primary); }
.algo-plan-row {
    display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 8px;
    padding: 7px 9px; border: 1px solid var(--mood-border); border-radius: 10px;
    background: var(--mood-bg); margin-bottom: 6px;
}
.algo-plan-n { font-size: 0.7rem; color: var(--mood-text-muted); }
.algo-plan-who b { display: block; font-size: 0.84rem; color: var(--mood-text); }
.algo-plan-who small { color: var(--mood-text-muted); font-size: 0.72rem; line-height: 1.3; }
.algo-plan-val { font-size: 0.84rem; font-weight: 700; color: var(--mood-primary); white-space: nowrap; }
.algo-plan-src {
    font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 999px;
    padding: 2px 7px; border: 1px solid var(--mood-border); color: var(--mood-text-muted); white-space: nowrap;
}
.algo-plan-src.is-profilo { border-color: var(--mood-primary); color: var(--mood-primary); }
.algo-plan-formula {
    margin: 0; padding: 10px 12px; background: var(--mood-bg); border: 1px dashed var(--mood-border);
    border-radius: 10px; font-size: 0.76rem; line-height: 1.5; color: var(--mood-text);
    overflow-x: auto; white-space: pre;
}
.algo-plan-txt { margin: 0 0 5px; font-size: 0.82rem; line-height: 1.45; color: var(--mood-text); }
.algo-plan-txt.is-muto { color: var(--mood-text-muted); font-size: 0.76rem; margin-bottom: 0; }
.algo-plan-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.algo-plan-chip { font-size: 0.72rem; color: var(--mood-text-muted); background: var(--mood-bg); border: 1px solid var(--mood-border); border-radius: 999px; padding: 3px 9px; }
.algo-plan-chip b { color: var(--mood-text); }
.algo-plan-avviso {
    display: flex; gap: 7px; align-items: flex-start; font-size: 0.79rem; line-height: 1.4;
    padding: 7px 9px; border-radius: 10px; background: var(--mood-bg); border: 1px solid var(--mood-border);
    margin-bottom: 6px; color: var(--mood-text);
}
.algo-plan-avviso svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.algo-plan-avviso.is-attenzione { border-color: #e0a300; }
.algo-plan-avviso.is-attenzione svg { color: #e0a300; }
.algo-plan-avviso.is-ok svg { color: #38a169; }
.algo-plan-avviso.is-nota svg { color: var(--mood-primary); }
.algo-plan-setups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.algo-plan-setup { background: var(--mood-bg); border: 1px solid var(--mood-border); border-radius: 12px; padding: 9px 11px; }
.algo-plan-setup.is-adesso { border-color: var(--mood-primary); }
.algo-plan-setup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.algo-plan-setup-head b { font-size: 0.86rem; }
.algo-plan-setup small { display: block; color: var(--mood-text-muted); font-size: 0.72rem; line-height: 1.3; margin: 3px 0 5px; }
.algo-plan-setup p { margin: 0; font-size: 0.78rem; line-height: 1.4; color: var(--mood-text); }
.algo-plan-cambia { margin-top: 6px; font-size: 0.7rem; color: var(--mood-text-muted); line-height: 1.35; }
.algo-plan-prova {
    margin-top: 7px; background: transparent; border: 1px solid var(--mood-border); color: var(--mood-text);
    border-radius: 8px; padding: 4px 9px; font-size: 0.72rem; cursor: pointer;
}
.algo-plan-prova:hover { border-color: var(--mood-primary); color: var(--mood-primary); }
.algo-plan-tag {
    font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px;
    padding: 2px 7px; border: 1px solid var(--mood-border); color: var(--mood-text-muted); white-space: nowrap;
}
.algo-plan-tag.is-smart { color: var(--mood-primary); border-color: var(--mood-primary); }
.algo-plan-tag.is-chrono { color: #38a169; border-color: #38a169; }
@media (max-width: 620px) {
    .algo-plan-row { grid-template-columns: 18px 1fr; align-items: start; }
    .algo-plan-val, .algo-plan-src { grid-column: 2; white-space: normal; }
}
/* ===== Switch (toggle) per i permessi di accesso ===== */
/* ===== Switch (toggle): l'interruttore "accesso completo" in Accessi ===== */
.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    flex: 0 0 auto;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--mood-border, #2b2b3d);
    border-radius: 999px;
    transition: background 0.2s ease;
}
.switch .slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.switch input:checked + .slider { background: var(--mood-primary, #6C5CE7); }
.switch input:checked + .slider::before { transform: translateX(20px); }
/* Levetta spenta perche' non si puo' toccare (con "Accesso completo" accanto,
   le leve delle singole aree non servono: si vede che sono in pausa). */
.switch input:disabled + .slider { opacity: 0.55; cursor: not-allowed; }

/* ---------- Aree nuove: moderazione, provider, segnalazioni, media, minori ---------- */
.admin-panel {
    background: var(--mood-bg-card, #181825);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius, 16px);
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
}
.admin-panel h3 { margin: 0 0 0.8rem; font-size: 1rem; color: var(--mood-text, #e6e6ef); }

.admin-hint { color: var(--mood-text-muted, #8b8b9e); font-size: 0.82rem; }

.admin-form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 0.8rem;
}
.admin-form-row label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--mood-text-muted, #8b8b9e);
}
.admin-form-row input,
.admin-form-row select {
    background: var(--mood-bg, #101018);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.45rem 0.6rem;
    font-size: 0.88rem;
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--mood-primary, #6c5ce7);
    color: #fff;
    border: 1px solid var(--mood-primary, #6c5ce7);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.5rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.admin-btn:hover { opacity: 0.88; }

.admin-stages {
    display: grid;
    gap: 0.4rem;
    margin: 0.6rem 0 0.9rem;
    grid-template-columns: 250px minmax(00px, 1fr) auto;
    row-gap: 9px;
}

.admin-stats { display: flex; gap: 1rem; flex-wrap: wrap; }
.admin-stat {
    background: var(--mood-bg, #101018);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    color: var(--mood-text-muted, #8b8b9e);
}
.admin-stat b { color: var(--mood-text, #e6e6ef); }

.admin-pre {
    margin: 0;
    max-height: 420px;
    overflow: auto;
    background: var(--mood-bg, #101018);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.8rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--mood-text, #e6e6ef);
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-table select,
.admin-table input[type="text"],
.admin-table input[type="number"] {
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 8px;
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
    max-width: 220px;
}

/* ============================================================
   Responsive mobile - "stile social"
   ============================================================ */
@media (max-width: 700px) {
    .admin-wrap { padding: 0.75rem 0.65rem 5.5rem; }

    .admin-topbar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .admin-title h1 { font-size: 1.25rem; }
    .admin-sub { font-size: 0.78rem; }
    .admin-identity { font-size: 0.75rem; padding: 0.4rem 0.7rem; }

    /* Tab: riga scorrevole orizzontalmente (niente wrap a blocco) */
    .admin-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 0.4rem;
        padding-bottom: 0.6rem;
        margin-bottom: 1rem;
        scrollbar-width: none;
    }
    /* I GRUPPI non devono stringersi: ognuno resta la sua riga di schede e la
       striscia scorre in orizzontale. Senza queste due righe, sul telefono il
       gruppo (flex item in un contenitore nowrap) si restringe, le sue schede
       vanno in colonna una sotto l'altra e le colonne si accavallano: misurato
       su 390x844 il 12/09, "Accessi" finiva sotto "Protezione minori". */
    .admin-tabs-group,
    .admin-tabs-group + .admin-tabs-group { flex: 0 0 auto; flex-wrap: nowrap; }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 0.45rem 0.8rem;
        font-size: 0.82rem;
        white-space: nowrap;
    }
    .admin-tab svg { width: 15px; height: 15px; }

    /* Statistiche: 2 colonne compatte */
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
    .stat-card { padding: 0.7rem 0.8rem; border-radius: 14px; }
    .stat-card .stat-label { font-size: 0.66rem; }
    .stat-card .stat-value { font-size: 1.25rem; }

    .admin-card { padding: 0.85rem; border-radius: 14px; }
    .admin-two-col { gap: 0.75rem; }
    .admin-panel { padding: 0.85rem; border-radius: 14px; }

    /* Toolbar e form: a tutta larghezza */
    .admin-toolbar { flex-direction: column; align-items: stretch; gap: 0.45rem; }
    .admin-toolbar input[type="search"],
    .admin-toolbar select { width: 100%; min-width: 0; }
    /* I CAMPI DI RICERCA NON SONO PIU' QUADRATI ENORMI (10/10/2026).
       Segnalato dall'utente: «anche i campi di ricerca input sono quadrati
       enormi». In fila (`flex-direction: row`) `flex: 1 1 220px` allarga il
       campo; in colonna la STESSA regola diventa l'ALTEZZA, e il campo veniva
       369x220. Misurato a 390px, prima di queste righe: post 220, media 220,
       diritti 220, utenti 220, gruppi 220, minori 220, influencer 220,
       marketplace 220 (due campi). Da 220px a 44px, il minimo toccabile. */
    .admin-toolbar input[type="search"],
    .admin-toolbar input[type="text"],
    .admin-toolbar input[type="number"],
    .admin-toolbar input[type="date"],
    .admin-toolbar input[type="email"],
    .admin-toolbar textarea { flex: 0 0 auto; min-height: 44px; }
    /* Il dito: le select e i pulsanti della barra erano alti 34px. */
    .admin-toolbar select,
    .admin-toolbar .admin-btn { min-height: 44px; }
    /* IL PAGINATORE SI TOCCA COL DITO (11/10/2026). Le due frecce erano alte 28px (col mouse si
       prendevano, col dito no). Vale per TUTTE le aree che paginano (Utenti, Post, ...): è la
       stessa classe, e una classe che si tocca in un posto si tocca in tutti. */
    .admin-pagination button { min-height: 44px; min-width: 44px; }
    .admin-form-row { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .admin-form-row input,
    .admin-form-row select { width: 100%; }
    .admin-btn { width: 100%; justify-content: center; }

    .admin-stats { gap: 0.5rem; }
    .admin-stat { flex: 1 1 45%; font-size: 0.8rem; padding: 0.5rem 0.7rem; }

    /* Attivita' recente: due righe - thumb + autore + data, poi il testo
       (max 2 righe, con i puntini). Prima il testo occupava una riga intera
       e la data finiva su una terza riga: ogni voce arrivava a 100px. */
    .admin-activity-item {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb who when"
            ".     what what";
        row-gap: 3px;
    }
    .admin-activity-item .what {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        line-height: 1.35;
    }
    .admin-activity-item .when { margin-left: 0; }
    .stat-card .stat-hint { display: none; }
}

/* Tabelle -> card su mobile (solo dove le celle hanno data-label) */
@media (max-width: 700px) {
    .admin-table[data-responsive] { min-width: 0; }
    .admin-table[data-responsive] thead { display: none; }
    .admin-table[data-responsive] tbody tr {
        display: block;
        border: 1px solid var(--mood-border, #2b2b3d);
        border-radius: 14px;
        background: var(--mood-bg-card, #181825);
        margin-bottom: 0.6rem;
        overflow: hidden;
    }
    .admin-table[data-responsive] tbody tr:nth-child(even) td { background: transparent; }
    .admin-table[data-responsive] tbody tr:hover td { background: transparent; }
    .admin-table[data-responsive] tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        white-space: normal;
        max-width: none;
        padding: 0.5rem 0.8rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .admin-table[data-responsive] tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--mood-text-muted, #8b8b9e);
    }
    .admin-table[data-responsive] tbody td:last-child { border-bottom: 0; }
    .admin-table[data-responsive] tbody td.admin-empty { justify-content: center; }
    .admin-table[data-responsive] tbody td.admin-empty::before { content: none; }
    .admin-table[data-responsive] td .admin-cell-content { white-space: normal; }
}

.perm-star-row .switch { margin: 0; }

/* ===============
   MODERAZIONE - stato, modalita', stadi, coda e storico
   =============== */
.admin-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.admin-mod-head h3 { margin: 0; }
.admin-toolbar--flush { margin-bottom: 0; }
.admin-btn--ghost { background: transparent; color: var(--mood-text, #e6e6ef); border: 1px solid var(--mood-border, #2b2b3d); }
.admin-btn--ghost:hover { border-color: var(--mood-primary, #6c5ce7); }

/* Coda del Creative Lab: i file gia' sul server e non ancora opere.
   Una riga per file, con il suo "Scarta": la coda si svuota file per file,
   e chi svuota tutto ha davanti l'elenco di quello che sta per sparire. */
.cl-old-list { list-style: none; margin: .45rem 0 .6rem; padding: 0; display: grid; gap: .25rem; }
.cl-old-list li {
    display: flex; align-items: center; gap: .5rem;
    padding: .2rem .5rem; font-size: .82rem;
    border: 1px solid var(--mood-border, #2b2b3d); border-radius: 8px;
}
.cl-old-list .cl-old-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-old-list .cl-old-meta { color: var(--mood-text-muted, #8b8b9e); font-size: .75rem; }
.cl-old-list .admin-btn { padding: .15rem .5rem; font-size: .75rem; }

/* Chips dei contatori (filtro rapido per decisione) */
.mod-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.mod-chip {
    border: 1px solid var(--mood-border, #2b2b3d);
    background: transparent;
    color: var(--mood-text-muted, #8b8b9e);
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
}
.mod-chip b { color: var(--mood-text, #e6e6ef); margin-left: 0.15rem; }
.mod-chip:hover { border-color: var(--mood-primary, #6c5ce7); color: var(--mood-text, #e6e6ef); }
.mod-chip.is-on { background: var(--mood-primary, #6c5ce7); border-color: var(--mood-primary, #6c5ce7); color: #fff; }
.mod-chip.is-on b { color: #fff; }

/* Modalita': schede radio con spiegazione */
.mod-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; margin-bottom: 0.9rem; }
.mod-mode {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    background: var(--mood-bg, #101018);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
}
.mod-mode input { margin-top: 0.15rem; }
.mod-mode__body { display: flex; flex-direction: column; gap: 0.15rem; }
.mod-mode__body strong { font-size: 0.88rem; color: var(--mood-text, #e6e6ef); }
.mod-mode__body small { font-size: 0.74rem; line-height: 1.35; color: var(--mood-text-muted, #8b8b9e); }
.mod-mode:has(input:checked) {
    border-color: var(--mood-primary, #6c5ce7);
    box-shadow: inset 0 0 0 1px var(--mood-primary, #6c5ce7);
}

/* Stadi: schede con nome leggibile, provider e stato */
.mod-stage {
    padding: 0.6rem 0.75rem;
    background: var(--mood-bg, #101018);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
}
.mod-stage.is-off { opacity: 0.55; }
.mod-stage__head { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.mod-stage__title { font-size: 0.88rem; font-weight: 600; color: var(--mood-text, #e6e6ef); }
.mod-stage__hint { margin: 0.2rem 0 0.4rem 0.1rem; }
.mod-stage__prov select { width: 100%; max-width: 420px; }
.mod-stage__provnames { font-size: 0.72rem; color: var(--mood-text-muted, #8b8b9e); }
.mod-stage__extras { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.mod-stage__opt {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    color: var(--mood-text-muted, #8b8b9e);
    border: 1px dashed var(--mood-border, #2b2b3d);
    border-radius: 6px;
}
.mod-stage__opt b { color: var(--mood-text, #e6e6ef); font-weight: 600; }

/* Barra di salvataggio con stato "modifiche non salvate" */
/* I CARATTERI SPECIALI SI SCRIVONO CON IL LORO NUMERO (10/10/2026).
   La freccia dei dettagli, la spunta di «salvato» e il pallino dei campi
   modificati erano scritti come carattere: salvati una volta con la codifica
   sbagliata, il pannello mostrava due lettere storte al loro posto. Segnalato
   dall'utente: «ci sono caratteri speciali strani». Il numero del carattere
   (`\25B8` freccia, `\2713` spunta, `\25CF` pallino) non si può storpiare: e'
   ASCII e resta quello su qualsiasi server.
   (Il pallino di «modifiche non salvate», invece, NON e' un carattere: e' un
   cerchio di 7px DISEGNATO, piu' sotto in questo foglio. La regola col
   carattere che stava qui era coperta da quella e non si vedeva mai: tolta.) */
.mod-savebar { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.9rem; flex-wrap: wrap; }
.mod-savebar__state { font-size: 0.78rem; color: var(--mood-warning, #fdcb6e); }

/* Coda: oggetto con anteprima, punteggio, severita', pill di decisione */
.admin-table--mod { font-size: 0.84rem; }
.admin-table--mod .badge { font-size: 0.68rem; padding: 0.12rem 0.45rem; }
.admin-table--mod th,
.admin-table--mod td { padding: 0.4rem 0.25rem; }
/* LE CELLE UN FILO PIU' STRETTE (10/10/2026). Con `0.3rem` per lato la somma
   delle 11 colonne faceva 1386px in un riquadro di 1369: la coda scorreva di
   lato e l'ultima colonna («Applica») restava tagliata di 17px. Misurato:
   `0.25rem` per lato -> 1369 esatti, senza togliere niente ai dati. */
.mod-obj { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.mod-obj__text { display: flex; flex-direction: column; min-width: 0; }
.mod-obj__text strong { font-size: 0.84rem; white-space: normal; }
/* Riga secondaria dell'oggetto: 0.68rem per far stare "Immagine 1728x1152 -
   446 KB" per intero nella colonna (a 0.72rem servivano ~175px e la tabella
   usciva dal pannello) */
.mod-obj__text small { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; color: var(--mood-text-muted, #8b8b9e); }
.mod-obj .admin-thumb { flex: 0 0 auto; }

.mod-score { display: inline-block; width: 54px; height: 6px; border-radius: 4px; background: var(--mood-border, #2b2b3d); overflow: hidden; vertical-align: middle; }
.mod-score i { display: block; height: 100%; }
.mod-score.is-1 i { width: 20%; background: #2ecc71; }
.mod-score.is-2 i { width: 40%; background: #7ed957; }
.mod-score.is-3 i { width: 60%; background: #f1c40f; }
.mod-score.is-4 i { width: 80%; background: #e67e22; }
.mod-score.is-5 i { width: 100%; background: #e74c3c; }
.mod-score__num { font-size: 0.78rem; }

.mod-sev { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.72rem; font-weight: 700; }
.mod-sev.is-ok { color: #2ecc71; border: 1px solid #2ecc71; }
.mod-sev.is-warn { color: #f1c40f; border: 1px solid #f1c40f; }
.mod-sev.is-bad { color: #e74c3c; border: 1px solid #e74c3c; }

.mod-dec-pill { display: inline-block; font-size: 0.72rem; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid; }
.mod-dec-pill.is-pending { color: #fdcb6e; border-color: #fdcb6e; }
.mod-dec-pill.is-allow { color: #2ecc71; border-color: #2ecc71; }
.mod-dec-pill.is-warn { color: #f1c40f; border-color: #f1c40f; }
.mod-dec-pill.is-bad { color: #e74c3c; border-color: #e74c3c; }
.mod-dec-pill.is-info { color: #3498db; border-color: #3498db; }

/* Decisione: select e pulsante sulla prima riga, il motivo a tutta larghezza
   sotto. Con tre colonne l'input finiva a 15px e la colonna allargava la
   tabella oltre il pannello (scroll orizzontale). */
.mod-dec-cell { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.mod-dec {
    display: grid;
    grid-template-columns: minmax(112px, 1fr) auto;
    grid-template-areas: "sel btn" "reason reason";
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
}
.mod-dec > * { min-width: 0; }
.mod-dec > select { grid-area: sel; }
.mod-dec > .mod-reason { grid-area: reason; }
.mod-dec > .admin-link-btn { grid-area: btn; }
/* IL CAMPO «MOTIVO» PRENDE LA LARGHEZZA DELLA SUA AREA (10/10/2026).
   Un `<input>` senza larghezza vale 220px di serie (`size=20`), piu' dello
   spazio della sua cella: era lui ad allargare la tabella oltre il riquadro -
   misurato a 1600px, coda 1386px in un contenitore di 1369 - e a far scorrere
   la coda di lato. Con `inline-size: 100%` il campo entra nella sua area. */
.admin-table--mod .mod-dec > .mod-reason,
.admin-table--mod .mod-dec > select {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
}
/* Il margine globale sui link-button spostava il pulsante fuori dalla griglia */
.admin-table td .mod-dec .admin-link-btn { margin-left: 0; }
/* L'ultimo badge di una cella non deve trascinarsi dietro il margine destro */
.admin-table--mod td .badge:last-child { margin-right: 0; }
.mod-decided { margin-top: 0.3rem; font-size: 0.72rem; color: var(--mood-text-muted, #8b8b9e); }

/* Il contenuto dei dettagli va a capo (la cella della tabella e' nowrap) */
.mod-details { margin-top: 0.35rem; white-space: normal; }
.mod-details .mod-raw { white-space: pre; }
.mod-details summary { cursor: pointer; font-size: 0.74rem; color: var(--mood-primary, #6c5ce7); list-style: none; }
.mod-details summary::-webkit-details-marker { display: none; }
.mod-details summary::before { content: '\25B8'; display: inline-block; margin-right: 0.3rem; transition: transform 0.15s ease; }
.mod-details[open] summary::before { transform: rotate(90deg); }
.mod-flags { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.mod-flags li { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.76rem; padding: 0.12rem 0; border-bottom: 1px dashed var(--mood-border, #2b2b3d); }
.mod-raw { max-height: 180px; overflow: auto; font-size: 0.7rem; margin: 0.35rem 0 0; padding: 0.5rem; border-radius: 8px; background: var(--mood-bg-hover, #EEEEF5); }

/* Storico azioni: una riga = quando + autore + azione + nota.
   Griglia e non flex: con il flex le quattro parti si accodavano a sinistra
   lasciando vuoto oltre meta' pannello (misurato: testo su 630px dei 1131
   disponibili) e le colonne non si allineavano da una riga all'altra. */
.mod-hist { list-style: none; margin: 0; padding: 0; }
/* Contenitore della cronologia delle decisioni (le righe sono .mod-hist li).
   La classe era usata dal modulo senza alcuna regola: `min-width: 0` evita che
   una nota lunga allarghi la sezione oltre lo schermo. */
.mod-history { min-width: 0; }
.mod-hist li {
    display: grid;
    grid-template-columns: 118px max-content minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "when who what note";
    align-items: baseline;
    column-gap: 10px;
    padding: 0.45rem 0.5rem;
    margin: 0 -0.5rem;
    border-bottom: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 8px;
    font-size: 0.8rem;
}
.mod-hist li:last-child { border-bottom: 0; }
.mod-hist li:hover { background: var(--mood-bg-hover, #EEEEF5); }
.mod-hist__when { grid-area: when; font-size: 0.74rem; color: var(--mood-text-muted, #8b8b9e); white-space: nowrap; }
.mod-hist__who { grid-area: who; font-weight: 600; color: var(--mood-primary, #6c5ce7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-hist__what { grid-area: what; min-width: 0; overflow-wrap: anywhere; }
.mod-hist__note { grid-area: note; min-width: 0; text-align: right; font-style: italic; color: var(--mood-text-muted, #8b8b9e); }

@media (max-width: 700px) {
    .mod-dec { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sel" "reason" "btn"; }
    .mod-dec select, .mod-dec .mod-reason, .mod-dec .admin-link-btn { width: 100%; }
    /* La cella "Decisione" e' un blocco unico che prende la larghezza rimasta */
    .admin-table[data-responsive] tbody td:has(.mod-dec-cell) { align-items: flex-start; }
    .admin-table[data-responsive] tbody td:has(.mod-dec-cell)::before { margin-top: 0.55rem; }
    .admin-table[data-responsive] tbody td .mod-dec-cell {
        flex: 1 1 auto;
        min-width: 0;
        align-items: stretch;
        text-align: left;
    }
    /* Storico azioni su mobile: quando + autore sulla prima riga, azione e
       nota a tutta larghezza sotto (prima erano quattro righe da 99px). */
    .mod-hist li {
        grid-template-columns: 118px minmax(0, 1fr);
        grid-template-areas: "when who" "what what" "note note";
        row-gap: 2px;
        padding: 0.4rem 0.4rem;
        margin: 0 -0.4rem;
    }
    .mod-hist__note { text-align: left; }
}

/* ============================================================
   Componenti INFORMATIVI generici (riusabili da ogni area admin)
   .admin-note  -> riquadro esplicativo (con tono ok/warn/bad)
   .admin-opts  -> scelte a schede con titolo + spiegazione
   .admin-field -> campo con nome, testo di aiuto e stato
   .admin-bars  -> distribuzione a barre (es. fasce d'eta')
   ============================================================ */
.admin-note {
    border-left: 3px solid #693c4438;
    background: #f48ea038;
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--mood-text-muted, #8b8b9e);
    margin: 20px;
}
.admin-note + .admin-note { margin-top: 0.5rem; }
.admin-note strong, .admin-note b { color: var(--mood-text, #e6e6ef); }
.admin-note code {
    background: var(--mood-bg, #101018);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 5px;
    padding: 0 4px;
    font-size: 0.76rem;
}
.admin-note--ok { border-left-color: #2ecc71; }
.admin-note--warn {border-left-color: #961229a1;}
.admin-note--bad { border-left-color: #e74c3c; }
.admin-note__title {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px; font-weight: 700; font-size: 0.86rem;
    color: var(--mood-text, #e6e6ef);
}
.admin-note__title svg { width: 15px; height: 15px; }
.admin-note ol, .admin-note ul { margin: 0.35rem 0 0; padding-left: 1.15rem; }
.admin-note li { margin-bottom: 0.2rem; }

.admin-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0.6rem; margin: 0.5rem 0 0; }
.admin-opt {
    display: flex; gap: 0.55rem; align-items: flex-start;
    padding: 0.6rem 0.7rem; cursor: pointer;
    background: var(--mood-bg, #101018);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
}
.admin-opt input { margin-top: 0.15rem; flex: 0 0 auto; }
.admin-opt__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.admin-opt__body strong { font-size: 0.88rem; color: var(--mood-text, #e6e6ef); }
.admin-opt__body small { font-size: 0.74rem; line-height: 1.35; color: var(--mood-text-muted, #8b8b9e); }
.admin-opt:has(input:checked) {
    border-color: var(--mood-primary, #6c5ce7);
    box-shadow: inset 0 0 0 1px var(--mood-primary, #6c5ce7);
}

.admin-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-field textarea{
    padding: 1rem;
}

.admin-field__name {font-size: 0.85rem;font-weight: 600;color: var(--mood-text, #e6e6ef);padding-left: 5px;}
.admin-field__help { font-size: 0.76rem; line-height: 1.45; color: var(--mood-text-muted, #8b8b9e); }

/* "Chi non e' abbonato" (area Piani): il numero vuole la sua larghezza, non quella della scheda.
   In una scheda da 1300px un input numerico senza misura si allarga come il contenitore e il
   campo diventa una riga vuota lunghissima: qui si fissa a una misura da numero. */
#admin-pane-piani .admin-form-row .admin-field { flex: 0 1 240px; min-width: 200px; }
#admin-pane-piani .admin-form-row input[type="number"] { width: 100%; }
.admin-field input[type="number"], .admin-field input[type="text"], .admin-field select {
    background: var(--mood-bg, #101018);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    font-size: 0.86rem;
    max-width: 220px;
}
.admin-field input:focus, .admin-field select:focus { outline: none; border-color: var(--mood-primary, #6c5ce7); }
.admin-field input[type="range"] { max-width: 260px; accent-color: var(--mood-primary, #6c5ce7); }
/* Campo corto dentro una riga (es. la percentuale degli scaglioni influencer):
   prima la larghezza era scritta nello stile inline dell'elemento. */
.admin-input--sm { width: 5.5rem; min-width: 5.5rem; }
.admin-field__state { font-size: 0.75rem; color: var(--mood-text-muted, #8b8b9e); }
.admin-field.is-changed .admin-field__name::after { content: " • modificata"; color: var(--mood-primary, #6c5ce7); }
.admin-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.9rem 1.2rem; }

.admin-bars { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.7rem; }
.admin-bar-row { display: grid; grid-template-columns: 104px 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.79rem; color: var(--mood-text-muted, #8b8b9e); }
.admin-bar-track { height: 10px; border-radius: 5px; background: var(--mood-bg, #101018); border: 1px solid var(--mood-border, #2b2b3d); overflow: hidden; }
.admin-bar-fill { display: block; height: 100%; background: var(--mood-primary, #6c5ce7); }
.admin-bar-fill--muted { background: var(--mood-border, #2b2b3d); }

@media (max-width: 700px) {
    .admin-bar-row { grid-template-columns: 78px 1fr auto; font-size: 0.74rem; }
    .admin-field input[type="number"], .admin-field input[type="text"], .admin-field select { max-width: 100%; }
}

/* ------------------------------------------------------------------
   Area "Diritti & Opere" (Studio autore) - admin-rights.js
   Riusa le classi esistenti (admin-card, admin-table, admin-note,
   admin-two-col). Qui solo cio' che mancava: bottone distruttivo,
   scheda di revisione staccata dalla tabella e titoli h4 nelle colonne.
   ------------------------------------------------------------------ */
.admin-btn--danger { background: #e74c3c; border-color: #e74c3c; color: #fff; }

/* ------------------------------------------------------------------
   ELIMINARE UN UTENTE (17/09/2026) - admin-users.js
   ------------------------------------------------------------------
   La finestra che toglie davvero un utente non chiede "sei sicuro?": elenca
   cosa si porta via (le righe, tabella per tabella) e chiede di scrivere lo
   username. Qui solo il vestito: elenco compatto e scorrevole, conteggio a
   destra, errore in rosso. Variabili del sito, nessun colore inventato.
   ------------------------------------------------------------------ */
.admin-del__titolo { margin: 0.9rem 0 0.4rem; font-weight: 600; }
.admin-del__lista {
    max-height: 210px; overflow: auto; margin: 0 0 0.9rem; padding: 0.5rem 0.7rem;
    list-style: none; border: 1px solid var(--mood-border); border-radius: 10px;
    background: var(--mood-surface-muted); font-size: 0.82rem;
}
.admin-del__lista li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 2px 0; }
.admin-del__lista li span { opacity: 0.75; }
.admin-del__campo { display: block; font-size: 0.85rem; }
.admin-del__campo input {
    display: block; width: 100%; margin-top: 0.4rem; padding: 0.55rem 0.7rem;
    border: 1px solid var(--mood-border); border-radius: 10px; font: inherit;
}
.admin-del__errore { margin: 0.6rem 0 0; color: var(--mood-danger); font-size: 0.85rem; }
.admin-card-top { margin-top: 0.9rem; }
.admin-two-col h4 {padding-left: 9px;padding-bottom: 5px;}

.admin-two-col h4 + .table-scroll { margin-bottom: 0.9rem; }


/* =================
   Creative Lab - import massivo di musica/video.
   Il trascinamento e' la porta d'ingresso: il resto e' una tabella da correggere.
   ================= */
.cl-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    padding: 1.6rem 1rem;
    border: 2px dashed var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius, 16px);
    color: var(--mood-text-muted, #8b8b9e);
    background: var(--mood-bg, transparent);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cl-drop i { width: 28px; height: 28px; color: var(--mood-primary, #6c5ce7); }
.cl-drop b { color: var(--mood-text, #e6e6ef); font-size: 0.95rem; }
.cl-drop.is-over {
    border-color: var(--mood-primary, #6c5ce7);
    background: color-mix(in srgb, var(--mood-primary, #6c5ce7) 10%, transparent);
}
.cl-input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cl-batch {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.7rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--mood-border, #2b2b3d);
}
.cl-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--mood-text, #e6e6ef); padding-bottom: 0.5rem; }
.cl-spacer { flex: 1 1 auto; }

/* Riga delle azioni del lotto ("Crea le opere" / "Svuota"). La classe era usata
   dal modulo ma NON definita in nessun CSS: i pulsanti finivano attaccati al
   resto della scheda. Ora e' una riga propria, separata e allineata a destra. */
.cl-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--mood-border, #2b2b3d);
}

/* --- elenco dei file da importare -----------------------------------------
   Prima era una tabella da 11 colonne larga almeno 1020px: i campi erano
   incollati l'uno all'altro, le intestazioni lontane dal campo e i titoli
   troncati. Ora e' una scheda per brano, con i campi ETICHETTATI dentro una
   griglia che si adatta alla larghezza: ogni valore si legge a colpo d'occhio. */
.cl-files { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }
.cl-file {
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 12px);
    background: var(--mood-bg-card, #181825);
    padding: 0.95rem 1.1rem 1.05rem;
}
.cl-file.is-done { opacity: 0.75; }
.cl-file__head {
    display: flex;
    align-items: center;
    gap: 0.55rem 0.7rem;
    flex-wrap: wrap;
    padding-bottom: 0.7rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--mood-border, #2b2b3d);
}
.cl-file__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mood-text, #e6e6ef);
    word-break: break-all;
    min-width: 0;
}
.cl-file__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem 0.6rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    color: var(--mood-text-muted, #8b8b9e);
}
.cl-file__grow { flex: 1 1 auto; }
.cl-file__del {
    border: 1px solid var(--mood-border, #2b2b3d);
    background: transparent;
    color: var(--mood-text-muted, #8b8b9e);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
}
.cl-file__del:hover { color: var(--mood-danger, #e74c3c); border-color: var(--mood-danger, #e74c3c); }

.cl-tags { font-size: 0.76rem; color: var(--mood-text-muted, #8b8b9e); }
/* Coda di revisione: la decisione presa a mano va contro l'analisi automatica. */
.mod-note-warn {
    margin-top: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--mood-warning, #f0ad4e);
}
.cl-tags--warn { color: var(--mood-warning, #f0ad4e); }
.cl-details { margin-top: 0.75rem; }
.cl-details > summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--mood-text-muted, #8b8b9e);
    padding: 0.25rem 0;
}
.cl-details[open] > summary { color: var(--mood-text, #e6e6ef); margin-bottom: 0.5rem; }
.cl-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; }
.cl-raw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; padding: 0.4rem 0; }
.cl-list { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; color: var(--mood-text-muted, #8b8b9e); }
.cl-warn { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; color: #b8860b; }
.admin-table--tight td { padding: 0.2rem 0.5rem; font-size: 0.78rem; }

/* --- Area "Programma influencer" -------------------------------------------
   L'area era un muro di numeri e colonne tecniche. Questi sono i pezzi che la
   rendono leggibile: la spiegazione in tre passi, gli scaglioni a schede e la
   cronologia in frasi (una riga per evento: chi, cosa, quando). */
.inf-howto {margin-bottom: 1rem;}
.inf-howto .inf-steps { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.inf-howto .inf-steps li { margin: 0.45rem 0; line-height: 1.5; }
.inf-howto .inf-steps li::marker { color: var(--area-accent, var(--mood-primary, #6c5ce7)); font-weight: 700; }

.inf-tiers {display: grid;gap: 0.6rem;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}
.inf-tier {
    background: var(--mood-bg, transparent);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-left: 3px solid var(--area-accent, var(--mood-primary, #6c5ce7));
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.6rem 0.75rem;
}
.inf-tier__top { display: flex; align-items: center; gap: 0.5rem; }
.inf-tier__name { font-weight: 700; }
.inf-tier__range { margin-top: 0.15rem; font-size: 0.82rem; }
.inf-tier__fee { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; }
.inf-tier__fee input { text-align: right; }
.inf-tier__pct { font-size: 0.9rem; color: var(--mood-text-muted, #8b8b9e); }
.inf-tier__hint { margin-top: 0.35rem; font-size: 0.78rem; color: var(--mood-text-muted, #8b8b9e); }

.inf-events { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.inf-events li {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
    grid-template-areas:
        "who what when"
        "who note when";
    align-items: baseline;
    column-gap: 0.6rem;
    row-gap: 0.1rem;
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid var(--mood-border, #2b2b3d);
}
.inf-events li:last-child { border-bottom: 0; }
.inf-ev__who { grid-area: who; font-weight: 600; }
.inf-ev__what { grid-area: what; }
.inf-ev__note { grid-area: note; font-size: 0.78rem; color: var(--mood-text-muted, #8b8b9e); }
.inf-ev__when { grid-area: when; font-size: 0.74rem; color: var(--mood-text-muted, #8b8b9e); white-space: nowrap; }
@media (max-width: 560px) {
    .inf-events li { grid-template-columns: 1fr; grid-template-areas: "who" "what" "note" "when"; }
}

/* Tabella delle adesioni: qui le celle possono andare a capo (nel resto del
   pannello restano su una riga). Senza questo, i testi lunghi allargavano la
   tabella oltre lo schermo e la colonna "Cosa fare" - cioe' i pulsanti per
   decidere - restava fuori vista, da raggiungere scorrendo di lato. */
.admin-table--inf { min-width: 0; }
.admin-table--inf th { white-space: normal; }

.admin-table--inf td { white-space: normal; }
.admin-table--inf td:first-child { min-width: 13rem; }
.admin-table--inf td:last-child { white-space: nowrap; }

/* =================
   MODALE del pannello (uno per tutte le aree, vedi admin-core.js) e SCHEDA
   dell'opera del Creative Lab, che dentro al modale ci vive.
   =============== */
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem 2rem;
    overflow-y: auto;
    background: rgba(8, 8, 14, 0.72);
    backdrop-filter: blur(3px);
}
.admin-modal-open { overflow: hidden; }
/* `hidden` deve vincere su display:grid/flex: senza questa riga il campo
   dell'editore esterno (e il pie' di pagina vuoto) restavano in vista perche' la
   classe che li impagina batte l'attributo del browser. */
.admin-modal [hidden] { display: none; }
.admin-modal__box {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: auto;
    background: var(--mood-bg-card, #181825);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius, 14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
/* Mentre salva, la finestra dice di essere occupata: senza questo si preme
   "Salva" due volte - e la seconda volta arriva prima che la prima sia finita. */
.admin-modal__box.is-busy { opacity: 0.65; pointer-events: none; }
.admin-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--mood-border, #2b2b3d);
}
.admin-modal__title { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.admin-modal__x {
    background: none;
    border: 0;
    color: var(--mood-text-muted, #8b8b9e);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 8px;
    line-height: 0;
}
.admin-modal__x:hover { color: var(--mood-text, #e6e6ef); background: var(--mood-bg-hover, #22222f); }
.admin-modal__x svg { width: 18px; height: 18px; }
.admin-modal__body { padding: 1.15rem; overflow-y: auto; }
.admin-modal__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.9rem 1.15rem;
    border-top: 1px solid var(--mood-border, #2b2b3d);
    background: var(--mood-bg-soft, rgba(255, 255, 255, 0.02));
}
/* Spinge a destra il gruppo di pulsanti di destra (chi li usa lo mette dopo uno
   `spacer`: la scheda dell'opera ha due gruppi, "salva" e "modera"). */
.admin-modal__foot .admin-spacer { flex: 1 1 auto; }

/* --- scheda dell'opera ---------------------------------------------------- */
/* Il pulsante di ascolto: tondo, con la copertina come sfondo quando c'e'.
   Senza copertina resta il segno del play su fondo scuro: si capisce lo stesso. */
.cl-play {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--mood-border, #2b2b3d);
    background-color: var(--mood-bg, #181825);
    background-size: cover;
    background-position: center;
    color: var(--mood-text, #e6e6ef);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.cl-play svg { width: 15px; height: 15px; }
/* Con la copertina sotto, il play ha bisogno di un velo per restare leggibile.
   E l'icona diventa BIANCA: il velo e' scuro, e nel tema chiaro l'icona e' scura -
   senza questo, su una copertina il pulsante sparisce. */
.cl-play--cover { color: #fff; }
.cl-play--cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 14, 0.42);
}
.cl-play svg { position: relative; }
.cl-play:hover { border-color: var(--mood-primary, #6c5ce7); }
.cl-play.is-suona { border-color: var(--mood-primary, #6c5ce7); color: #fff; }
.cl-play.is-suona::before { background: rgba(108, 92, 231, 0.5); }
.cl-play--vuoto { border-style: dashed; opacity: 0.4; cursor: default; }
.cl-th-ascolta, .cl-td-ascolta { width: 46px; text-align: center; }
/* "Elimina" nella riga: il CESTINO (l'icona di Lucide), tondo e in rosso, accanto a
   "Modifica". L'icona e non la parola perche' nella riga lo spazio e' poco; il perche'
   sta nel titolo del pulsante e per intero nella scheda. */
.cl-elimina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    margin-left: 0.5rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: #ff7b8a;
    cursor: pointer;
}
.cl-elimina svg { inline-size: 15px; block-size: 15px; }
.cl-elimina:hover { color: #fff; background: #e74c3c; }
.cl-elimina:focus-visible { outline: 2px solid #e74c3c; outline-offset: 2px; }
.cl-scheda__ascolto { display: inline-flex; align-items: center; gap: 0.4rem; }
/* La zona pericolosa della scheda: separata, in rosso, con la spiegazione. */
.cl-scheda__pericolo {
    margin-top: 1.15rem;
    padding: 0.9rem 1rem;
    border: 1px solid #7a2531;
    border-radius: var(--mood-radius-sm, 10px);
    background: rgba(255, 77, 99, 0.06);
}
.cl-scheda__pericolo h4 {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ff7b8a;
}
.cl-scheda__pericolo .admin-hint { display: block; margin-bottom: 0.6rem; }

/* Su telefono la tabella diventa una scheda per riga: l'ascolto non merita una
   riga sua (un pulsantino solo, spazio buttato). Sta in alto a destra, con il
   titolo: e' l'unica cosa che si guarda per riconoscere un brano. */
@media (max-width: 700px) {
    .admin-table[data-responsive] tr.cl-row { position: relative; }
    .admin-table[data-responsive] td.cl-td-ascolta {
        position: absolute;
        top: 0.5rem;
        right: 0.7rem;
        width: auto;
        border-bottom: 0;
        padding: 0;
    }
    .admin-table[data-responsive] td.cl-td-ascolta::before { content: none; }
    /* Lo spazio perche' il titolo non finisca sotto il pulsante. */
    .admin-table[data-responsive] td[data-label="Titolo"] { padding-right: 4rem; }
    .cl-elimina { margin-left: 0.6rem; }
}
/* non cancellare le mie modifiche!!!!!!!*/
.cl-scheda{
    display: grid;
    gap: 11px;
}
.cl-scheda__testa {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--mood-text-muted, #8b8b9e);
}
.cl-scheda__testa b { color: var(--mood-text, #e6e6ef); font-weight: 600; }
.cl-scheda__blocco { margin-top: 1.1rem; }
.cl-scheda__blocco h4 {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mood-text-muted, #8b8b9e);
}
.cl-scheda__righe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.35rem 1.2rem;
    font-size: 0.85rem;
}
.cl-scheda__righe dt { color: var(--mood-text-muted, #8b8b9e); font-size: 0.78rem; }
.cl-scheda__righe dd { margin: 0 0 0.4rem; word-break: break-word; }
/* La striscia delle azioni di moderazione: sotto i campi, separata, perche' non
   si preme per sbaglio mentre si scrive. */
.cl-scheda__modera {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--mood-border, #2b2b3d);
}
.cl-scheda__modera .admin-hint { display: block; margin-top: 0.35rem; }
.cl-scheda__azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
/* La riga del catalogo si apre: si vede che e' cliccabile. */
.admin-table tbody tr.cl-row { cursor: pointer; }
.admin-table tbody tr.cl-row:hover { background: var(--mood-bg-hover, #22222f); }
.admin-table tbody tr.cl-row:focus-visible { outline: 2px solid var(--mood-primary, #6c5ce7); outline-offset: -2px; }
.cl-edita {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.cl-edita svg { width: 14px; height: 14px; }
@media (max-width: 620px) {
    .admin-modal { padding: 0; align-items: stretch; }
    .admin-modal__box { max-height: 100vh; border-radius: 0; max-width: 100%; }
    .admin-modal__foot .admin-btn { flex: 1 1 auto; justify-content: center; }
}

/* ===============
   MODERAZIONE - Politica - Segnala a mano - Azioni multiple - Selezione coda
   --------------------------------------------------------------------------
   Gerarchia visiva:
   1. Titolo di sezione  -> barretta accent + maiuscoletto, ancora l'occhio
   2. Tile campo         -> bordo, tile attivo si accende d'accento
   3. Valore             -> grande, bold, tabular-nums
   4. Etichetta          -> piccola, maiuscoletto, muted
   5. Nota               -> piu' piccola, corsiva solo dove serve
   Gli switch usano il pattern `.switch` gia' definito nel pannello.
   =============== */


/* ===============
   INTESTAZIONE PANNELLO
   =============== */

.admin-panel > .admin-mod-head { margin-bottom: 1.1rem; }
.admin-panel > .admin-mod-head h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 1rem;
    letter-spacing: -0.005em;
}
.admin-panel > .admin-mod-head h3::before {
    content: "";
    inline-size: 3px;
    block-size: 1.05em;
    border-radius: 2px;
    background: var(--area-accent, var(--mood-primary));
}
.admin-panel > .admin-mod-head .admin-hint {
    display: block;
    margin-top: 0.35rem;
    padding-left: calc(3px + 0.6rem);
    max-width: 78ch;
    line-height: 1.5;
}


/* ===============
   1. POLITICA
   =============== */

.mod-policy {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.mod-policy__gruppo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
    gap: 0.65rem 0.75rem;
    align-items: stretch;
}

/* Titolo di gruppo: barretta accent, maiuscoletto, bordo inferiore */
.mod-policy__gruppo > h4 {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--mood-border);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mood-text);
    line-height: 1.3;
}
.mod-policy__gruppo > h4::before {
    content: "";
    inline-size: 3px;
    block-size: 0.95em;
    border-radius: 2px;
    background: var(--area-accent, var(--mood-primary));
}

.mod-policy__gruppo > .admin-hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--mood-text-muted);
}
.mod-policy__gruppo > .mod-num + .admin-hint {
    margin-top: 0.35rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--mood-border);
}

/* --- Tile numero ---------------------------------------------------------- */

.mod-num {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem 0.9rem 0.85rem;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-primary-light);
    border-radius: 10px;
    cursor: text;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.mod-num:hover { border-color: rgba(255, 255, 255, 0.12); }
.mod-num:focus-within {
    border-color: var(--area-accent, var(--mood-primary));
    background: var(--mood-bg-hover);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--area-accent, var(--mood-primary)) 18%, transparent);
}
/* Campo modificato rispetto al valore salvato: bordo accent a sinistra */
.mod-num.is-changed {
    border-inline-start: 3px solid var(--area-accent, var(--mood-primary));
}
.mod-num.is-changed > span::after {
    content: "\25CF";
    margin-left: 0.35rem;
    color: var(--area-accent, var(--mood-primary));
    font-size: 0.7em;
    vertical-align: middle;
}

.mod-num > span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mood-text-muted);
    line-height: 1.35;
}

.mod-num > input[type="number"] {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--mood-text);
    line-height: 1.1;
    -moz-appearance: textfield;
    appearance: textfield;
}
.mod-num > input[type="number"]::-webkit-outer-spin-button,
.mod-num > input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mod-num > input[type="number"]:focus { outline: none; }
.mod-num > input[type="number"]::placeholder {
    font-size: 0.85rem;
    font-weight: 500;
    font-style: italic;
    color: var(--mood-text-muted);
    opacity: 0.7;
}

/* --- Casella di applicazione -> vero SWITCH ------------------------------- */

.mod-check {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0.95rem;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--mood-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mod-check:hover { border-color: rgba(255, 255, 255, 0.12); }
/* Nascondiamo la checkbox nativa: la disegna .mod-check__slider */
.mod-check > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    inline-size: 0;
    block-size: 0;
}
/* Il pallino dello switch, grande e riconoscibile */
.mod-check::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 2.25rem;
    block-size: 1.25rem;
    border-radius: 999px;
    background: var(--mood-border);
    background-image: radial-gradient(circle at 0.625rem 50%, #fff 0.4rem, transparent 0.42rem);
    background-repeat: no-repeat;
    transition: background-color 0.2s ease, background-position 0.2s ease;
}
.mod-check > b { color: inherit; font-weight: 600; }
.mod-check:has(> input:checked) {
    border-color: var(--area-accent, var(--mood-primary));
    background: color-mix(in srgb, var(--area-accent, var(--mood-primary)) 8%, var(--mood-bg-card));
}
.mod-check:has(> input:checked)::before {
    background-color: var(--area-accent, var(--mood-primary));
    background-position: 1.225rem 50%;
}
.mod-check:has(> input:focus-visible) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--area-accent, var(--mood-primary)) 25%, transparent);
}


/* ===============
   2. SEGNALA A MANO
   =============== */

.mod-segnala {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
    gap: 0.65rem 0.75rem;
    align-items: stretch;
    margin-top: 0.9rem;
}

.mod-segnala > label {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem 0.9rem 0.85rem;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: 10px;
    cursor: text;
    transition: border-color 0.15s ease, background-color 0.15s ease,
                box-shadow 0.15s ease;

    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mood-text-muted);
    line-height: 1.35;
}
.mod-segnala > label:hover { border-color: rgba(255, 255, 255, 0.12); }
.mod-segnala > label:focus-within {
    border-color: var(--area-accent, var(--mood-primary));
    background: var(--mood-bg-hover);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--area-accent, var(--mood-primary)) 18%, transparent);
}

.mod-segnala > label > :is(input, select) {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mood-text);
    line-height: 1.25;
}
.mod-segnala > label > :is(input, select):focus { outline: none; }
.mod-segnala > label > input::placeholder {
    font-weight: 500;
    font-style: italic;
    color: var(--mood-text-muted);
    opacity: 0.7;
}
.mod-segnala > label > input[type="number"] {
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}
.mod-segnala > label > input[type="number"]::-webkit-outer-spin-button,
.mod-segnala > label > input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Select con chevron disegnato, non quello di sistema */
.mod-segnala > label > select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238b8b9e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.15rem center;
    background-size: 0.7rem;
    padding-inline-end: 1.15rem;
}

.mod-segnala__motivo { grid-column: 1 / -1; }

.mod-segnala > .admin-btn {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 0.15rem;
}


/* ===============
   3. AZIONI MULTIPLE - barra coda
   =============== */

.mod-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.75rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.9rem;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius-sm, 10px);
}

/* Conteggio: badge con pallino, tinto d'accento - l'occhio cade qui */
.mod-bulk__count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: color-mix(in srgb, var(--area-accent, var(--mood-primary)) 14%, transparent);
    color: var(--area-accent, var(--mood-primary));
    border: 1px solid color-mix(in srgb, var(--area-accent, var(--mood-primary)) 40%, transparent);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.mod-bulk__count::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--area-accent, var(--mood-primary)) 22%, transparent);
}

/* Campo motivo: bordo propio, placeholder corsivo */
.mod-bulk > input[type="text"] {
    flex: 1 1 16rem;
    min-inline-size: 10rem;
    box-sizing: border-box;
    padding: 0.55rem 0.8rem;
    background: var(--mood-bg);
    color: var(--mood-text);
    border: 1px solid var(--mood-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.86rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mod-bulk > input[type="text"]:focus {
    outline: none;
    border-color: var(--area-accent, var(--mood-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--area-accent, var(--mood-primary)) 18%, transparent);
}
.mod-bulk > input[type="text"]::placeholder {
    color: var(--mood-text-muted);
    font-style: italic;
    opacity: 0.8;
}

/* Pulsanti: il primo e' l'azione principale, il secondo e' di servizio */
.mod-bulk > .admin-btn { flex: 0 0 auto; }
.mod-bulk > .admin-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* Colora "Togli dalla coda" come distruttivo quando c'e' una selezione */
.mod-bulk:has(.mod-bulk__count:not(:empty)) > #modBulkArchivia:not([disabled]) {
    color: #ffb3bd;
    border-color: #7a2531;
}
.mod-bulk:has(.mod-bulk__count:not(:empty)) > #modBulkArchivia:not([disabled]):hover {
    background: rgba(255, 77, 99, 0.1);
    color: #ff7b8a;
}

.admin-spacer { flex: 1 1 auto; min-inline-size: 0; }


/* ===============
   4. CHECKBOX DI TABELLA (modSelTutte + righe) - non piu' quadratini grigi
   =============== */

/* Base: quadratino con bordo, check disegnato quando selezionato */
.admin-table input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    margin: 0;
    border: 1.5px solid var(--mood-border);
    border-radius: 5px;
    background: var(--mood-bg-card);
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease,
                box-shadow 0.15s ease;
}
.admin-table input[type="checkbox"]:hover {
    border-color: var(--area-accent, var(--mood-primary));
}
.admin-table input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--area-accent, var(--mood-primary)) 25%, transparent);
}
.admin-table input[type="checkbox"]:checked {
    background: var(--area-accent, var(--mood-primary));
    border-color: var(--area-accent, var(--mood-primary));
}
/* Il check e' disegnato col bordo di un elemento ruotato: nessuna icona esterna */
.admin-table input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 0.25rem;
    block-size: 0.5rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}
/* Indeterminata (selezione parziale dell'header) */
.admin-table input[type="checkbox"]:indeterminate {
    background: var(--area-accent, var(--mood-primary));
    border-color: var(--area-accent, var(--mood-primary));
}
.admin-table input[type="checkbox"]:indeterminate::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 0.55rem;
    block-size: 2px;
    background: #fff;
    border: 0;
    border-radius: 1px;
    transform: none;
}

/* L'intestazione con la selezione-tutte sta centrata e staccata dal bordo */
.admin-table th > input[type="checkbox"],
.admin-table td > input[type="checkbox"] {
    display: block;
    margin-inline: auto;
}

/* La riga selezionata si accende: barretta accent a sinistra + fondo tinto */
.admin-table tbody tr:has(input[type="checkbox"]:checked) {
    background: color-mix(in srgb, var(--area-accent, var(--mood-primary)) 7%, transparent);
}
.admin-table tbody tr:has(input[type="checkbox"]:checked) > td:first-child {
    box-shadow: inset 3px 0 0 var(--area-accent, var(--mood-primary));
}
/* Le righe pari non devono vincere sulla selezione */
.admin-table tbody tr:nth-child(even):has(input[type="checkbox"]:checked) > td {
    background: transparent;
}


/* ===============
   5. STATO "MODIFICHE NON SALVATE" sulla barra di salvataggio
   =============== */

.mod-savebar__state {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mood-text-muted);
}
.mod-savebar__state.is-dirty {
    color: #fdcb6e;
}
.mod-savebar__state.is-dirty::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
    animation: modPulse 1.6s ease-in-out infinite;
}
.mod-savebar__state.is-saved { color: #2ecc71; }
.mod-savebar__state.is-saved::before {
    content: "\2713";
    font-weight: 700;
}
@keyframes modPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}


/* ===============
   6. RESPONSIVE
   =============== */

@media (max-width: 40rem) {
    .mod-segnala > .admin-btn {
        justify-self: stretch;
        inline-size: 100%;
        justify-content: center;
    }
    .mod-bulk > input[type="text"] { flex-basis: 100%; }
    .mod-bulk > .admin-spacer { display: none; }
    .mod-bulk > .admin-btn { flex: 1 1 auto; justify-content: center; }
}

/* --------- LA GRAFFA CHE MANCAVA ------------------------------------------
   Qui la media query "max-width: 40rem" non veniva chiusa: tutto quello che
   seguiva nel foglio (questo blocco compreso) finiva DENTRO di lei, e quindi
   valeva solo sotto i 640px. Su schermo grande le regole c'erano nel file e non
   si applicavano: e' il motivo per cui l'area sembrava "vestita a meta'" - caselle
   di serie, select bianche, nessuna regola per la colonna delle scelte.
   La graffa qui sopra chiude la media query al posto giusto.
   ------------------------------------------------------------------------- */

/* ===============
   MODERAZIONE - completamento dopo la misura
   --------------------------------------------------------------------------
   Quest'area era vestita a meta': alcuni pezzi non avevano nessuna regola e altri
   erano rimasti allo stile del browser. Non e' un giudizio a occhio: le misure
   (diag_stile_moderazione.py, sulla pagina vera) dicevano cosi' -

     - le select degli stadi: fondo BIANCO e bordo NERO, cioe' i colori di serie
       del browser, dentro un pannello scuro (2 su 2);
     - le caselle di scelta: azzurrine di serie (nel pannello non c'era un
       `accent-color` da nessuna parte);
     - la colonna delle scelte: nessuna regola -> larghezza e allineamento a caso;
     - la griglia degli stadi: tre colonne fisse (250px | 1fr | auto) per schede
       che sono larghe quanto il riquadro -> 371px di griglia in 340 di schermo, e
       una scheda schiacciata a 24px;
     - la cronologia: le righe uscivano di 8px dal riquadro (1147px in 1131);
     - le azioni di riga ("Togli dalla coda", "Limita l'autore", "Togli la
       limitazione"): ammassate una attaccata all'altra, senza separatore.
   =============== */

/* --- Le caselle: il colore dell'area, non quello del browser -------------- */
.admin-wrap input[type="checkbox"],
.admin-wrap input[type="radio"] {
    accent-color: var(--area-accent, var(--mood-primary, #6c5ce7));
}
/* Le rotelle della modalita' (shadow / enforce / off), la casella "seleziona
   tutte", quelle degli stadi e della coda: di serie erano 11px e azzurrine.
   L'elenco e' esplicito apposta: `.mod-check` nasconde la sua casella e la
   ridisegna come interruttore - allargarla qui la farebbe ricomparire. */
#admin-pane-moderation .mod-mode input[type="radio"],
#admin-pane-moderation #modSelTutte,
#admin-pane-moderation .mod-scelta,
#admin-pane-moderation .mod-stage__head input[type="checkbox"],
#admin-pane-moderation .admin-table input[type="checkbox"] {
    inline-size: 15px;
    block-size: 15px;
    margin: 0;
    accent-color: var(--area-accent, var(--mood-primary, #6c5ce7));
}

/* --- Gli stadi: una scheda per riga, larga quanto il riquadro --------------
   La griglia a tre colonne veniva da un disegno che non c'e' piu': il modulo
   disegna UNA scheda per stadio, non tre celle per riga. Con tre colonne le
   schede prendevano larghezze diverse (una 250px, una elastica, una "auto") e la
   prima colonna fissa le faceva uscire dallo schermo. */
.admin-stages {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 0.5rem;
    align-items: start;
}
.mod-stage { min-width: 0; }

/* --- La politica si spiega -------------------------------------------------
   "Non e' chiaro come funziona, non capisco cosa significa": la pagina aveva
   numeri e sigle (csam, grooming, recovery_days) e frasi che davano per scontato
   il funzionamento. Adesso in cima c'e' "come funziona in tre passi", le categorie
   sono scritte in italiano come nel resto dell'area, e in fondo c'e' "in pratica"
   con un caso concreto - che si aggiorna mentre si scrive nei campi. */
#admin-pane-moderation .mod-spiega,
#admin-pane-moderation .mod-esempio {
    margin: 0 0 0.9rem;
    padding: 0.85rem 1rem;
    background: var(--mood-bg-card, #181825);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--mood-text, #e6e6ef);
}
#admin-pane-moderation .mod-spiega {
    border-left: 3px solid var(--area-accent, var(--mood-primary, #6c5ce7));
}
#admin-pane-moderation .mod-esempio {
    margin: 0.9rem 0 0;
    border-left: 3px solid var(--mood-text-muted, #8b8b9e);
}
#admin-pane-moderation .mod-spiega b,
#admin-pane-moderation .mod-esempio b { font-weight: 600; }
#admin-pane-moderation .mod-esempio:empty { display: none; }


/* --- Ogni numero dice cosa significa ---------------------------------------
   "Lieve 60" non vuol dire niente: accanto all'etichetta ci sono l'unita' e la
   fascia di punteggio ("0-2 - in giorni"), e sotto il campo la stessa cosa detta
   come una frase - "se nessuno decide, una segnalazione lieve si chiude da se'
   dopo 60 giorni". La frase si aggiorna mentre si scrive. */
#admin-pane-moderation .mod-num > span small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mood-text-muted, #8b8b9e);
}
#admin-pane-moderation .mod-num__lettura {
    display: block;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--mood-border, #2b2b3d);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    color: var(--mood-text, #e6e6ef);
}
#admin-pane-moderation .mod-num__lettura[hidden] { display: none; }
/* Il pallino "modificato" sta sull'etichetta, non sulla frase. */
#admin-pane-moderation .mod-num.is-changed > .mod-num__lettura::after { content: none; }

/* --- La select degli stadi: gli stessi colori dei campi del pannello --------
   I colori sono quelli di serie del browser (fondo bianco, bordo nero, testo
   11px): la sezione e' `#admin-pane-moderation` apposta, perche' dopo admin.css si
   caricano mood-ui.css e admin-mod-mobile.css e una regola di pari peso perderebbe. */
#admin-pane-moderation .mod-stage__prov select {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
}
#admin-pane-moderation .mod-stage__prov select:focus {
    outline: none;
    border-color: var(--area-accent, var(--mood-primary, #6c5ce7));
}

/* --- La colonna delle scelte (la casella di ogni riga) ---------------------
   Nessuna regola: la colonna prendeva la larghezza che capitava e la casella era
   quella di serie, piccola e azzurra. */
.mod-th-scelta, .mod-td-scelta { inline-size: 44px; text-align: center; }
.mod-td-scelta { vertical-align: middle; }
.mod-th-scelta input, .mod-scelta {
    inline-size: 15px;
    block-size: 15px;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
}

/* --- Le azioni della riga: separate dalla decisione, e distanziate --------- */
.mod-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.9rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--mood-border, #2b2b3d);
}
.mod-azioni .admin-sub { font-size: 0.72rem; }

/* --- Le limitazioni attive: il contenitore non si allarga -----------------
   Il contenitore non aveva regole: `min-width: 0` fa scorrere la tabella dentro
   il suo riquadro invece di allargare la sezione (con le date lunghe succedeva). */
.mod-restrizioni { min-width: 0; }
.mod-restrizioni .admin-table { width: 100%; }
.mod-restrizioni .admin-table td:last-child { white-space: nowrap; }

/* --- La cronologia: lo sconfinamento sul contenitore, non sulla riga -------
   Le righe escono di mezzo rem per lato perche' lo sfondo del passaggio arrivi
   fino al bordo del riquadro. Era fatto sulla RIGA, quindi la riga era piu' larga
   della lista (1147px in 1131) e restava un pezzo fuori: riga di separazione e
   sfondo sbordavano. Lo stesso effetto, ma sul contenitore: e' il padding del
   riquadro ad assorbirlo. */
.mod-history { margin-inline: -0.5rem; }
.mod-hist li { margin: 0; }

/* --- Su telefono: la casella della riga sta in alto a destra, con l'oggetto --
   Nella scheda, la riga "Scelta" da sola era una striscia vuota con una casella
   in mezzo. Sta dove si guarda: nell'angolo, come il pulsante di ascolto del
   catalogo (stesso schema, stessa misura). */
@media (max-width: 700px) {
    .admin-stages { grid-template-columns: minmax(0, 1fr); }
    .admin-table[data-responsive] tbody tr[data-qid] { position: relative; }
    /* Solo sulla scheda CHIUSA: quando la riga e' aperta a tutto schermo
       (`is-open`, admin-mod-mobile.css) l'angolo in alto a destra e' del pulsante
       di chiusura, e la casella ci finirebbe sotto. */
    .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td.mod-td-scelta {
        position: absolute;
        top: 0.55rem;
        right: 0.7rem;
        width: auto;
        border-bottom: 0;
        padding: 0;
    }
    .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td.mod-td-scelta::before { content: none; }
    .admin-table[data-responsive] tbody td.mod-td-scelta .mod-scelta {
        inline-size: 18px;
        block-size: 18px;
    }
    /* Lo spazio perche' l'oggetto non finisca sotto la casella. */
    .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td[data-label="Oggetto"] { padding-right: 3.4rem; }
    .mod-azioni { gap: 0.4rem 0.75rem; }
}

/* ===============
   CREATIVE LAB - intestazioni a fascia e, su telefono, l'opera come fascia
   --------------------------------------------------------------------------
   "Non e' ottimizzato mobile, sballa ... dovrebbe essere stile banner, non sta
   roba primitiva". Misurato prima di scrivere (diag_creative_mobile.py):
   a 390px OGNI OPERA era una scheda alta 317px con nove righe etichetta/valore
   ("Ascolta / Titolo / Tipo / Artista / Stile / Tempo / Licenza / Durata"): la
   sezione "Nel catalogo" arrivava a 4104px e quella in biblioteca a 4074px.
   Le intestazioni erano testo nudo con una barretta di 3px.
   =============== */

/* --- Le intestazioni: una FASCIA, non un titolo nudo ---------------------- */
#admin-pane-creative .admin-card {
    /* Il padding in alto lo mette la fascia: cosi' arriva fino agli angoli. */
    padding: 0 1.15rem 1.05rem;
    overflow: hidden;
}
#admin-pane-creative .admin-card > h3 {
    margin: 0 -1.15rem 0.9rem;
    padding: 0.8rem 1.15rem 0.75rem calc(1.15rem + 0.6rem);
    border-left: 0;
    box-shadow: inset 3px 0 0 var(--area-accent, var(--mood-primary, #6c5ce7));
    background: color-mix(in srgb, var(--area-accent, var(--mood-primary, #6c5ce7)) 12%, transparent);
    border-bottom: 1px solid var(--mood-border, #2b2b3d);
    align-items: center;
    font-size: 1.02rem;
}
/* La riga di spiegazione sta DENTRO la fascia: titolo e sottotitolo sono un
   banner solo, non due cose staccate. */
#admin-pane-creative .admin-card > h3 + .admin-sub {
    margin: -0.9rem -1.15rem 1rem;
    padding: 0 1.15rem 0.7rem calc(1.15rem + 0.6rem);
    background: color-mix(in srgb, var(--area-accent, var(--mood-primary, #6c5ce7)) 12%, transparent);
    border-bottom: 1px solid var(--mood-border, #2b2b3d);
}

@media (max-width: 700px) {
    /* --- L'opera come fascia compatta -------------------------------------
       Non nove righe una sotto l'altra: l'ascolto e il titolo in evidenza, i dati
       minori come prefissi piccoli sulla stessa riga che va a capo, e le azioni
       in fondo a destra. Da 317px a una fascia. */
    #admin-pane-creative .admin-card .admin-table[data-responsive] tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.2rem 0.7rem;
        padding: 0.6rem 0.75rem;
    }
    #admin-pane-creative .admin-card .admin-table[data-responsive] tbody td {
        display: inline-flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0.3rem;
        width: auto;
        padding: 0;
        border-bottom: 0;
        font-size: 0.85rem;
        text-align: left;
    }
    /* L'etichetta diventa un prefisso piccolo, non una riga con il valore a destra. */
    #admin-pane-creative .admin-card .admin-table[data-responsive] tbody td::before {
        position: static;
        margin: 0;
        font-size: 0.68rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--mood-text-muted, #8b8b9e);
        white-space: nowrap;
    }
    /* Ascolta e azioni: nessuna etichetta, l'icona dice gia' cosa fa. */
    #admin-pane-creative .admin-card .admin-table[data-responsive] tbody td[data-label="Ascolta"]::before,
    #admin-pane-creative .admin-card .admin-table[data-responsive] tbody td[data-label=""]::before { content: none; }
    /* Ordine della prima riga: prima l'ascolto, poi il titolo, che prende lo spazio. */
    #admin-pane-creative .admin-card .admin-table[data-responsive] tbody td[data-label="Ascolta"] {
        position: static;
        order: -2;
        width: auto;
    }
    #admin-pane-creative .admin-card .admin-table[data-responsive] tbody td[data-label="Titolo"] {
        order: -1;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        font-size: 0.95rem;
        font-weight: 600;
        white-space: normal;
    }
    /* Le azioni in coda, a destra dell'ultima riga. */
    #admin-pane-creative .admin-card .admin-table[data-responsive] tbody td[data-label=""] {
        margin-left: auto;
        align-items: center;
    }
}
/* ===============
   SOTTO-LINGUETTE (dentro un'area)
   --------------------------------------------------------------------------
   Un'area con dentro sette blocchi diversi e' un monolite: si scorre, non si
   capisce piu' dove si e', e per trovare una cosa bisogna leggere tutto.
   Qui ogni area puo' dividersi in linguette: si vede UNA cosa per volta e la
   striscia dice sempre dove sei. Si disegnano con `MoodAdmin.subtabs()` e si
   fanno funzionare con `MoodAdmin.bindSubtabs()` (vedi admin-core.js): ogni area
   decide solo cosa mettere in ogni pannello.
   =============== */
.admin-subtabs {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin: 0 0 1.1rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed var(--mood-border, #2b2b3d);
    flex-direction: row !important;
}
.admin-subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--mood-text-muted, #8b8b9e);
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 0.42rem 0.72rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.admin-subtab:hover { color: var(--mood-text, #e6e6ef); background: rgba(255, 255, 255, 0.04); }
.admin-subtab.active {
    color: #fff;
    border-bottom-color: var(--mood-primary, #6c5ce7);
    background: rgb(108 92 231 / 74%);
}
.admin-subtab:focus { outline: none; }
.admin-subtab:focus-visible { outline: 2px solid var(--mood-primary, #6c5ce7); outline-offset: 2px; }
/* Il contatore sulla linguetta: dice quante cose aspettano una decisione senza
   costringere ad aprire la linguetta per scoprirlo. */
.admin-subtab__count {
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 1.15rem;
    text-align: center;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--mood-primary, #6c5ce7);
    color: #fff;
}
.admin-subtab__count--warn { background: #e67e22; }
/* ATTENZIONE: un pannello con `display` proprio (flex, grid...) ignora l'attributo
   `hidden`. Questa riga lo rimette al suo posto, altrimenti si vedrebbero tutti
   i pannelli in fila e le linguette sembrerebbero non funzionare. */
.admin-subpanel[hidden] { display: none !important; }

/* ===============
   GRAFICI DELL'AREA (veste da landing page)
   --------------------------------------------------------------------------
   Richiesta del titolare: "deve avere tutti i dati statistici e gli andamenti
   nelle singole tab, e la grafica deve essere di tipo landing page, non tecnica
   che nessuno ci capisce nulla". Quindi: un numero grande, una frase che lo
   spiega, un disegno semplice. Niente assi con le tacche, niente legende da
   decifrare: si guarda e si capisce.
   I disegni li costruisce admin-core.js (serie, barre, ciambella, imbuto);
   qui c'e' soltanto come appaiono.
   =============== */
.adm-grid {display: grid;gap: 1rem;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));margin-bottom: 1rem;}
.adm-tile {
    background: var(--mood-bg-card, #181825);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius, 14px);
    padding: 1rem 1.1rem;
}
.adm-tile__title { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 700; }
.adm-tile__sub { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--mood-text-muted, #8b8b9e); line-height: 1.45; }
.adm-empty-note { font-size: 0.86rem; color: var(--mood-text-muted, #8b8b9e); padding: 0.6rem 0; }

.adm-chart__big { font-size: 2.1rem; font-weight: 800; line-height: 1.1; }
.adm-chart__sub { font-size: 0.84rem; color: var(--mood-text-muted, #8b8b9e); margin-bottom: 0.5rem; }
.adm-chart__svg { display: block; width: 100%; height: 120px; }
.adm-chart__foot { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--mood-text-muted, #8b8b9e); margin-top: 0.2rem; }

.adm-bars { display: flex; flex-direction: column; gap: 0.55rem; }
.adm-bar { display: grid; grid-template-columns: minmax(84px, 38%) 1fr auto; align-items: center; gap: 0.55rem; }
.adm-bar__label { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bar__track { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.adm-bar__fill { display: block; height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.adm-bar__value { font-size: 0.85rem; font-weight: 700; min-width: 3.2rem; text-align: right; }
.adm-bar__note { grid-column: 2 / span 2; font-size: 0.74rem; color: var(--mood-text-muted, #8b8b9e); margin-top: -0.3rem; }

.adm-donut { position: relative; width: 130px; height: 130px; margin: 0 auto; }
.adm-donut svg {width: 100%;height: 100%;transform: rotate(-90deg);background: #faebd754;border-radius: 50%;}
.adm-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.adm-donut__center b { font-size: 1.5rem; }
.adm-donut__center span { font-size: 0.72rem; color: var(--mood-text-muted, #8b8b9e); line-height: 1.2; padding: 0 0.4rem; }

.adm-funnel { display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; }
.adm-funnel__step { text-align: center; padding: 0.55rem 0.7rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--mood-border, #2b2b3d); border-radius: 12px; }
.adm-funnel__n { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.adm-funnel__label { font-size: 0.86rem; font-weight: 600; margin-top: 0.15rem; }
.adm-funnel__note { font-size: 0.74rem; color: var(--mood-text-muted, #8b8b9e); }
.adm-funnel__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); margin-top: 0.45rem; overflow: hidden; }
.adm-funnel__bar span { display: block; height: 100%; background: var(--mood-primary, #6c5ce7); border-radius: 999px; }
.adm-funnel__arrow { text-align: center; font-size: 1.1rem; color: var(--mood-text-muted, #8b8b9e); line-height: 1; }

/* La frase-chiave di una linguetta: in una riga dice cosa stai guardando. */
.adm-lead { font-size: 0.95rem; line-height: 1.5; margin: 0 0 1rem; }

/* ==========================================================================
   SEGNALAZIONI - QUEL CHE E' STATO SEGNALATO (e la sua storia)
   --------------------------------------------------------------------------
   Il commento segnalato si legge anche se l'autore l'ha modificato o tolto: la
   traccia e' nel database (mood_comment_history) e api/admin/reports.php la manda
   al pannello. Richiesta del titolare (16/09/2026): "a lato admin ... deve essere
   tutto tracciato per segnalazioni".
   ========================================================================== */
.rep-testo { white-space: normal; max-width: 380px; }
.rep-firma { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: .78rem; opacity: .85; }
.rep-firma .badge { margin-right: 0; }
.rep-muto { opacity: .6; font-style: italic; }
.rep-dettaglio td { white-space: normal; background: rgba(255, 255, 255, .03); }
.rep-storia { max-width: 760px; font-size: .8rem; line-height: 1.45; }
.rep-storia p { margin: 0 0 8px; opacity: .8; }
.rep-storia ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; }
.rep-quando { opacity: .75; }
.rep-vecchio {
    margin-top: 2px;
    padding: 6px 8px;
    border-left: 2px solid var(--mood-primary, #6c5ce7);
    border-radius: 0 6px 6px 0;
    background: rgba(0, 0, 0, .18);
    white-space: pre-wrap;
}


/* ---- MEDIA: la colonna delle scelte e il riepilogo del dettaglio (23/09/2026) ----
   La casella per scegliere i media da eliminare in gruppo, e il riepilogo leggibile che è la vista di
   partenza del dettaglio (il JSON tecnico resta nella sua linguetta): etichetta in chiaro, valore accanto,
   una riga per volta. */
.med-check {
    width: 18px;
    height: 18px;
    accent-color: var(--mood-primary, #6c5ce7);
    cursor: pointer;
    vertical-align: middle;
}
.admin-kv > div {
    padding: 0.3rem 0;
    border-bottom: 1px dashed var(--mood-border, #2b2b3d);
    font-size: 0.9rem;
    line-height: 1.45;
}
.admin-kv > div:last-child { border-bottom: none; }
.admin-kv b { color: var(--mood-text-muted, #8b8b9e); font-weight: 600; margin-right: 0.35rem; }
.admin-kv a { color: var(--mood-primary, #6c5ce7); }
/* Le linguette dentro un pannello (Riepilogo / JSON): più strette di quelle delle aree, e il «Chiudi»
   spinto a destra. */
.admin-panel .admin-tabs { margin-bottom: 0.9rem; }
#medDetailChiudi { margin-left: auto; }

/* ============================================================
   I CAMPI E LE TENDINE DI QUEST'AREA SI VESTONO QUI (24/09/2026)

   Il titolare, guardando una riga di questa area: «qui i css fatto a botte con i
   css globali... non e' ottimizzato al 100%». Misurato:
     - le regole `select` di `.admin-toolbar`, `.admin-table`, `.admin-field`,
       `.admin-form-row`, `.admin-stage-row`, `.admin-access-bar`,
       `.admin-role-filter`, `.admin-area-filter`, `.algo-field`, `.perm-item`,
       `.mod-stage__prov`, `.mod-dec` stavano in `mood-ui.css` — un foglio
       GLOBALE (lo caricano venti pagine) — e per giunta in DUE copie identiche;
     - su questa pagina quel foglio arrivava DOPO `admin.css`, quindi vinceva lui:
       e' il motivo dei tre `!important` sui badge dei ruoli (adesso tolti);
     - tre classi usate qui non avevano NESSUNA regola — `.admin-input`,
       `.admin-select`, `.admin-table-wrap` — quindi i campi e la tabella del
       pannello Gruppi si vedevano come li disegna il browser.
   Adesso sta tutto qui: un posto, una copia, e la freccia e' quella dell'app
   anche se il foglio globale non arrivasse (il ripiego e' lo stesso data URI che
   usa `groups-app.css`).
   ============================================================ */

/* Le tendine: via la freccia nativa, dentro quella della app. */
.admin-toolbar select,
.admin-table select,
.admin-field select,
.admin-form-row select,
.admin-stage-row select,
.admin-access-bar select,
.admin-role-filter,
.admin-area-filter,
.algo-field select,
.perm-item select,
.mod-stage__prov select,
.mod-dec > select,
.admin-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;
}

/* Dentro tabelle e pillole la freccia sta piu' vicina al bordo (era la regola
   "compatta" che viveva nel foglio globale). */
.admin-table select,
.perm-item select,
.mod-dec > select { background-position: right 9px center; padding-right: 27px; }

/* Queste non avevano un padding proprio: con `appearance: none` il browser non ne
   mette piu' uno di default (su Safari erano alte ~15px, illeggibili). */
.mod-stage__prov select { padding: 0.35rem 27px 0.35rem 0.6rem; }
.perm-item select { padding: 0.25rem 24px 0.25rem 0.4rem; background-position: right 8px center; }

/* LA RICERCA DEL PANNELLO GRUPPI: era `admin-input`, senza nessuna regola.
   Stessa pelle della ricerca delle altre barre (`.admin-toolbar input[type="search"]`). */
.admin-input {
    background: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    min-width: 180px;
    flex: 1 1 220px;
}
.admin-input:focus { outline: none; border-color: var(--mood-primary, #6c5ce7); }

/* Le tendine del pannello Gruppi (`admin-select`): stessa pelle di `.admin-input`,
   con lo spazio a destra per la freccia che hanno gia' preso qui sopra. */
.admin-select {
    background-color: var(--mood-bg-card, #181825);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius-sm, 10px);
    padding: 0.5rem 34px 0.5rem 0.7rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.admin-select:focus { outline: none; border-color: var(--mood-primary, #6c5ce7); }

/* Il contenitore delle tabelle del pannello Gruppi: era `admin-table-wrap`, senza
   regole (su schermo stretto la tabella usciva dalla pagina). */
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: var(--mood-radius, 16px);
}


/* ==========================================================================
   L'AREA «PAGINE LEGALI» (24/09/2026) — l'editor del testo legale
   --------------------------------------------------------------------------
   Segnalazione del titolare: «in admin aggiungi il fatto che posso mettere questi contenuti».
   Qui c'e' solo la veste dei pezzi che quest'area aggiunge a quelli che il pannello ha gia'
   (`admin-card`, `admin-fields`, `admin-field`, `admin-note`, `admin-btn`, `admin-toolbar`):
   la scelta fra le due pagine e il riquadro del testo, che e' lungo e va scritto comodo.
   In coda al foglio, come le altre sezioni aggiunte: si legge come un blocco a se'.
   ========================================================================== */

/* La scelta fra le due pagine: due voci affiancate, quella in uso evidenziata. */
.legale-scelta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}
.legale-scelta__voce {
    background: transparent;
    color: var(--mood-text-muted, #8b8b9e);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.legale-scelta__voce:hover { color: var(--mood-text, #e6e6ef); border-color: var(--mood-primary, #6c5ce7); }
.legale-scelta__voce.is-attiva {
    background: var(--mood-primary, #6c5ce7);
    border-color: var(--mood-primary, #6c5ce7);
    color: #fff;
}

.legale-campi { margin-top: 0.4rem; }

/* Titolo e sottotitolo su una riga (due colonne), il testo sotto a tutta larghezza: e' quello che
   si scrive davvero, e in una colonna da 250px un testo legale non si legge ne' si scrive. */
#admin-pane-legale .legale-campi { grid-template-columns: 1fr 1fr; }
#admin-pane-legale .legale-testo { grid-column: 1 / -1; }

/* I comandi in fila, non impilati: sono due bottoni, non due righe. */
#admin-pane-legale .admin-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Il testo: e' il pezzo che si scrive davvero, quindi spazio, righe comode e carattere a larghezza
   fissa (un Markdown si legge meglio cosi', e le tabelle si allineano). */
.legale-testo textarea {
    width: 100%;
    min-height: 460px;
    padding: 0.85rem 0.95rem;
    background: var(--mood-bg, #101018);
    color: var(--mood-text, #e6e6ef);
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
    line-height: 1.6;
    resize: vertical;
}
.legale-testo textarea:focus {
    outline: none;
    border-color: var(--mood-primary, #6c5ce7);
    box-shadow: inset 0 0 0 1px var(--mood-primary, #6c5ce7);
}
.legale-conta { font-weight: 500; color: var(--mood-text-muted, #8b8b9e); font-size: 0.78rem; }
.legale-manca {
    font-size: 0.72rem;
    font-weight: 700;
    color: #f0c674;
    background: rgba(240, 198, 116, 0.12);
    border: 1px solid rgba(240, 198, 116, 0.3);
    border-radius: 999px;
    padding: 1px 8px;
}

.legale-azioni { align-items: center; gap: 10px; flex-wrap: wrap; }
.legale-azioni .admin-hint { margin-left: auto; }

@media (max-width: 720px) {
    .legale-testo textarea { min-height: 340px; font-size: 0.8rem; }
    .legale-azioni .admin-hint { margin-left: 0; }
}


.adm-lead b { color: var(--mood-primary-light, #a29bfe); }

/* ==========================================================================
   L'AREA «EDITORIALE LSNN» — LA CODA DELLE RICHIESTE (03/10/2026)
   --------------------------------------------------------------------------
   IL TITOLARE, guardando la riga di una richiesta: «miglioralo … rendilo intuitivo …
   responsive … non il solito table». E la tabella, misurata sulla pagina viva il
   03/10/2026 con tre richieste in coda, era questo:
     · telefono 390: le dieci colonne diventavano dieci righe «etichetta: valore» una
       sotto l'altra — 455px per UNA richiesta — e il bottone in fondo, l'unica cosa
       da toccare, era largo 328 e alto 34: una presa al buio, il dito non ci sta;
     · tablet 820: 1558px di tabella dentro una striscia da 786 (772px di colonne
       fuori dalla vista, da raggiungere scorrendo di lato);
     · scrivania 1440: 1558 in 1406 — 152px fuori — e la riga NON si toccava: per
       aprire una richiesta bisognava centrare il bottone.
   ADESSO una richiesta e' una SCHEDA che sta in piedi da sola. Quante ne stanno in
   fila lo decide la larghezza che c'e' (misurate: una sul telefono, due a 820,
   quattro a 1440), e il colore dello stato e' una striscia a sinistra: la prima cosa
   che si guarda scorrendo la coda e' «a che punto e'». Nessuna colonna nascosta, e il
   tocco non deve piu' centrare niente — si tocca la scheda.
   ========================================================================== */
.ed-coda {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* `min(100%, 340px)`: su uno schermo piu' stretto di 340px la colonna si adatta
       invece di sfondare (e' la differenza fra «responsive» e «quasi»). */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 0.9rem;
    align-items: start;   /* le schede non si allungano tutte all'altezza della piu' alta */
}
/* «Carico…» e «la coda e' vuota» sono una riga sola: prendono tutta la larghezza,
   non una cella in mezzo alle altre. */
.ed-coda > .admin-empty { grid-column: 1 / -1; padding: 1.7rem 1rem; }

.ed-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    padding: 0.85rem 0.95rem 0.8rem 1.05rem;
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 14px;
    background: var(--mood-bg-card, #181825);
    --ed-tono: #f1c40f;   /* il colore dello stato, che diventa la striscia a sinistra */
    cursor: pointer;
    transition: border-color 0.15s ease;
}
/* La striscia: un figlio finto, cosi' il modulo non deve disegnare niente in piu'. */
.ed-card::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 9px;
    bottom: 9px;
    width: 4px;
    border-radius: 4px;
    background: var(--ed-tono);
}
/* Gli stessi toni dei distintivi (`st-active`, `st-limited`, `st-blocked`, `st-deleted`):
   giallo = aspetta una risposta, verde = confermata, rosso = rifiutata o annullata. */
.ed-card[data-tono="active"]  { --ed-tono: #2ecc71; }
.ed-card[data-tono="blocked"],
.ed-card[data-tono="deleted"] { --ed-tono: #e74c3c; }
.ed-card:hover { border-color: var(--area-accent, var(--mood-primary, #6c5ce7)); }
/* Col fuoco dentro (il bottone preso da tastiera): bordo acceso e un alone, cosi' si vede
   DOVE si e' — una regola sola per `:focus-within`, o il controllo della struttura la
   conta due volte. */
.ed-card:focus-within {
    border-color: var(--area-accent, var(--mood-primary, #6c5ce7));
    box-shadow: 0 0 0 2px var(--area-tint, rgba(108, 92, 231, 0.12));
}

/* ---------- DENTRO LA SCHEDA ----------
   Le stesse cose che c'erano nella tabella, ma in ordine di lettura: a che punto e'
   (distintivo), chi e' (e se e' di casa), cosa vuole scrivere, quando e fin dove,
   come si contatta, cosa gli abbiamo risposto, e l'azione. */
.ed-card__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ed-card__id {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--mood-text-muted, #8b8b9e);
}
.ed-card__chi { margin: 0; font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.ed-card__sotto { margin: 0; font-size: 0.78rem; line-height: 1.35; color: var(--mood-text-muted, #8b8b9e); }

/* COSA VUOLE SCRIVERE. E' la prima cosa che si legge per decidere, quindi si vede —
   ma fermata a quattro righe: la richiesta intera sta nella scheda che si apre
   toccando, e una scheda lunga tre schermate farebbe una fila di buchi sotto le
   altre. `white-space: pre-line` tiene le righe scritte dalla persona, `anywhere`
   evita che un indirizzo lungo sfondi la scheda.
   NIENTE RESPIRO IN FONDO, ed e' la ragione per cui non c'e': `overflow: hidden`
   chiude sul bordo del PADDING, non su quello del testo — con 0.4rem sotto, la quinta
   riga si vedeva per 3-4px, tagliata a metà (visto nel ritratto della scrivania il
   03/10/2026). Col respiro solo sopra, il taglio cade esattamente dove comincia la
   riga dopo. Lo spazio dalla riga seguente lo fa il `gap` della scheda. */
.ed-card__brief {
    margin: 0.12rem 0 0;
    padding: 0.4rem 0 0 0.6rem;
    border-left: 2px solid var(--mood-border, #2b2b3d);
    font-size: 0.86rem;
    line-height: 1.4;
    white-space: pre-line;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* QUANDO e FIN DOVE: due colonne, etichetta piccola sopra il valore. Restano due
   anche sul telefono — sono brevi, e su una riga sola si leggono a confronto. */
.ed-card__fatti {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.1rem 0.8rem;
    margin: 0.15rem 0 0;
}
.ed-card__fatti dt {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mood-text-muted, #8b8b9e);
}
.ed-card__fatti dd { margin: 0 0 0.3rem; font-size: 0.82rem; line-height: 1.35; overflow-wrap: anywhere; }

/* ---------- I CONTATTI: SI TOCCANO ----------
   Email, telefono e sito sono tre prese con l'icona e la parola. Da un telefono
   l'email si scrive e il numero si chiama con un tocco — prima erano testo in mezzo
   ad altro testo, e per chiamare bisognava ricopiare il numero a mano.
   `.ed-contatto--secco` e' quello che NON ha la forma di un indirizzo (un sito scritto
   «il mio blog»): si legge, e non e' una presa — il modulo decide, qui si veste. */
.ed-card__contatti { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.1rem 0 0; }
.ed-contatto {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.24rem 0.55rem;
    border: 1px solid var(--mood-border, #2b2b3d);
    border-radius: 999px;
    background: var(--mood-surface-muted, rgba(255, 255, 255, 0.03));
    color: var(--mood-text, #e6e6ef);
    font-size: 0.78rem;
    text-decoration: none;
}
.ed-contatto svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--area-accent, var(--mood-primary, #6c5ce7));
}
.ed-contatto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ed-contatto:hover { border-color: var(--area-accent, var(--mood-primary, #6c5ce7)); }
a.ed-contatto:focus-visible {
    outline: 2px solid var(--area-accent, var(--mood-primary, #6c5ce7));
    outline-offset: 1px;
}
.ed-contatto--secco { border-style: dashed; color: var(--mood-text-muted, #8b8b9e); }
.ed-contatto--secco svg { color: var(--mood-text-muted, #8b8b9e); }

/* LA RISPOSTA GIA' SCRITTA: chi riapre una richiesta decisa la ritrova qui, e non
   deve aprire la scheda solo per sapere cosa gli abbiamo risposto. Fermata a tre
   righe, e senza respiro in fondo, per la stessa ragione del testo della richiesta. */
.ed-card__risposta {
    margin: 0.1rem 0 0;
    padding: 0.4rem 0 0 0.6rem;
    border-left: 2px solid var(--ed-tono);
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: pre-line;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ---------- IL PIEDE: LA DATA E L'AZIONE ----------
   `min-height` non e' un vezzo: sul telefono il bottone e' l'unico posto dove si
   mette il dito, e 34px sono sotto la misura di una presa comoda (44px). Fuori da
   qui l'altezza la decideva il padding del testo. */
.ed-card__piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.3rem;
}
.ed-card__data { font-size: 0.72rem; color: var(--mood-text-muted, #8b8b9e); }
.ed-card__apri { flex: 0 0 auto; min-height: 40px; }

/* SUL TELEFONO la scheda prende la riga tutta (una per richiesta: due colonne da
   160px non sono una scheda, sono un indizio) e il piede va in colonna, col bottone
   a tutta larghezza e alto abbastanza da essere una presa. */
@media (max-width: 700px) {
    .ed-coda { grid-template-columns: 1fr; gap: 0.7rem; }
    .ed-card { padding: 0.8rem 0.8rem 0.75rem 0.95rem; }
    .ed-card__piede { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .ed-card__apri { min-height: 46px; }
    .ed-card__fatti { gap: 0.1rem 0.6rem; }
}