/* SeriPet Social — inbox operatore. Vanilla, no build. Brand navy/crema/giallo. */
:root{
  --navy:#142b6f; --giallo:#ffd601; --crema:#f9f6ea; --nocciola:#e9e2cf;
  --testo:#1e2540; --muto:#6b7280; --bordo:#d9d2bd; --ok:#1a7a4a; --caldo:#d97706;
  --ig:#c13584; --fb:#1877f2;
}
*{box-sizing:border-box}
body{margin:0;font-family:Baskerville,'Times New Roman',Georgia,serif;background:var(--crema);color:var(--testo);height:100vh;overflow:hidden}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

/* Login */
#login{position:fixed;inset:0;background:var(--navy);display:flex;align-items:center;justify-content:center;z-index:50}
#login .box{background:var(--crema);padding:2.4rem;border-radius:14px;width:min(92vw,380px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#login h1{color:var(--navy);margin:.2rem 0 1.2rem;font-size:1.7rem}
#login input{width:100%;padding:.75rem;border:1px solid var(--bordo);border-radius:8px;font-size:1rem;margin-bottom:.8rem}
#login button{width:100%;padding:.75rem;background:var(--giallo);color:var(--navy);border:none;border-radius:8px;font-weight:bold;font-size:1rem}
#login .err{color:#b91c1c;min-height:1.2em;font-size:.9rem}

