/*
 * Postio — CSS condiviso (admin + cliente + pubblico).
 *
 * Questo file contiene TUTTE le variabili e le classi comuni. I layout
 * (admin/_layout.php, cliente/_layout.php, layout.php) lo linkano e
 * conservano nel proprio <style> solo override specifici (max-width
 * della main, colore di accent del topbar, ecc.).
 *
 * Convenzione (CLAUDE.md): nuove pagine usano queste classi. Niente
 * nuovi style="..." inline per spacing o componenti ricorrenti.
 */

/* =========================================================================
   1. VARIABILI
   ========================================================================= */
:root {
    --bg: #fff;
    --fg: #222;
    --muted: #777;
    --accent: #0a4;
    --accent-dark: #073;
    --card: #f7f7f7;
    --border: #e2e2e2;

    /* Stato colors — riusati dai .badge.* e da future feature */
    --ok-bg: #dfd;       --ok-fg: #063;
    --warn-bg: #ffe0a0;  --warn-fg: #7a4500;
    --err-bg: #fcc;      --err-fg: #a30;
    --neutral-bg: #eee;  --neutral-fg: #555;
}

/* =========================================================================
   2. RESET + BASE
   ========================================================================= */
* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    color: var(--fg);
    line-height: 1.5;
    background: var(--bg);
}
h1 { color: var(--accent); margin-top: 0; }
h2 { color: var(--accent-dark); margin-top: 1.5em; font-size: 1.25em; }
code {
    background: var(--card);
    padding: .1em .35em;
    border-radius: 3px;
    font-size: .9em;
    border: 1px solid var(--border);
}

/* =========================================================================
   2b. LAYOUT WRAPPER
   - main default: usato dai layout con topbar (cliente, admin).
   - .larga: variante più larga (admin elenchi).
   - body.pubblico: layout pubblico senza topbar (demo, home, approva, ecc.).
   ========================================================================= */
main {
    max-width: 960px;
    margin: 2em auto;
    padding: 0 1.5em;
}
main.larga { max-width: 1100px; }
body.pubblico {
    max-width: 760px;
    margin: 3em auto;
    padding: 0 1em;
}

/* =========================================================================
   3. TOPBAR (admin + cliente — il colore di sfondo è --accent in entrambi)
   ========================================================================= */
