/* css/theme-default.d/diario.css */
/* 12/10/2026 - lo slot in alto delle liste (ex diario_header.css) non c'e'
   piu': filtri e ricerca stanno nella .vrv-testata. Qui sotto resta solo
   quello che la testata usa ancora. */

/* tendina «righe per pagina» */
.vrv-filter-select {
    min-width: 96px;
    font-weight: 600;
}

.vrv-filter-select {
    padding: 0.42rem 2rem 0.42rem 0.75rem;
    line-height: 1.1;
}

/* la spunta «nel contenuto» */
.vv-slot-tools__check {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    margin: 0;
    white-space: nowrap;
    font-size: 0.95rem;
    line-height: 1;
    /* color: #fc0303; */
    color: #7a4b00;
    /* coerente con palette cream */
}

.vv-slot-tools__check input[type="checkbox"] {
    margin: 0;
    transform: translateY(-1px);
}

/* css/theme-default.d/diario.css */
/* === Diario (Guest + Admin) === */

/* Media responsive */
#pjax-root img,
#pjax-root video,
#pjax-root iframe {
  max-width: 100%;
  height: auto;
}

body.page-diario-lista {
  --vv-maxw: 2400px;
  --vv-top: calc(var(--vv-header-clear, 0px) + 40px);
  --vv-bottom: 24px;
}

body.page-diario-lista.role-admin {
  --vv-badge-pad: clamp(190px, 21vw, 220px);
}

body.page-diario-lista.role-ospite,
body.page-diario-lista.role-anonimo {
  --vv-badge-pad: clamp(200px, 23vw, 240px);
}

/* LA SCHEDA NELLA LISTA - una regola sola (12/10/2026). Il foglio di base
   della .vv-card (vetro, bordo) sta in theme-default.css; qui c'e' solo
   quello che la lista cambia. Il vestito scuro e' in vrv-dark.css. */
body.page-diario-lista .vv-card {
  background: rgba(255, 255, 255, .4);
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, .08);
  box-sizing: border-box;
  padding: .6rem .75rem;
  margin: 0 0 .5rem 0;
}

body.page-diario-lista .vv-card a:hover {
  text-decoration: underline;
}

body.page-diario-lista .vv-post-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* TUTTI I BOTTONI DELLA RIGA ALTI UGUALI (01/11/2026, vitti). Per chi ha
   l'inglese nel Profilo la parola va su due righe: sopra l'italiano, sotto
   l'inglese piccolo (.vrv-en, da vv_lista_t()). L'altezza e' quella delle due
   righe anche in italiano, cosi' la fila non balla. */
body.page-diario-lista .vv-post-actions .btn,
body.page-diario-lista .vv-post-actions .badge,
body.page-diario-lista .vv-post-actions .vv-select,
body.page-diario-lista .vrv-cof-azioni .btn {
  height: 44px;              /* in pixel: in «em» il badge, piu' piccolo, restava basso */
  box-sizing: border-box;
}
body.page-diario-lista .vv-post-actions .btn,
body.page-diario-lista .vv-post-actions .badge,
body.page-diario-lista .vrv-cof-azioni .btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
body.page-diario-lista .vrv-en {
  display: block;
  font-size: .78em;
  font-weight: normal;
  opacity: .85;
}

/* LE TENDINE DI RIGA (visibilita', categoria) - una regola sola, senza
   !important (12/10/2026). Si usano solo qui. Il selettore con la pagina
   davanti basta a vincere sul verde che il tema da' a ogni select; il
   vestito scuro arriva da vrv-dark.css (la regola dei select della lista). */
body.page-diario-lista .vv-select,
body.page-diario-lista .vv-select option {
  background: #fff;
  color: #222;
  -webkit-text-fill-color: currentcolor;   /* Safari: segue il colore */
  text-shadow: none;
}

body.page-diario-lista .vv-select {
  width: 100%;
  max-width: 160px;
  padding: 4px 8px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  appearance: none;                /* via la skin di sistema */
}