/* Layout */
#app{display:flex;flex-direction:column;height:100vh}
header.top{background:var(--navy);color:#fff;padding:.7rem 1.1rem;display:flex;align-items:center;gap:.8rem}
header.top h1{font-size:1.25rem;margin:0;color:var(--giallo)}
header.top .ws{font-size:.75rem;padding:.15rem .5rem;border-radius:99px;background:#334155}
header.top .ws.on{background:var(--ok)}
header.top .sp{flex:1}
header.top button{background:transparent;color:#cbd5e1;border:1px solid #475569;border-radius:6px;padding:.3rem .6rem;font-size:.8rem}
.main{flex:1;display:flex;min-height:0}

/* Inbox list */
.inbox{width:min(42%,460px);border-right:1px solid var(--bordo);display:flex;flex-direction:column;background:#fff}
.filtri{padding:.6rem;display:flex;gap:.4rem;flex-wrap:wrap;border-bottom:1px solid var(--bordo)}
.filtri input,.filtri select{padding:.45rem;border:1px solid var(--bordo);border-radius:7px;font-size:.85rem}
.filtri input{flex:1;min-width:120px}
.filtri label{font-size:.8rem;display:flex;align-items:center;gap:.25rem;color:var(--muto)}
.lista{flex:1;overflow-y:auto}
.riga{padding:.7rem .8rem;border-bottom:1px solid #f0ece0;cursor:pointer;display:flex;gap:.65rem}
.riga:hover{background:var(--crema)}
.riga.sel{background:var(--nocciola)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--giallo);display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.05rem;flex-shrink:0}
.riga .corpo{flex:1;min-width:0}
.riga .nome{font-weight:bold;display:flex;align-items:center;gap:.4rem}
.riga .snippet{color:var(--muto);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.riga .meta{font-size:.72rem;color:var(--muto);margin-top:.15rem;display:flex;gap:.5rem;flex-wrap:wrap}
.badge{font-size:.66rem;padding:.08rem .42rem;border-radius:99px;font-weight:bold}
.badge.ig{background:#fce4f1;color:var(--ig)} .badge.fb{background:#e3edfd;color:var(--fb)}
.badge.cli{background:#dcfce7;color:var(--ok)} .badge.temp{background:#fef3c7;color:var(--caldo)}
.badge.ret{background:#ede9fe;color:#6d28d9} .badge.blocco{background:#fee2e2;color:#b91c1c}
.chip{font-size:.68rem;background:var(--nocciola);color:var(--navy);padding:.05rem .4rem;border-radius:6px}

/* Scheda */
.scheda{flex:1;overflow-y:auto;padding:1.1rem 1.3rem}
.scheda .vuoto{color:var(--muto);text-align:center;margin-top:20vh;font-size:1.1rem}
.scheda h2{color:var(--navy);margin:.1rem 0 .1rem}
.scheda .sub{color:var(--muto);font-size:.9rem;margin-bottom:.8rem}
.card{background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem}
.card h3{margin:.1rem 0 .7rem;color:var(--navy);font-size:1rem;border-bottom:1px solid #eee;padding-bottom:.35rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;font-size:.9rem}
.kv dt{color:var(--muto)} .kv dd{margin:0}
.match{background:linear-gradient(180deg,#eafaf0,#fff);border-color:#bbe6cc}
.msg{padding:.5rem .7rem;border-radius:9px;margin-bottom:.4rem;max-width:85%;font-size:.9rem}
.msg.in{background:var(--nocciola)}
.msg.out{background:var(--navy);color:#fff;margin-left:auto}
.msg .t{font-size:.68rem;color:var(--muto);margin-top:.2rem}
.msg.out .t{color:#c7d2fe}
.com{padding:.5rem .7rem;border-left:3px solid var(--ig);background:#fff;border-radius:0 8px 8px 0;margin-bottom:.5rem}
.com.fb{border-left-color:var(--fb)}
.com .t{font-size:.7rem;color:var(--muto);margin-top:.2rem}
.empty{color:var(--muto);font-size:.85rem;font-style:italic}
.muto{color:var(--muto)}

/* Tab bar */
header.top .tabs{display:flex;gap:.3rem;margin-left:.4rem}
header.top .tab{background:transparent;color:#cbd5e1;border:1px solid transparent;border-radius:7px;padding:.3rem .7rem;font-size:.9rem;display:flex;align-items:center;gap:.35rem}
header.top .tab.attivo{background:var(--giallo);color:var(--navy);font-weight:bold}
.cbadge{background:#b91c1c;color:#fff;border-radius:99px;font-size:.68rem;font-weight:bold;padding:.05rem .4rem;min-width:1.1rem;text-align:center}

/* Vista Coda */
.vistacoda{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--crema)}
.codahead{padding:.8rem 1.2rem;display:flex;align-items:center;gap:.8rem;border-bottom:1px solid var(--bordo);background:#fff}
.codahead h2{color:var(--navy);font-size:1.15rem;margin:0}
.codahead .hint{color:var(--muto);font-size:.82rem;font-weight:normal}
.codahead .mini{margin-left:auto;background:var(--nocciola);color:var(--navy);border:none;border-radius:7px;padding:.35rem .7rem;font-size:.82rem}
.codalista{flex:1;overflow-y:auto;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.9rem;max-width:920px;width:100%;margin:0 auto}
.qcard{background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:.9rem 1rem;transition:opacity .3s}
.qcard.fatta{opacity:.35}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.qwho{font-weight:bold;color:var(--navy);display:flex;align-items:center;gap:.35rem}
.qtipo{font-size:.85rem;color:var(--muto);display:flex;align-items:center;gap:.4rem}
.qcanale{font-size:.66rem;padding:.08rem .45rem;border-radius:99px;font-weight:bold;background:#e3edfd;color:var(--fb)}
.qcanale.commento{background:#fef3c7;color:var(--caldo)}
.qctx{background:var(--crema);border-radius:8px;padding:.5rem .7rem;font-size:.9rem;margin-bottom:.5rem}
.qreason{font-size:.82rem;color:#6d28d9;margin-bottom:.5rem}
.qnote{font-size:.9rem;color:var(--muto);padding:.4rem 0}
.qbozza{width:100%;border:1px solid var(--bordo);border-radius:8px;padding:.55rem;font-family:inherit;font-size:.92rem;resize:vertical;margin-bottom:.5rem}
.qerr{font-size:.78rem;color:#b91c1c;margin-bottom:.4rem}
.qazioni{display:flex;gap:.5rem}
.qazioni .qapprova{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:.45rem 1rem;font-weight:bold;font-size:.88rem}
.qazioni .qapprova:disabled{opacity:.6}
.qazioni .qskip{background:transparent;color:var(--muto);border:1px solid var(--bordo);border-radius:8px;padding:.45rem .9rem;font-size:.88rem}

/* Vista Automazione */
.vistaauto{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--crema)}
.autohead{padding:.8rem 1.2rem;border-bottom:1px solid var(--bordo);background:#fff}
.autohead h2{color:var(--navy);font-size:1.15rem;margin:0}
.autohead .hint{color:var(--muto);font-size:.82rem;font-weight:normal}
.autoform{flex:1;overflow-y:auto;padding:1rem 1.2rem;max-width:720px;width:100%;margin:0 auto}
.autonota{background:#fef3c7;color:#8a5a00;border-radius:9px;padding:.6rem .8rem;font-size:.85rem;margin-bottom:1rem}
.autocard{background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem}
.autocard h3{margin:.1rem 0 .7rem;color:var(--navy);font-size:1rem;border-bottom:1px solid #eee;padding-bottom:.35rem}
.autorow{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;font-size:.92rem;cursor:pointer}
.autorow input{width:1.15rem;height:1.15rem;accent-color:var(--navy)}
.autorow.master{font-weight:bold;color:#b91c1c;border-bottom:1px dashed var(--bordo);padding-bottom:.6rem;margin-bottom:.3rem}
.autonum{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.35rem 0;font-size:.9rem}
.autonum input{width:6rem;padding:.35rem;border:1px solid var(--bordo);border-radius:7px;font-family:inherit}
.salvaauto{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:.55rem 1.2rem;font-weight:bold;font-size:.9rem}
.automsg{margin-left:.8rem;color:var(--ok);font-size:.85rem}
.dmtoggle{margin-top:.3rem;background:var(--nocciola);color:var(--navy);border:none;border-radius:8px;padding:.45rem .9rem;font-size:.85rem;font-weight:bold}

/* Vista Misura (KPI 3 livelli — §9) */
.vistamisura{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--crema)}
.misurahead{padding:.8rem 1.2rem;display:flex;align-items:center;gap:.8rem;border-bottom:1px solid var(--bordo);background:#fff;flex-wrap:wrap}
.misurahead h2{color:var(--navy);font-size:1.15rem;margin:0}
.misurahead .hint{color:var(--muto);font-size:.82rem;font-weight:normal}
.misurahead select.mini,.misurahead .mini{margin-left:auto;background:var(--nocciola);color:var(--navy);border:none;border-radius:7px;padding:.35rem .7rem;font-size:.82rem;font-family:inherit}
.misurahead select.mini{margin-left:auto} .misurahead button.mini{margin-left:0}
.misuralista{flex:1;overflow-y:auto;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:1rem;max-width:960px;width:100%;margin:0 auto}
.mcard{background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:.9rem 1.1rem}
.mcard h3{margin:.1rem 0 .8rem;color:var(--navy);font-size:1rem;border-bottom:1px solid #eee;padding-bottom:.4rem}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.mnote{color:var(--muto);font-size:.78rem;margin-top:.6rem;font-style:italic}
/* funnel bars */
.funnel{display:flex;flex-direction:column;gap:.5rem}
.fbar{display:grid;grid-template-columns:11rem 1fr 5rem;align-items:center;gap:.7rem}
.flabel{font-size:.86rem;color:var(--testo)}
.ftrack{background:var(--nocciola);border-radius:99px;height:1.1rem;overflow:hidden}
.ffill{background:linear-gradient(90deg,var(--navy),#3a54a0);height:100%;border-radius:99px;transition:width .4s}
.fval{font-size:.85rem;text-align:right}
/* efficacia table */
.mtab{width:100%;border-collapse:collapse;font-size:.88rem}
.mtab th,.mtab td{padding:.4rem .5rem;border-bottom:1px solid #f0ece0;text-align:left}
.mtab th{color:var(--muto);font-weight:normal;font-size:.8rem}
.mtab .num{text-align:right}
/* traiettoria temperatura (scheda) */
.traiett{display:flex;align-items:flex-end;gap:.35rem;height:80px;padding:.3rem 0;overflow-x:auto}
.tpunto{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:1.6rem}
.tpunto .tbar{width:1.1rem;background:linear-gradient(180deg,var(--caldo),var(--giallo));border-radius:3px 3px 0 0;min-height:4px}
.tpunto span{font-size:.66rem;color:var(--muto);margin-top:.15rem}

/* Blocco / consenso (GDPR A/C) */
.card.blocco{background:linear-gradient(180deg,#fef2f2,#fff);border-color:#f3c6c6}
.card.blocco h3{color:#b91c1c;border-bottom-color:#f3c6c6}
.blocbtn{margin-top:.5rem;border:none;border-radius:8px;padding:.45rem .9rem;font-size:.85rem;font-weight:bold}
.blocbtn.sblocca{background:var(--ok);color:#fff}
.blocbtn.blocca{background:transparent;color:#b91c1c;border:1px solid #f3c6c6}

/* Vista Moderazione (feature «ban» — NAIA segnala, l'operatore decide) */
.badge.pending{background:#fef3c7;color:#8a5a00}
.cbadge.rossa{background:#b91c1c}
.pendcard{background:linear-gradient(180deg,#fff7ed,#fff);border-color:#f5d9a8}
.pendcard h3{color:#b45309;border-bottom-color:#f5d9a8}
.vistamod{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--crema)}
.modhead{padding:.8rem 1.2rem;display:flex;align-items:center;gap:.8rem;border-bottom:1px solid var(--bordo);background:#fff;flex-wrap:wrap}
.modhead h2{color:var(--navy);font-size:1.15rem;margin:0}
.modhead .hint{color:var(--muto);font-size:.82rem;font-weight:normal}
.modhead .mini{margin-left:auto;background:var(--nocciola);color:var(--navy);border:none;border-radius:7px;padding:.35rem .7rem;font-size:.82rem}
.modlista{flex:1;overflow-y:auto;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.9rem;max-width:920px;width:100%;margin:0 auto}
.modcard{background:#fff;border:1px solid var(--bordo);border-left:4px solid var(--caldo);border-radius:12px;padding:.9rem 1rem}
.modcard.g3{border-left-color:#b91c1c} .modcard.g2{border-left-color:var(--caldo)} .modcard.g1{border-left-color:var(--giallo)}
.modhd{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.modwho{font-weight:bold;color:var(--navy);display:flex;align-items:center;gap:.35rem}
.modmot{font-size:.85rem;color:var(--testo);font-weight:bold}
.modcit{background:#fef2f2;border-radius:8px;padding:.55rem .7rem;font-size:.95rem;margin-bottom:.5rem;color:#7f1d1d}
.modreason{font-size:.82rem;color:#6d28d9;margin-bottom:.5rem}
.modesito{font-size:.8rem;color:var(--ok);margin-bottom:.5rem;font-weight:bold}
.modazioni{display:flex;gap:.5rem;flex-wrap:wrap}
.modbtn{border:1px solid var(--bordo);border-radius:8px;padding:.45rem .8rem;font-size:.85rem;font-weight:bold;background:#fff;color:var(--testo);text-decoration:none;display:inline-flex;align-items:center}
.modbtn.noban{background:var(--ok);color:#fff;border-color:var(--ok)}
.modbtn.conferma{background:#b91c1c;color:#fff;border-color:#b91c1c}
.modbtn.nascondi,.modbtn.elimina{color:var(--caldo);border-color:#f5d9a8}
.modbtn.nascondi.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.modbtn.elimina.primary{background:#b91c1c;color:#fff;border-color:#b91c1c}
.modbtn.iglink{color:var(--ig);border-color:#f3c6e0}
.modhint{font-size:.78rem;color:var(--muto);margin-bottom:.5rem;font-style:italic}

/* Selettore lingua (IT/EN). L'inglese serve agli screencast di Meta App Review,
   che richiedono l'interfaccia in inglese; resta utile come opzione permanente. */
.langsel{background:#334155;color:#e2e8f0;border:1px solid #475569;border-radius:6px;
  padding:.3rem .5rem;font-size:.8rem;font-family:inherit}
#login .langsel{display:block;width:100%;margin-top:.7rem;text-align:center;
  background:#fff;color:var(--navy);border-color:#cbd5e1}
header.top .langsel{margin-right:.4rem}

/* ── Connessione a Meta (Facebook Login for Business, 6 set 2026) ───────────── */
.connesito{border-radius:9px;padding:.7rem .9rem;font-size:.9rem;margin-bottom:1rem;font-weight:600}
.connesito.ok{background:#e7f6ec;color:#1c6b39;border:1px solid #bfe3cd}
.connesito.ko{background:#fdecec;color:#8a2b2b;border:1px solid #f3c9c9}
.connriga{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed #eee;font-size:.9rem}
.connriga:last-child{border-bottom:none}
.connriga span{color:#666}
.connperm{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .2rem}
.perm{background:#f1f1f4;color:#333;border-radius:6px;padding:.2rem .5rem;font-size:.78rem;font-family:ui-monospace,Menlo,Consolas,monospace}
.perm.si{background:#e7f6ec;color:#1c6b39}
.perm.no{background:#fdecec;color:#8a2b2b;text-decoration:line-through}
#vistaConn .mini{background:var(--nocciola);color:var(--navy);border:none;border-radius:7px;padding:.5rem 1rem;font-size:.85rem;margin-left:.6rem}