@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Croce Verde – Area riservata (admin) – Tema moderno
   Palette: bianco · verde #6AB978 · blu scuro #293B53 · giallo #FEFF18
   (le eliminazioni restano rosse per sicurezza)
   Questo foglio è caricato solo dalle pagine admin.
   ========================================================================== */

:root {
  --cv-white: #ffffff;
  --cv-green: #6AB978;
  --cv-green-d: #549b62;
  --cv-green-l: rgba(106, 185, 120, 0.12);
  --cv-blu: #293B53;
  --cv-blu-l: #34496a;
  --cv-yellow: #FEFF18;
  --cv-bg: #f4f6f9;
  --cv-ink: #293B53;
  --cv-muted: #6b7a90;
  --cv-border: #e5e9f0;
  --cv-radius: 14px;
  --cv-radius-sm: 9px;
  --cv-shadow: 0 2px 14px rgba(41, 59, 83, 0.08);
  --cv-shadow-lg: 0 14px 44px rgba(41, 59, 83, 0.22);
}

/* ---------- Layout base (sticky footer) ---------- */
html { min-height: 100%; }
/* Riserva lo spazio della barra di scorrimento per evitare che le pagine
   saltino lateralmente. Limitato ai body dell'area riservata: applicato a
   "html" spostava di ~12px anche le pagine pubbliche del tema, se per errore
   caricavano questo foglio. */
body#adminok, body#adminlogin { margin-left: calc(100vw - 100%); }
body#adminok, body#adminlogin {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--cv-bg);
  color: var(--cv-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main {
  flex: 1 0 auto;
}
.style1 { padding-top: 15px; padding-bottom: 15px; }
.style2 { padding-top: 15px; padding-bottom: 15px; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4, h5, .modal-title { font-weight: 700; letter-spacing: -0.01em; }
main h3, main h4 { color: var(--cv-blu); }
main a { color: var(--cv-green-d); font-weight: 600; text-decoration: none; transition: color .15s ease; }
main a:hover { color: var(--cv-blu); text-decoration: none; }

/* ---------- Header / Navbar ---------- */
header {
  background: var(--cv-blu) !important;
  box-shadow: var(--cv-shadow);
  border-bottom: 3px solid var(--cv-green);
}
header .navbar { background: transparent !important; padding-top: .6rem; padding-bottom: .6rem; }
.navbar-brand img { filter: none; }
.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 600;
  border-radius: var(--cv-radius-sm);
  padding: .4rem .8rem !important;
  transition: color .15s ease, background .15s ease;
}
.navbar-nav .nav-link:hover { color: var(--cv-yellow) !important; background: rgba(255, 255, 255, 0.08); }
.navbar-nav .nav-link.active {
  color: #fff !important;
  background: rgba(106, 185, 120, 0.22);
  box-shadow: inset 0 -2px 0 var(--cv-yellow);
}
#btn_logout {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 600;
  border: 0;
  background: transparent;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  /* .btn di Bootstrap centra il testo: in mobile la navbar e' in colonna
     e il Logout risulterebbe centrato rispetto agli altri link */
  text-align: left;
}
#btn_logout:hover { color: var(--cv-yellow) !important; background: rgba(255, 255, 255, 0.08); }
#btn_logout:focus { box-shadow: none; }
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.45);
  padding: .35rem .6rem;
}
/* La navbar ha classe navbar-light su sfondo scuro: le righe dell'hamburger
   sarebbero nere e quindi invisibili. Le forziamo bianche. */
.navbar-light .navbar-toggler-icon,
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 0.25); outline: 0; }
.navbar-toggler:hover { border-color: rgba(255, 255, 255, 0.75); }

/* ---------- Layout admin a tutta larghezza ----------
   Solo le pagine admin hanno <body id="adminok">: le pagine pubbliche
   caricano lo stesso CSS ma hanno <body> semplice, quindi restano invariate.
   La pagina di login (#adminlogin) mantiene la card centrata. */
#adminok .container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
@media (max-width: 767.98px) {
  #adminok .container { padding-left: .9rem; padding-right: .9rem; }
}

/* ---------- Titolo pagina (testata) ---------- */
.testata_admin {
  margin-top: 1.4rem;
}
.testata_admin > .row:first-child h4 {
  position: relative;
  padding-left: .8rem;
}
.testata_admin > .row:first-child h4::before {
  content: "";
  position: absolute;
  left: 0; top: .1em; bottom: .1em;
  width: 5px; border-radius: 4px;
  background: var(--cv-green);
}

/* ---------- Bottoni ---------- */
.btn {
  border-radius: var(--cv-radius-sm);
  font-weight: 600;
  padding: .45rem 1rem;
  transition: all .15s ease;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(106, 185, 120, 0.35); }