body.page-diario-lista .vv-select:focus {
  outline: 2px solid #6b8e23;
  outline-offset: 2px;
}


/* === Dropdown filtri unificati (solo lista admin) === */
.vrv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  align-items: center;
  margin-bottom: .6rem;
}

.vrv-dd {
  position: relative;
}

.vrv-dd__btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .85rem;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid;
  transition: background .12s, color .12s, filter .12s;
  line-height: 1.4;
}

.vrv-dd__arrow {
  font-size: .7em;
  opacity: .7;
  transition: transform .15s;
}

.vrv-dd.is-open .vrv-dd__arrow {
  transform: rotate(180deg);
}

.vrv-dd__menu {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 2000;
  background: #fff;
  color: #222;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  padding: .35rem;
  min-width: 130px;
  flex-direction: column;
  gap: .2rem;
}

.vrv-dd.is-open .vrv-dd__menu {
  display: flex;
}

.vrv-dd__item {
  display: block;
  width: 100%;
  padding: .32rem .75rem;
  border: none;
  border-radius: 7px;
  background: none;
  text-align: left;
  font-size: .85rem;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s;
}

.vrv-dd__item:hover { background: #f0f4f8; }
.vrv-dd__item.is-active { font-weight: 700; }

/* === LA TESTATA DELLA LISTA ADMIN: una riga sola (12/10/2026) ===
   filtri, ordine, righe per pagina, ricerca, e «Nuovo» in fondo a destra.
   Se lo schermo e' stretto va a capo da sola. */
.vrv-testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .6rem;
  /* sopra il riquadro della lista: se no le tendine dei filtri, aprendosi
     verso il basso, ci finiscono sotto (i riquadri sfocano lo sfondo, e chi
     sfoca fa strato a se') */
  position: relative;
  z-index: 5;
}
.vrv-testata .vrv-filter-bar { margin: 0; flex: 0 0 auto; }
.vrv-testata__cerca { flex: 1 1 110px; min-width: 110px; }   /* si prende tutto lo spazio che resta (14/10/2026) */
.vrv-testata .vv-btn--new {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: .42rem .95rem;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  background: #fff3d6;
  color: #9a6400;
  border: 1px solid #e6c98a;
}

/* === Ordinamento per titolo — widget condiviso (admin + guest) === */
.vrv-sort {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  margin-left: .4rem;
  padding: .1rem .3rem;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  white-space: nowrap;
}
.vrv-sort__label {
  font-size: .8rem;
  color: #666;
  margin-right: .15rem;
  white-space: nowrap;
}
.vrv-sort__arrow {
  border: 0;
  background: none;
  padding: .05rem .25rem;
  font-size: 1rem;
  line-height: 1;
  color: #aaa;
  cursor: pointer;
}
.vrv-sort__arrow.is-active {
  color: #3b5bdb;
  font-weight: 700;
}

