/* Redazione de "il Coppolone" — stessa identità, registro utilitario */
:root {
  --lana: #262930;
  --carta: #FBFAF7;
  --pietra: #E8E5DD;
  --persiana: #33604A;
  --persiana-scuro: #27492F;
  --lampione: #E0A93E;
  --grigio: #5C5F58;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --serif: "Piazzolla", Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--display); font-size: 15px; color: var(--lana); background: var(--carta); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--persiana); outline-offset: 1px; }

/* ---- layout ---- */
.admin { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.admin-main { padding: 2rem 2.4rem 4rem; max-width: 1200px; }

.sidebar { background: var(--lana); color: #cfcdc6; padding: 1.4rem 1.2rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-brand { font-weight: 800; font-size: 1.35rem; color: #fff; margin: 0; }
.side-brand em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.6em; vertical-align: 0.25em; color: var(--lampione); }
.side-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0.1rem 0 1.6rem; color: #8f8d85; }
.sidebar nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar nav a { color: #cfcdc6; text-decoration: none; padding: 0.45rem 0.6rem; border-radius: 4px; }
.sidebar nav a:hover { background: #33363e; color: #fff; }
.sidebar nav a.on { background: var(--persiana); color: #fff; }
.side-logout { margin-top: auto; }
.side-logout button { background: none; border: 1px solid #4a4d55; color: #8f8d85; padding: 0.35rem 0.8rem; border-radius: 4px; cursor: pointer; font-family: inherit; }
.side-logout button:hover { color: #fff; border-color: #8f8d85; }

/* ---- intestazioni ---- */
.page-head { display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.page-head h1 { font-weight: 800; font-size: 1.7rem; margin: 0; }
.page-sub { color: var(--grigio); margin: 0; }
.page-stats { display: flex; gap: 1rem; color: var(--grigio); font-size: 0.9rem; }
.stat-alert { color: var(--persiana-scuro); font-weight: 600; }
.section-head { font-weight: 800; font-size: 1.1rem; margin: 2.4rem 0 0.8rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--lana); }

/* ---- tabelle ---- */
.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--pietra); }
.list th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grigio); padding: 0.6rem 0.8rem; border-bottom: 2px solid var(--pietra); }
.list td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--pietra); vertical-align: middle; }
.row-title { font-weight: 600; text-decoration: none; color: var(--lana); }
.row-title:hover { color: var(--persiana-scuro); }
.row-dim { opacity: 0.55; }
.mono { font-family: ui-monospace, monospace; font-size: 0.82rem; }
.linklike { background: none; border: none; color: var(--persiana-scuro); cursor: pointer; padding: 0; font-family: inherit; font-size: inherit; text-decoration: underline; }

/* libreria media */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; max-width: 900px; }
.media-card { border: 1px solid var(--pietra, #E8E5DD); border-radius: 8px; padding: 0.6rem; background: #fff; }
.media-prev { height: 110px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f6f4ef; border-radius: 6px; }
.media-prev img { max-width: 100%; max-height: 110px; object-fit: cover; }
.media-doc { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--grigio, #5C5F58); }
.media-doc span { font-size: 2.4rem; line-height: 1; }
.media-doc small { font-size: 0.7rem; letter-spacing: 0.06em; }
.media-nome { font-size: 0.82rem; margin: 0.5rem 0 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-meta { font-size: 0.72rem; color: var(--grigio, #5C5F58); margin: 0 0 0.4rem; }
.media-azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; }
.media-del { color: #a12 !important; }

/* barra a tab (Impostazioni) */
.tabbar { display: flex; gap: 0.3rem; border-bottom: 2px solid var(--pietra, #E8E5DD); margin-bottom: 1.3rem; }
.tabbar a { padding: 0.5rem 1.1rem; text-decoration: none; color: var(--grigio, #5C5F58); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabbar a.on { color: var(--persiana-scuro, #24462F); border-bottom-color: var(--persiana, #33604A); }

/* stato risorse */
.risorse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 720px; margin-bottom: 1.5rem; }
.risorsa { border: 1px solid var(--pietra, #E8E5DD); border-radius: 10px; padding: 1rem 1.2rem; background: #fff; border-left: 5px solid #ccc; }
.risorsa.ok { border-left-color: #16a34a; }
.risorsa.ko { border-left-color: #dc2626; }
.risorsa-top { font-family: var(--display); font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.risorsa-dot { width: 11px; height: 11px; border-radius: 50%; background: #ccc; display: inline-block; }
.risorsa.ok .risorsa-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.risorsa.ko .risorsa-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.risorsa-stato { font-size: 1.1rem; font-weight: 700; margin: 0.5rem 0 0.2rem; }
.risorsa.ok .risorsa-stato { color: #15803d; }
.risorsa.ko .risorsa-stato { color: #b91c1c; }
.risorsa-nota { font-size: 0.82rem; color: var(--grigio, #5C5F58); margin: 0; }

.tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.5rem; border-radius: 3px; font-weight: 600; }
.tag-pub { background: #dcebe2; color: var(--persiana-scuro); }
.tag-draft { background: var(--pietra); color: var(--grigio); }
.tag-feat { background: #f7e8c6; color: #8a6413; }

/* ---- form ---- */
label { display: block; font-weight: 600; font-size: 0.85rem; margin: 1rem 0 0.3rem; }
.hint { font-weight: 400; color: var(--grigio); }
input[type="text"], input[type="password"], input:not([type]), select, textarea {
  width: 100%; padding: 0.55rem 0.7rem; border: 1px solid #c9c6bd; border-radius: 4px;
  font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--lana);
}
textarea#f-body { font-family: ui-monospace, monospace; font-size: 0.88rem; line-height: 1.55; }
.field-row { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.field-row > div { flex: 1; min-width: 140px; }
.check { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; margin-bottom: 0.6rem; }

.btn { display: inline-block; background: var(--persiana); color: #fff; border: none; padding: 0.55rem 1.2rem; border-radius: 4px; font-family: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--persiana-scuro); }
.btn-ghost { background: transparent; color: var(--persiana-scuro); border: 1px solid var(--persiana); }
.btn-ghost:hover { background: #eef3ef; }
.btn-danger { background: transparent; color: #a33; border: 1px solid #c88; }
.btn-danger:hover { background: #fbeeee; }
.btn:disabled { opacity: 0.5; cursor: wait; }

/* ---- editor ---- */
.editor-cols { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.editor { background: #fff; border: 1px solid var(--pietra); padding: 1.4rem 1.6rem 1.8rem; }
.editor-actions { display: flex; gap: 0.8rem; margin-top: 1.4rem; }

.assist { background: var(--lana); color: #e8e6df; padding: 1.3rem 1.4rem 1.6rem; border-radius: 6px; position: sticky; top: 1.5rem; }
.assist-head { font-weight: 800; font-size: 1.05rem; margin: 0; color: #fff; }
.assist-sub { font-size: 0.82rem; color: #a8a69e; margin: 0.3rem 0 0; }
.assist label { color: #e8e6df; }
.assist select, .assist textarea { background: #33363e; border-color: #4a4d55; color: #fff; }
.assist textarea::placeholder { color: #8f8d85; }
.assist-findings { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.2rem; }
.finding-check { display: flex; gap: 0.5rem; font-weight: 400; font-size: 0.82rem; background: #33363e; padding: 0.5rem 0.6rem; border-radius: 4px; margin: 0; cursor: pointer; line-height: 1.35; }
.finding-check input { width: auto; margin-top: 0.15rem; }
.finding-check small { color: #a8a69e; }
.btn-assist { width: 100%; margin-top: 1.2rem; background: var(--lampione); color: var(--lana); }
.btn-assist:hover { background: #c9942e; }
.assist-status { font-size: 0.82rem; color: var(--lampione); min-height: 1.2em; margin: 0.6rem 0 0; }

/* ---- copertina ---- */
.cover-preview { max-width: 380px; width: 100%; border: 1px solid var(--pietra); margin-bottom: 0.5rem; }
.cover-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.cover-actions input[type="file"] { width: auto; }

/* ---- anteprima ---- */
.preview-dialog { max-width: 720px; width: 90vw; border: none; border-top: 6px solid var(--persiana); padding: 2rem 2.4rem; }
.preview-dialog::backdrop { background: rgba(38, 41, 48, 0.55); }
.preview-body { font-family: var(--serif); font-size: 1.05rem; line-height: 1.7; }
.preview-body h1 { font-family: var(--display); font-weight: 800; line-height: 1.1; }

/* ---- radar ---- */
.finding { display: flex; gap: 1.2rem; justify-content: space-between; background: #fff; border: 1px solid var(--pietra); border-left: 4px solid var(--lampione); padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; }
.finding-dim { border-left-color: var(--pietra); opacity: 0.6; }
.finding-meta { color: var(--grigio); font-size: 0.75rem; margin: 0 0 0.2rem; }
.finding-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 600; }
.finding-summary { font-family: var(--serif); margin: 0 0 0.3rem; font-size: 0.92rem; }
.finding-link { font-size: 0.78rem; color: var(--persiana-scuro); word-break: break-all; }
.finding-actions { display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; align-items: stretch; }
.finding-actions .btn { text-align: center; font-size: 0.82rem; padding: 0.45rem 0.9rem; }

.source-add { background: #fff; border: 1px solid var(--pietra); padding: 1rem 1.4rem 1.4rem; margin-top: 1rem; }
.source-add h3 { margin: 0.2rem 0 0; font-size: 1rem; }
.source-add .btn { margin-top: 1rem; }

.empty-admin { background: #fff; border: 1px dashed #c9c6bd; padding: 2.5rem; text-align: center; color: var(--grigio); }
.empty-admin .btn { margin-top: 0.6rem; }

/* ---- login ---- */
.login-body { display: grid; place-items: center; min-height: 100vh; margin: 0; background: var(--lana); font-family: var(--display); }
.login-card { background: var(--carta); padding: 2.2rem 2.4rem 2.4rem; border-radius: 6px; border-top: 6px solid var(--persiana); width: min(360px, 90vw); }
.login-card .side-brand { color: var(--lana); font-size: 1.6rem; }
.login-card .side-sub { color: var(--grigio); }
.login-card button { width: 100%; margin-top: 1.2rem; background: var(--persiana); color: #fff; border: none; padding: 0.65rem; border-radius: 4px; font-family: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.login-card button:hover { background: var(--persiana-scuro); }
.login-error { background: #fbeeee; color: #a33; padding: 0.5rem 0.8rem; border-radius: 4px; font-size: 0.88rem; }

@media (max-width: 900px) {
  .admin { grid-template-columns: 1fr; }
  .admin-main { padding: 1.2rem 1rem 3rem; overflow-x: hidden; }
  .editor-cols { grid-template-columns: 1fr; }
  .assist { position: static; }

  /* sidebar → barra compatta: brand + esci sulla prima riga, menu scorrevole sotto */
  .sidebar { position: static; height: auto; padding: 0.7rem 1rem 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; }
  .side-brand { font-size: 1.15rem; }
  .side-sub { display: none; }
  .side-logout { margin: 0; grid-column: 2; grid-row: 1; }
  .sidebar nav {
    grid-column: 1 / -1; flex-direction: row; gap: 0.2rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0.4rem -1rem 0; padding: 0 1rem 0.7rem;
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar nav a { white-space: nowrap; padding: 0.5rem 0.7rem; }
}

@media (max-width: 640px) {
  /* niente zoom automatico su iPhone: gli input devono stare ad almeno 16px */
  input[type="text"], input[type="password"], input:not([type]), select, textarea { font-size: 16px; }

  /* tocchi comodi */
  .btn { padding: 0.7rem 1.2rem; }
  .page-head { gap: 0.4rem 1rem; margin-bottom: 1rem; }
  .page-head h1 { font-size: 1.45rem; }

  /* tabelle → schede impilate */
  .list, .list tbody, .list tr, .list td { display: block; }
  .list thead { display: none; }
  .list tr { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--pietra); }
  .list td { padding: 0.1rem 0; border-bottom: none; }
  .list td:empty { display: none; }
  .list .c-title { font-weight: 600; margin-bottom: 0.2rem; }
  .list .c-meta { display: inline-block; margin-right: 0.9rem; color: var(--grigio); font-size: 0.85rem; }
  .list .c-url { overflow-wrap: anywhere; font-size: 0.78rem; color: var(--grigio); }

  /* schede radar: pulsanti in riga sotto il testo */
  .finding { flex-direction: column; gap: 0.7rem; }
  .finding-actions { flex-direction: row; }
  .finding-actions .btn, .finding-actions form { flex: 1; }
  .finding-actions form .btn { width: 100%; }
  .finding-link { overflow-wrap: anywhere; }

  /* editor: salva sempre a portata di pollice */
  .editor { padding: 1rem 1rem 1.2rem; }
  .editor-actions { position: sticky; bottom: 0; background: #fff; padding: 0.8rem 0; margin-top: 1rem; border-top: 1px solid var(--pietra); flex-wrap: wrap; }
  .editor-actions .btn { flex: 1; text-align: center; }
  textarea#f-body { font-size: 16px; }
  .cover-preview { max-width: 100%; }

  .source-add { padding: 0.9rem 1rem 1.2rem; }
  .preview-dialog { padding: 1.4rem 1.2rem; }
}

/* ---- il polso del paese ---- */
.polso-card { background: #fff; border: 1px solid var(--pietra); border-left: 4px solid var(--lampione); padding: 1rem 1.2rem 1.1rem; margin-bottom: 1rem; }
.polso-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.polso-umore { font-weight: 800; text-transform: capitalize; }
.polso-data { color: var(--grigio); font-size: 0.82rem; }
.polso-sintesi { margin: 0 0 0.7rem; line-height: 1.55; }
.polso-temi { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tema { padding: 0.5rem 0.7rem; border-radius: 4px; background: var(--carta); border-left: 3px solid var(--pietra); }
.tema strong { display: inline; margin-right: 0.4rem; }
.tema span { color: var(--grigio); }
.tema-spunto { display: block; margin-top: 0.3rem; color: var(--persiana-scuro); font-size: 0.88rem; }
.tema-positivo { border-left-color: #3f9d5f; }
.tema-negativo { border-left-color: #c0553f; }
.tema-neutro { border-left-color: #b9b3a6; }