/* CTA primarie: verde (Inserisci / Modifica / freccia vai-all'album) */
.btn-primary,
.btn.bg-secondary {
  background-color: var(--cv-green) !important;
  border-color: var(--cv-green) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn.bg-secondary:hover {
  background-color: var(--cv-green-d) !important;
  border-color: var(--cv-green-d) !important;
}
/* Pulsanti "Nuovo/Nuova" (add): verde outline */
.btn-outline-danger {
  color: var(--cv-green-d);
  border-color: var(--cv-green);
  background: transparent;
}
.btn-outline-danger:hover {
  background-color: var(--cv-green);
  border-color: var(--cv-green);
  color: #fff;
}
/* Modifica (matita) / azioni secondarie: blu scuro outline */
.btn-outline-primary {
  color: var(--cv-blu);
  border-color: #c3ccda;
}
.btn-outline-primary:hover {
  background-color: var(--cv-blu);
  border-color: var(--cv-blu);
  color: #fff;
}
/* Annulla: neutro */
.btn-outline-secondary {
  color: var(--cv-muted);
  border-color: #d3dae4;
}
.btn-outline-secondary:hover {
  background-color: #eef1f6;
  border-color: #c3ccda;
  color: var(--cv-blu);
}
/* Eliminazione: ROSSO per sicurezza (bg-danger resta rosso da Bootstrap) */
.btn-danger { border-radius: var(--cv-radius-sm); }

/* ---------- Card / contenitori tabella ---------- */
.testata_admin .table-responsive,
main .table-responsive {
  background: var(--cv-white);
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow);
  padding: .35rem .6rem;
}

/* ---------- Tabelle ---------- */
.table { margin-bottom: 0; color: var(--cv-ink); }
.table thead th {
  border-top: none;
  border-bottom: 2px solid var(--cv-border);
  color: var(--cv-muted);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  font-weight: 700;
}
.table td { border-top: 1px solid var(--cv-border); }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafbfd; }
.table-hover tbody tr { transition: background .12s ease; }
.table-hover tbody tr:hover { background-color: var(--cv-green-l); }
.img-thumbnail {
  border-radius: var(--cv-radius-sm);
  border-color: var(--cv-border);
  padding: 3px;
}