/* Item colorati per gruppo */
.vrv-dd--cat   .vrv-dd__item { color: #00695c; }
.vrv-dd--stato .vrv-dd__item { color: #b34700; }
.vrv-dd--vis   .vrv-dd__item { color: #4a148c; }

.vrv-dd--cat   .vrv-dd__item:hover { background: rgba(178,223,219,.35); }
.vrv-dd--stato .vrv-dd__item:hover { background: rgba(255,224,130,.35); }
.vrv-dd--vis   .vrv-dd__item:hover { background: rgba(212,168,224,.35); }

/* Categoria — teal */
.vrv-dd--cat .vrv-dd__btn {
  border-color: #9dd5cf;
  background: rgba(220,245,242,.88);
  color: #00695c;
}
.vrv-dd--cat .vrv-dd__btn:hover,
.vrv-dd--cat.is-open .vrv-dd__btn { background: #b2dfdb; }
.vrv-dd--cat.vrv-dd--on .vrv-dd__btn {
  background: #00838f;
  border-color: #00838f;
  color: #fff;
}
.vrv-dd--cat .vrv-dd__item.is-active { color: #00695c; }

/* Stato — amber */
.vrv-dd--stato .vrv-dd__btn {
  border-color: #ffd97a;
  background: rgba(255,249,220,.9);
  color: #b34700;
}
.vrv-dd--stato .vrv-dd__btn:hover,
.vrv-dd--stato.is-open .vrv-dd__btn { background: #ffe082; }
.vrv-dd--stato.vrv-dd--on .vrv-dd__btn {
  background: #e65100;
  border-color: #e65100;
  color: #fff;
}
.vrv-dd--stato .vrv-dd__item.is-active { color: #b34700; }

/* Righe per pagina — blu (14/10/2026: era una <select>, ora pastiglia come le altre) */
.vrv-dd--righe .vrv-dd__btn {
  border-color: #b6c4f0;
  background: rgba(230,236,255,.9);
  color: #2f47a8;
}
.vrv-dd--righe .vrv-dd__btn:hover,
.vrv-dd--righe.is-open .vrv-dd__btn { background: #c5d2fa; }
.vrv-dd--righe .vrv-dd__item { color: #2f47a8; }
.vrv-dd--righe .vrv-dd__item:hover { background: rgba(182,196,240,.35); }

/* Visibilità — violet */
.vrv-dd--vis .vrv-dd__btn {
  border-color: #d4a8e0;
  background: rgba(243,229,245,.9);
  color: #6a1b9a;
}
.vrv-dd--vis .vrv-dd__btn:hover,
.vrv-dd--vis.is-open .vrv-dd__btn { background: #ce93d8; }
.vrv-dd--vis.vrv-dd--on .vrv-dd__btn {
  background: #6a1b9a;
  border-color: #6a1b9a;
  color: #fff;
}
.vrv-dd--vis .vrv-dd__item.is-active { color: #6a1b9a; }

/* ==== IL NUMERO DEL POST e la strisciolina dell'ordine (vitti, 14/10/2026) ====
   «per noi e' difficile capire l'id dei post»: una prima colonna col numero,
   che non si vede finche' il mouse non entra nella lista (piu' marcato sulla
   riga sotto il mouse). Ordinando per numero resta sempre accesa. Sopra il
   primo post, «N°» e «Titolo» ordinano con un clic. */
#vrv-post-list .vv-post-id {
  flex: 0 0 var(--vv-colonna-id);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: .85em;
  opacity: 0;
  transition: opacity .15s;
}
#vrv-post-list .vv-post-titolo { margin-right: auto; }   /* i bottoni restano a destra */
#vrv-post-list:hover .vv-post-id { opacity: .5; }
#vrv-post-list .vv-card:hover > .vv-post-id,
#vrv-post-list.vrv-ord-id .vv-post-id { opacity: 1; }

.vrv-capo {
  display: flex; gap: .75rem;
  padding: 0 calc(.75rem + 1px) .35rem;        /* allineata alle schede (padding + bordo) */
  font-size: .85em;
}
.vrv-capo a { text-decoration: none; opacity: .65; }
.vrv-capo a:hover, .vrv-capo a.is-on { opacity: 1; }
.vrv-capo__id { flex: 0 0 var(--vv-colonna-id); text-align: right; }

/* ==== LA BARRA FERMA (vitti, 14/10/2026: «la barra di scorrimento fa scorrere
   oltre alla lista anche la barra con i bottoni») ====
   Prima scorreva tutto il foglio (#pjax-root), testata compresa. Ora il foglio
   e' una colonna: la testata sta ferma in cima, scorre solo il riquadro dei
   post (e la paginazione, se c'e', resta sotto, ferma anche lei).
   Solo nella lista che ha la testata nuova (quella dell'amministrazione). */
.vv-container--list:has(> .vrv-testata) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vv-container--list:has(> .vrv-testata) > * { flex: 0 0 auto; }
.vv-container--list:has(> .vrv-testata) > #vrv-post-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}