header.topbar {
    background: var(--accent);
    color: #fff;
    padding: .8em 1.5em;
    display: flex;
    align-items: center;
    gap: 1.5em;
    flex-wrap: wrap;
}
header.topbar .brand { font-weight: 700; font-size: 1.1em; }
header.topbar nav {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    flex: 1;
}
header.topbar nav a {
    color: #fff;
    text-decoration: none;
    opacity: .85;
    padding: .2em .4em;
    border-radius: 3px;
}
header.topbar nav a:hover,
header.topbar nav a.attiva {
    opacity: 1;
    background: rgba(255, 255, 255, .18);
}
header.topbar .user { font-size: .9em; opacity: .9; }
header.topbar .user a { color: #fff; text-decoration: underline; }

/* =========================================================================
   4. UTILITY DI TESTO
   ========================================================================= */
.muted { color: var(--muted); font-size: .92em; }

/* =========================================================================
   5. MESSAGGI / FLASH / ERRORI
   ========================================================================= */
.flash   { background: var(--ok-bg);  color: var(--ok-fg);  padding: .7em 1em; border-radius: 4px; margin: 1em 0; }
.errore  { background: var(--err-bg); color: var(--err-fg); padding: .7em 1em; border-radius: 4px; margin: 1em 0; }

/* =========================================================================
   6. BADGE (etichette di stato)
   Copertura completa: stati cliente, stati contenuto, stati job, ecc.
   ========================================================================= */
.badge {
    display: inline-block;
    padding: .15em .55em;
    border-radius: 10px;
    font-size: .78em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* verde — positivo / completato / attivo */
.badge.attivo,
.badge.approvato,
.badge.pubblicato,
.badge.programmato,
.badge.elaborato,
.badge.fatto    { background: var(--ok-bg); color: var(--ok-fg); }

/* giallo — in elaborazione / in attesa di azione */
.badge.demo,
.badge.in_attesa,
.badge.in_revisione,
.badge.in_corso,
.badge.bozza,
.badge.in_coda  { background: var(--warn-bg); color: var(--warn-fg); }

/* grigio — passivo / archiviato */
.badge.archiviato,
.badge.sospeso  { background: var(--neutral-bg); color: var(--neutral-fg); }

/* rosso — fallito / cessato / scartato */
.badge.cessato,
.badge.scartato,
.badge.errore,
.badge.fallito  { background: var(--err-bg); color: var(--err-fg); }

/* =========================================================================
   7. BOTTONI
   ========================================================================= */
.bottone, button {
    display: inline-block;
    padding: .5em 1em;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: .95em;
    font-family: inherit;
}
.bottone.secondario { background: #666; }
.bottone.pericolo   { background: var(--err-fg); }
.bottone.grande     { padding: .7em 1.5em; font-size: 1.05em; font-weight: 600; }
.bottone:hover, button:hover { opacity: .9; }

/* =========================================================================
   8. FORM
   ========================================================================= */
form.dati {
    display: grid;
    gap: .9em;
    max-width: 620px;
}
form.dati label {
    display: block;
    font-size: .92em;
    color: #444;
}
form.dati input,
form.dati select,
form.dati textarea {
    display: block;
    width: 100%;
    padding: .55em;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1em;
    margin-top: .2em;
}
form.dati input[type=range] { padding: 0; }
form.dati .ko {
    color: var(--err-fg);
    font-size: .85em;
    margin-top: .2em;
}
form.dati .gruppo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9em;
}
form.dati .azioni {
    display: flex;
    gap: .6em;
    margin-top: .5em;
    flex-wrap: wrap;
}

/* =========================================================================
   9. TABELLE DATI
   ========================================================================= */
table.dati {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
table.dati th,
table.dati td {
    padding: .5em .7em;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
table.dati th { background: var(--card); font-weight: 600; }
table.dati tr:hover { background: #fafafa; }

/* =========================================================================
   10. CARD
   ========================================================================= */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1em 1.3em;
    margin-bottom: 1em;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1em;
}

/* KPI: numerone in evidenza */
.kpi { display: flex; flex-direction: column; }
.kpi .n {
    font-size: 2em;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}
.kpi .l {
    font-size: .85em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: .3em;
}

/* =========================================================================
   11. VARIANTI DI POST (singola variante per piattaforma)
   ========================================================================= */
.variante-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1em 1.2em;
    margin-bottom: .8em;
}
.variante-card .piatt {
    display: inline-block;
    font-size: .78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--accent);
    margin-bottom: .5em;
}
.variante-card .testo {
    white-space: pre-wrap;
    line-height: 1.55;
}
.variante-card .hash {
    color: var(--accent);
    font-size: .88em;
    margin-top: .6em;
    word-break: break-word;
}

/* =========================================================================
   12. SUBNAV (a schede sotto la topbar — usata in cliente e admin)
   ========================================================================= */
.subnav {
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    margin: 1em 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: .4em;
}
.subnav a {
    padding: .4em .9em;
    text-decoration: none;
    color: #555;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    background: transparent;
}
.subnav a.attiva {
    color: var(--accent);
    background: var(--bg);
    border-color: var(--border);
    font-weight: 600;
}
.subnav a:hover:not(.attiva) { background: rgba(0, 0, 0, .04); }

/* Variante "cliente-header" usata nel pannello operatore per inquadrare
   un cliente specifico (subnav annidata). */
.cliente-header {
    background: var(--card);
    padding: 1em 1.2em;
    border-radius: 6px;
    margin-bottom: 1.5em;
}
.cliente-header .subnav {
    margin-top: .8em;
    margin-bottom: -1px;
    padding-bottom: 0;
}