/* ---------- Form ---------- */
.form-control {
  border-radius: var(--cv-radius-sm);
  border-color: #d7deea;
  color: var(--cv-ink);
}
.form-control::placeholder { color: #aab4c4; }
.form-control:focus {
  border-color: var(--cv-green);
  box-shadow: 0 0 0 .2rem rgba(106, 185, 120, 0.22);
}
.col-form-label { color: var(--cv-blu); font-weight: 600; }

/* ---------- Modali ---------- */
.modal-content {
  border: none;
  border-radius: var(--cv-radius);
  overflow: hidden;
  box-shadow: var(--cv-shadow-lg);
}
.modal-header {
  border-bottom: none;
  padding: 1rem 1.25rem;
}
/* Le intestazioni modale erano rosse (bg-danger): ora blu scuro */
.modal-header.bg-danger { background-color: var(--cv-blu) !important; }
.modal-header .close { color: #fff; opacity: .8; text-shadow: none; }
.modal-header .close:hover { color: var(--cv-yellow); opacity: 1; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--cv-border); }

/* ---------- Paginazione ---------- */
.pagination .page-link {
  color: var(--cv-blu);
  border-color: var(--cv-border);
  border-radius: var(--cv-radius-sm) !important;
  margin: 0 2px;
}
.pagination .page-link:hover { background: var(--cv-green-l); color: var(--cv-green-d); }
.pagination .page-item.active .page-link {
  background: var(--cv-green);
  border-color: var(--cv-green);
  color: #fff;
}
.pagination .page-item.disabled .page-link { color: #c2cad6; }

/* ---------- Toast ---------- */
.toast {
  border: none;
  border-left: 4px solid var(--cv-yellow);
  border-radius: var(--cv-radius-sm);
  box-shadow: var(--cv-shadow);
}
.toast-header, .toast-body { color: var(--cv-blu); }

/* ---------- Barra progresso (upload) ---------- */
.progress { border-radius: 20px; background: #e7ecf3; height: .6rem; }
.progress-bar.bg-primary { background-color: var(--cv-green) !important; }

/* ---------- Footer ---------- */
footer.bg-dark { background: var(--cv-blu) !important; }
footer .small { color: rgba(255, 255, 255, 0.7); }

/* ---------- Login (#adminlogin) ---------- */
#adminlogin {
  background: radial-gradient(1100px 560px at 50% -12%, #34496a 0%, #293B53 46%, #1d2c40 100%);
  min-height: 100vh;
}
.cv-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cv-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--cv-white);
  border-radius: 18px;
  padding: 34px 30px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  border-top: 4px solid var(--cv-green);
  text-align: center;
}
.cv-login-logo img { max-width: 180px; height: auto; margin-bottom: 14px; }
.cv-login-title { font-size: 1.5rem; font-weight: 800; color: var(--cv-blu); margin: 0; letter-spacing: -0.02em; }
.cv-login-sub { color: var(--cv-muted); font-size: .9rem; margin: 4px 0 22px; }
.cv-login-card .cv-field { text-align: left; margin-bottom: 16px; }
.cv-login-card .cv-field > label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cv-blu);
  margin-bottom: 6px;
}
.cv-login-card .cv-field > label i { color: var(--cv-green); }
.cv-login-card .form-control {
  height: 46px;
  border-radius: 11px;
  border: 1px solid #d7deea;
  background: #f7f9fc;
  padding: 0 14px;
  font-size: .95rem;
}
.cv-login-card .form-control:focus {
  background: #fff;
  border-color: var(--cv-green);
  box-shadow: 0 0 0 .2rem rgba(106, 185, 120, 0.22);
}
.cv-remember { display: flex; align-items: center; gap: 7px; margin: 0 0 20px 2px; }
.cv-remember input { width: 16px; height: 16px; accent-color: var(--cv-green); }
.cv-remember label { color: var(--cv-muted); font-size: .85rem; margin: 0; }
.cv-login-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--cv-green);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  transition: background .15s ease, transform .05s ease;
}
.cv-login-btn:hover { background: var(--cv-green-d); color: #fff; }
.cv-login-btn:active { transform: translateY(1px); }
.cv-login-btn:disabled { opacity: .75; }
.cv-login-foot { margin-top: 22px; font-size: .75rem; color: #aab4c4; }

/* ---------- Icone thumbs (visibile/non visibile) ---------- */
.fa-thumbs-up { color: var(--cv-green); }
.fa-thumbs-down { color: #c7ced9; }

/* ---------- Preloader e stato vuoto centrati in altezza (2026-10-07) ---------- */
/* main e' gia' flex: 1 nel body flex (sticky footer); diventando a sua volta
   flex in colonna, i contenitori .cv-centro-verticale (rotella di caricamento
   e "Nessun ... inserito") si prendono tutto lo spazio rimasto fra la
   testata della pagina e il footer e ci centrano il contenuto. */
body#adminok main:has(> .cv-centro-verticale) { display: flex; flex-direction: column; }
body#adminok main:has(> .cv-centro-verticale) > .container { flex: 0 0 auto; }
body#adminok main > .container.cv-centro-verticale {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.cv-centro-verticale .row { width: 100%; margin-left: 0; margin-right: 0; }
.cv-centro-verticale h3 { margin-bottom: 0; }

/* ---------- Indicatore di caricamento dati ---------- */
.cv-loading { text-align: center; padding: 46px 0; color: var(--cv-muted); }
.cv-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border: 4px solid rgba(106, 185, 120, 0.25);
  border-top-color: var(--cv-green);
  border-radius: 50%;
  animation: cv-spin .8s linear infinite;
}
.cv-loading-text { font-weight: 600; font-size: .9rem; }
@keyframes cv-spin { to { transform: rotate(360deg); } }

/* ---------- Pulsantino "scarica" accanto al nome file ---------- */
.cv-scarica {
  margin-left: 8px;
  padding: .1rem .4rem;
  line-height: 1.2;
  font-size: .78rem;
  vertical-align: middle;
  border-radius: var(--cv-radius-sm);
}
.cv-scarica i { font-size: .78rem; }

/* In admin-news la colonna Allegato mostra solo il pulsante, senza il nome del
   file che gli sta accanto in admin-download: niente rientro a sinistra. */
.cv-scarica--solo { margin-left: 0; }

/* ---------- Icona sopra le diciture "vuote" (area riservata) ---------- */
/* Stesso concetto delle icone sopra "Al momento non ci sono eventi" ecc. sul
   sito pubblico (assets/css/croceverde.css), ma qui il logo_admin.png gia'
   presente lascia piu' respiro verticale: dimensione doppia (80px contro i
   40px del pubblico) su richiesta di Marco, 2026-09-08. Nota: qui l'area
   riservata carica FontAwesome 4 (fontawesome4/), non lo stesso set del sito
   pubblico - niente prefisso "far"/"fal", solo "fa", e nomi diversi (es.
   fa-calendar-times-o invece di fa-calendar-times, fa-picture-o invece di
   fa-images/fa-image). */
.cv-stato-vuoto__icona {
  display: block;
  font-size: 80px;
  color: rgba(106, 185, 120, .55);
  margin-bottom: 20px;
}

/* Summernote a tutto schermo dentro un modale Bootstrap (2026-10-01)
   Il tema di Summernote non da' sfondo all'editor in modalita' schermo
   intero e usa z-index 1050, lo stesso del modale: il testo finiva
   sovrapposto ai campi del modale. Sfondo bianco, strato sopra tutto,
   area di scrittura che riempie lo schermo. */
.note-editor.note-frame.fullscreen {
  background: #fff;
  z-index: 2000;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.note-editor.note-frame.fullscreen .note-toolbar { flex: 0 0 auto; background: #fff; }
.note-editor.note-frame.fullscreen .note-editing-area { flex: 1 1 auto; min-height: 0; background: #fff; }
.note-editor.note-frame.fullscreen .note-editable { background: #fff; height: 100% !important; }