/* vrp-lab.css - Livrea condivisa della piattaforma VRP (Lab).
 * Classi vrp-* ; il front controller (public/index.php) la carica una volta.
 * Niente stili inline nel PHP: tutto qui. */

:root {
  color-scheme: light dark;

  /* MISURE DEL TESTO DELLA PAGINA D'INGRESSO (11/08/2026).
   * Elena non riusciva a leggerla: al mattino avevo rimpicciolito il TESTO
   * delle cartoline insieme ai riquadri, ma vitti aveva chiesto riquadri piu'
   * piccoli, non parole piu' piccole. Sono due cose diverse e vanno separate.
   * Da qui si tarano tutte insieme, in tre righe: se serve ancora piu' grande
   * si alzano questi numeri e basta, senza rincorrere le regole una per una. */
  --vrp-testo-barra: 17px;   /* barra in alto: voci e tendina */
  --vrp-testo-carta: 17px;   /* titolo delle cartoline */
  --vrp-testo-nota:  14px;   /* sottotitoli, targhette, riquadro UPS */
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--vrp-bg); color: var(--vrp-txt);
  margin: 0; padding: 24px;
}

.vrp-wrap  { max-width: var(--vrp-wrap-max); margin: 0 auto; }
.vrp-muted { color: var(--vrp-mut); }
.vrp-file  { font-family: ui-monospace, monospace; color: var(--vrp-code); }

h1 { font-size: 20px; margin: 0 0 4px; }

/* --- navigazione --- */
.vrp-nav {
  display: flex; align-items: center; gap: var(--vrp-bar-gap);
  margin-bottom: var(--vrp-bar-sotto); padding-bottom: 10px;
  border-bottom: 1px solid var(--vrp-line);
}
.vrp-nav a {
  padding: var(--vrp-bar-pad); border-radius: 7px;
  color: var(--vrp-link); text-decoration: none; font-size: var(--vrp-testo-barra);   /* la barra e' l'annuncio: si legge */
}
.vrp-nav a:hover { background: var(--vrp-panel); }
.vrp-nav a.on    { background: var(--vrp-accent); color: var(--vrp-accent-txt); }

/* Le targhette (canale, host, log) stanno in fila a destra. Solo la PRIMA
   spinge: se il margine automatico ce l'avessero tutte, invece di stare
   affiancate si spargerebbero lungo la barra. */
.vrp-nav-tag {
  margin-left: 6px; font-family: ui-monospace, monospace; font-size: var(--vrp-testo-nota);
  color: var(--vrp-txt); background: var(--vrp-liv3);
  border: 1px solid var(--vrp-line-strong); border-radius: 6px; padding: 3px 9px;
}
.vrp-nav-tag:first-of-type { margin-left: auto; }
.vrp-nav-tag-host { color: var(--vrp-ok); background: var(--vrp-ok-bg); border-color: var(--vrp-ok-line); }
.vrp-nav-tag-log  { color: var(--vrp-warn); background: var(--vrp-warn-bg);  border-color: var(--vrp-warn-line); }

/* --- UPS: talloncino in barra + riquadro intero nella Diagnostica ---
   (20/10/2026: prima il riquadro stava fisso in basso a sinistra sulla foto
   della home, con quattro manopole di posizione; ora non serve piu'.) */
.vrp-ups-pop { position: relative; flex-shrink: 0; }
.vrp-ups-pop > summary { list-style: none; cursor: pointer; user-select: none; margin-left: 6px; white-space: nowrap; }
.vrp-ups-pop > summary::-webkit-details-marker { display: none; }
/* l'allarme backup (21/10/2026): il talloncino e il riquadro sono quelli dell'UPS
   (vrp_backup.php); qui solo la barra di avanzamento, che sta anche nella Diagnostica */
.vrp-backup li span { color: var(--vrp-txt); }
.vrp-backup-vai { display: block; margin-top: 8px; text-align: right; }
.dia-avanz { margin-top: 6px; }
.dia-avanz-bar { height: 10px; border-radius: 5px; background: var(--vrp-liv3); border: 1px solid var(--vrp-line-strong); overflow: hidden; }
.dia-avanz-bar span { display: block; height: 100%; background: var(--vrp-warn); transition: width 1s; }
.dia-avanz-txt { font-size: var(--vrp-testo-nota); margin-top: 3px; }
.vrp-ups-pop-dentro { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; }
.vrp-ups-pop-dentro .vrp-ups { min-width: 250px; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); background: var(--vrp-panel); }
/* la parola dopo i due punti: OK in verde, tutto il resto in rosso (vitti, 20/10/2026) */
.vrp-ups-esito     { font-weight: 700; }
.vrp-ups-esito-ok  { color: var(--vrp-ok); }
.vrp-ups-esito-nok { color: var(--vrp-err); }
.vrp-ups-tag.vrp-ups-ob,
.vrp-ups-tag.vrp-ups-lb,
.vrp-ups-tag.vrp-ups-fsd,
.vrp-ups-tag.vrp-ups-giu { border-color: var(--vrp-err-line); }
.vrp-ups {
  max-width: 340px; padding: 11px 14px;
  background: var(--vrp-panel-a); border: 1px solid var(--vrp-line); border-radius: 10px;
  font-size: var(--vrp-testo-nota); color: var(--vrp-txt);
}
.vrp-ups > b { display: block; margin-bottom: 5px; color: var(--vrp-txt); font-size: 15.5px; }
.vrp-ups ul  { list-style: none; margin: 6px 0 0; padding: 0; }
.vrp-ups li  { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.vrp-ups li span { color: var(--vrp-mut); }
.vrp-ups-stato { display: block; font-weight: 600; }
.vrp-ups-stato small { font-weight: 400; color: var(--vrp-mut); }

/* il colore dice lo stato: verde a rete, ambra a batteria, rosso se grave */
.vrp-ups-ok      { border-color: var(--vrp-ok-line); }
.vrp-ups-ok      .vrp-ups-stato { color: var(--vrp-ok); }
.vrp-ups-ob      { border-color: var(--vrp-warn-line); }
.vrp-ups-ob      .vrp-ups-stato { color: var(--vrp-warn); }
.vrp-ups-lb,
.vrp-ups-fsd     { border-color: var(--vrp-err-line); }
.vrp-ups-lb      .vrp-ups-stato,
.vrp-ups-fsd     .vrp-ups-stato { color: var(--vrp-err); }
.vrp-ups-giu     { border-color: var(--vrp-err-line); }
.vrp-ups-giu-testo { display: block; color: var(--vrp-err); font-weight: 600; }
.vrp-ups small   { display: block; color: var(--vrp-mut); word-break: break-word; }

/* --- tendina "Il server": le porte che non sono servizi di piattaforma ---
   Un <details> travestito da voce di barra: chiuso occupa quanto un link, e la
   foto sotto resta libera. Il click fuori che la chiude e' in public/index.php. */
.vrp-menu { position: relative; }
.vrp-menu > summary {
  list-style: none; cursor: pointer;
  padding: 6px 12px; border-radius: 7px;
  color: var(--vrp-link); font-size: var(--vrp-testo-barra); user-select: none;
}
.vrp-menu > summary::-webkit-details-marker { display: none; }   /* via il triangolino di serie */
.vrp-menu > summary::after { content: " \25BE"; opacity: .7; }   /* il nostro, sempre a destra */
.vrp-menu > summary:hover { background: var(--vrp-panel); }
.vrp-menu[open] > summary { background: var(--vrp-accent); color: var(--vrp-accent-txt); }

.vrp-menu-voci {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 250px; padding: 6px;
  background: var(--vrp-panel); border: 1px solid var(--vrp-line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  /* 01/10 sul TV (scala 275%) la tendina usciva sotto lo schermo: non piu'
     alta della finestra, e se non ci sta scorre dentro di se'. */
  max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--vrp-line) transparent;
}
.vrp-menu-voci a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  color: var(--vrp-txt); text-decoration: none; font-size: var(--vrp-testo-carta);
}
.vrp-menu-voci a:hover { background: var(--vrp-panel2); }
/* un servizio solo-LAN visto da fuori: c'e', ma grigio (22/10/2026, tendina «I servizi») */
.vrp-menu-fuori { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: var(--vrp-testo-carta); opacity: .5; cursor: not-allowed; }
.vrp-menu-ico { font-size: 17px; line-height: 1; width: 22px; text-align: center; }
.vrp-menu-testo { display: flex; flex-direction: column; }
.vrp-menu-testo small { color: var(--vrp-mut); font-size: var(--vrp-testo-nota); }

/* LE SOTTOLISTE (14/10/2026): P2P e Apparati. Il titolo sembra una voce, con
   la freccina a destra; aperta, le sue voci rientrano sotto di lui. */
.vrp-menu-gruppo > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px; list-style: none; cursor: pointer;
  color: var(--vrp-txt); font-size: var(--vrp-testo-carta);
}
.vrp-menu-gruppo > summary::-webkit-details-marker { display: none; }
.vrp-menu-gruppo > summary::after { content: "\25B8"; margin-left: auto; opacity: .7; }
.vrp-menu-gruppo[open] > summary::after { content: "\25BE"; }
.vrp-menu-gruppo > summary:hover { background: var(--vrp-panel2); }
.vrp-menu-sotto { margin: 0 0 4px 22px; padding-left: 6px; border-left: 2px solid var(--vrp-line); }

/* --- cruscotto home ---
   Le cartoline si IMPILANO A DESTRA e sono piu' piccole (vitti, 11/08/2026):
   in fila orizzontale attraversavano lo schermo e tagliavano la foto a meta'.
   Incolonnate lungo il bordo destro lasciano libero tutto il centro. */
/* LO SPAZIO SOPRA LE CARTOLINE SI STRINGE DA SOLO (vitti, 18/09/2026: con le
   5 cartoline di Ditta l'ultima usciva dalla finestra). La livrea di una foto
   puo' farle scendere (--vrp-cards-top, es. 26vh su Vulcano), ma quello spazio
   ora e' un distanziale che CEDE per primo quando manca posto: chi ne ha tre
   le vede giu' come prima, chi ne ha cinque le vede salire quanto serve. */
.vrp-fixed-body:has(> .vrp-cards) { display: flex; flex-direction: column; }
.vrp-fixed-body:has(> .vrp-cards)::before {
  content: ""; flex: 0 1 var(--vrp-cards-top); min-height: 4px;
}
.vrp-fixed-body > .vrp-cards { flex: 0 0 auto; margin-top: 0; }
.vrp-cards {
  display: flex; flex-direction: column; gap: var(--vrp-cards-gap);
  width: var(--vrp-cards-w);
  /* il LATO si dice coi due margini: `auto` spinge, `0` lascia stare */
  margin: var(--vrp-cards-top) var(--vrp-cards-mr) 0 var(--vrp-cards-ml);
}
.vrp-card {
  display: flex; flex-direction: column; gap: 3px;
  flex: 0 0 auto; width: auto; min-width: 0; max-width: none; padding: var(--vrp-card-pad);
  background: var(--vrp-panel); border: 1px solid var(--vrp-line); border-radius: var(--vrp-raggio);
  text-decoration: none; color: var(--vrp-txt);
}
/* titolo su una riga: se troppo lungo scorre invece di allargare la card */
.vrp-card b { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.vrp-card b::-webkit-scrollbar { display: none; }
.vrp-card:hover { border-color: var(--vrp-accent); }
.vrp-card b    { color: var(--vrp-accent); font-size: var(--vrp-testo-carta); }
.vrp-card span { font-size: var(--vrp-testo-nota); color: var(--vrp-mut-2); }

/* --- tabella generica --- */
.vrp-table { border-collapse: collapse; width: 100%; margin-top: 14px; }
.vrp-table td, .vrp-table th {
  border-bottom: 1px solid var(--vrp-line); padding: 6px 9px; font-size: 14px; text-align: left;
}
.vrp-table th { color: var(--vrp-mut); font-weight: 600; }
.vrp-table a  { color: var(--vrp-link); text-decoration: none; }
.vrp-table a:hover { text-decoration: underline; }

/* --- ricerca foto --- */
.vrp-search-warn { color: var(--vrp-err); font-size: 12px; margin-bottom: 12px; }
.vrp-search-form { margin: 14px 0; }
.vrp-search-form input[type=text] {
  padding: 8px 10px; border-radius: 7px; border: 1px solid var(--vrp-line-strong);
  background: var(--vrp-bg); color: var(--vrp-txt); width: min(360px, 70vw);
}
.vrp-search-form button {
  padding: 8px 15px; border: 0; border-radius: 7px;
  background: var(--vrp-accent); color: var(--vrp-accent-txt); cursor: pointer;
}

/* --- pagina configurazione --- */
.vrp-cfg-section {
  background: var(--vrp-panel); border: 1px solid var(--vrp-line); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 16px;
}
.vrp-cfg-section h2 {
  margin: 0 0 12px; font-size: 14px; color: var(--vrp-accent); letter-spacing: .03em;
  border-bottom: 1px solid var(--vrp-line); padding-bottom: 8px;
}
.vrp-cfg-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px;
  align-items: start; padding: 7px 0; border-bottom: 1px solid var(--vrp-line);
}
.vrp-cfg-row:last-child { border-bottom: none; }
.vrp-cfg-label { font-size: 13px; font-weight: 600; color: var(--vrp-mut); padding-top: 6px; }
.vrp-cfg-desc  { display: block; font-size: 12px; color: var(--vrp-mut-2); margin-top: 3px; }
/* piu' tendine nella stessa riga, ognuna col suo nome davanti (Sfondi a rotazione: tessile / naturista) */
.vrp-cfg-sub   { display: flex; align-items: center; gap: .6em; margin-bottom: .35em; }
.vrp-cfg-sub > label { min-width: 6.5em; }
.vrp-cfg-num  { max-width: 6em; }
.vrp-cfg-input {
  width: 100%; box-sizing: border-box; padding: 6px 9px; font-size: 14px;
  background: var(--vrp-bg); color: var(--vrp-txt); border: 1px solid var(--vrp-line-strong); border-radius: 7px;
}
.vrp-cfg-input:focus { outline: none; border-color: var(--vrp-accent); }
select.vrp-cfg-input { cursor: pointer; }
.vrp-cfg-actions { display: flex; gap: 10px; margin-top: 6px; }
.vrp-cfg-btn {
  padding: 9px 20px; border-radius: 8px; border: 1px solid var(--vrp-accent);
  background: var(--vrp-accent); color: var(--vrp-accent-txt); cursor: pointer; font-size: 14px; text-decoration: none;
}
.vrp-cfg-btn:hover { filter: brightness(1.12); }
.vrp-cfg-btn--sm { padding: 4px 12px; font-size: 12px; }
.vrp-cfg-msg     { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.vrp-cfg-msg--ok  { background: var(--vrp-ok-bg); border: 1px solid var(--vrp-ok-line); color: var(--vrp-ok); }
.vrp-cfg-msg--err { background: var(--vrp-err-bg); border: 1px solid var(--vrp-err-line); color: var(--vrp-err); }
.vrp-cfg-bkrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid var(--vrp-line); font-size: 13px;
}
.vrp-cfg-bkrow:last-child { border-bottom: none; }
.vrp-gap-top     { margin-top: 22px; }
.vrp-form-inline { margin: 0; }
.vrp-cfg-ro      { color: var(--vrp-mut); font-size: 13px; font-family: ui-monospace, monospace;
                   padding-top: 4px; word-break: break-all; }

/* --- servizi (config federata) --- */
.vrp-cfg-svc {
  background: var(--vrp-panel); border: 1px solid var(--vrp-line); border-radius: 12px;
  padding: 10px 16px; margin-bottom: 12px;
}
.vrp-cfg-svc > summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--vrp-accent);
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.vrp-cfg-svc > summary::-webkit-details-marker { display: none; }
.vrp-cfg-svc > summary::before { content: "\25B8"; color: var(--vrp-mut-2); }
.vrp-cfg-svc[open] > summary::before { content: "\25BE"; }
.vrp-cfg-json {
  width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px;
  font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.5;
  background: var(--vrp-bg); color: var(--vrp-txt); border: 1px solid var(--vrp-line-strong); border-radius: 8px;
  resize: vertical;
}
.vrp-cfg-json:focus { outline: none; border-color: var(--vrp-accent); }
.vrp-cfg-addsvc { display: flex; gap: 10px; align-items: center; }
.vrp-cfg-addsvc .vrp-cfg-input { max-width: 260px; }

/* --- gestione utenti --- */
.vrp-usr-av    { width:34px; height:34px; border-radius:50%; object-fit:cover;
                 background:var(--vrp-bg); border:1px solid var(--vrp-line-strong); vertical-align:middle; }
.vrp-usr-avph  { display:inline-flex; align-items:center; justify-content:center;
                 width:34px; height:34px; border-radius:50%; background:var(--vrp-panel2);
                 border:1px solid var(--vrp-line-strong); font-size:16px; }
/* --- la soffitta: avatar e motti di prima (profilo) ---
   Le foto qui sono piu' grandi dei 34px della tabella: si guardano, non si
   riconoscono di sfuggita. Il quadrato con l'angolo tondo (e non il cerchio)
   dice da solo che non e' quella in carica. */
.vrp-sof-foto  { display:flex; flex-wrap:wrap; gap:14px; list-style:none;
                 margin:8px 0 0; padding:0; }
.vrp-sof-foto li { display:flex; flex-direction:column; align-items:center; gap:4px;
                   width:104px; text-align:center; }
.vrp-sof-foto img { width:76px; height:76px; border-radius:10px; object-fit:cover;
                    background:var(--vrp-bg); border:1px solid var(--vrp-line-strong); cursor:zoom-in; }
.vrp-sof-btn   { font-size:11px; padding:2px 8px; }
.vrp-sof-motti { list-style:none; margin:4px 0 0; padding:0; }
.vrp-sof-motti li { margin:0 0 3px; }
.vrp-sof-motti q { color:var(--vrp-txt); }
.vrp-usr-motto { display:block; font-size:11px; color:var(--vrp-mut); font-style:italic;
                 max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vrp-usr-chip  { display:inline-block; font-size:11px; font-family:ui-monospace,monospace;
                 color:var(--vrp-accent); background:var(--vrp-panel2); border:1px solid var(--vrp-line); border-radius:6px;
                 padding:1px 7px; margin:1px 2px; }
.vrp-usr-chip b{ color:var(--vrp-ok); font-weight:600; }
.vrp-usr-inline{ display:inline; margin-left:8px; }
.vrp-usr-del   { border-color:var(--vrp-err-line); background:var(--vrp-err-bg); color:var(--vrp-err); }
.vrp-usr-del:hover { filter:brightness(1.25); }
.vrp-usr-roles { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; width:100%; }
.vrp-usr-role label { display:block; font-size:12px; color:var(--vrp-mut); margin-bottom:3px; }
.vrp-usr-avin  { font-size:12px; color:var(--vrp-mut); }
.vrp-usr-pass  { display:flex; gap:8px; align-items:center; }
.vrp-usr-pass .vrp-cfg-input { flex:1; }
.vrp-usr-eye   { background:var(--vrp-panel2); border:1px solid var(--vrp-line-strong); border-radius:7px;
                 color:var(--vrp-accent); cursor:pointer; padding:6px 11px; font-size:15px; line-height:1; }
.vrp-usr-eye:hover { border-color:var(--vrp-accent); }
.vrp-nav-user  { font-size:var(--vrp-testo-nota); color:var(--vrp-ok); padding:3px 9px; border-radius:7px;
                 text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.vrp-nav-user:hover { background:var(--vrp-panel2); }
.vrp-role-ico  { font-size:15px; line-height:1; }
.vrp-nav-av    { width:26px; height:26px; border-radius:50%; object-fit:cover;
                 border:1px solid var(--vrp-line-strong); cursor:zoom-in; }
/* chi sei (faccia, nome, Esci) sempre a DESTRA: se le targhette ci sono sono
   loro a spingere (first-of-type), se no spinge questo gruppo (18/09/2026) */
.vrp-nav-chi   { display:inline-flex; align-items:center; gap:var(--vrp-bar-gap); margin-left:auto; }
.vrp-nav-tag ~ .vrp-nav-chi { margin-left:0; }

/* paginazione elenco (Utenti) */
.vrp-pager     { display:flex; align-items:center; justify-content:center; gap:16px;
                 margin-top:12px; font-size:13px; }
.vrp-pager a   { color:var(--vrp-link); text-decoration:none; padding:4px 10px; border-radius:7px;
                 border:1px solid var(--vrp-line); }
.vrp-pager a:hover { background:var(--vrp-panel2); border-color:var(--vrp-accent); }
.vrp-pager-off { color:var(--vrp-mut-2); padding:4px 10px; border:1px solid var(--vrp-line); border-radius:7px; }
.vrp-pager-pos { color:var(--vrp-mut); font-family:ui-monospace,monospace; }

/* --- selettore colonne (pagina Sessioni) --- */
.vrp-table-wrap { overflow-x: auto; }
.vrp-cols {
  border: 1px solid var(--vrp-line); border-radius: 10px; padding: 8px 14px; margin: 14px 0;
  background: var(--vrp-panel-a);
}
.vrp-cols > summary {
  cursor: pointer; color: var(--vrp-accent); font-size: 13px; list-style: none;
}
.vrp-cols > summary::-webkit-details-marker { display: none; }
.vrp-cols > summary::before { content: "\25B8 "; color: var(--vrp-mut-2); }
.vrp-cols[open] > summary::before { content: "\25BE "; }
.vrp-cols-list { margin-top: 8px; }
.vrp-cols-item {
  display: inline-flex; align-items: center; gap: 5px; margin: 4px 12px 4px 0;
  font-size: 13px; font-family: ui-monospace, monospace; color: var(--vrp-mut); cursor: pointer;
}
.vrp-cols-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.vrp-cols-n { width: 90px; }

/* --- visore log (barra compatta + pannello) --- */
.vrp-log-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-bottom: 10px;
}
.vrp-log-form  { display: contents; }         /* i controlli fluiscono nella barra */
.vrp-log-back  { color: var(--vrp-link); text-decoration: none; font-size: 13px; white-space: nowrap; }
.vrp-log-back:hover { text-decoration: underline; }
.vrp-log-title { font-size: 16px; font-weight: 600; margin-right: 4px; }
.vrp-log-ctl   { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--vrp-mut); }
.vrp-log-ctl .vrp-cfg-input { padding: 4px 7px; font-size: 13px; }
.vrp-log-file  { min-width: 180px; max-width: 320px; }
.vrp-log-n     { width: 74px; }
.vrp-log-info  { margin-left: auto; font-size: 12px; color: var(--vrp-mut); }
.vrp-log-follow { white-space: nowrap; }
.vrp-log-follow.on { color: var(--vrp-ok); font-weight: 600; }
.vrp-log-levels{ display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.vrp-log-lvlbl { font-size: 12px; color: var(--vrp-mut); }
.vrp-log-view {
  background: var(--vrp-panel-a); border: 1px solid var(--vrp-line); border-radius: 8px;
  padding: 12px 14px; overflow: auto; max-height: 70vh;
  font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.5;
  color: var(--vrp-txt); white-space: pre;
}

/* Pagine a tutta finestra (Log, Sessioni, Utenti, Config): SOLO quelle,
 * riconosciute dal loro contenuto via :has(). La pagina non scorre; scorre solo
 * il pannello interno, con lo scrollbar sempre in vista. Log/Sessioni indicano
 * l'elemento scorrevole (.vrp-log-view / .vrp-sess-table); Utenti/Config usano
 * il marcatore generico .vrp-fixed-body (testata in .vrp-fixed-head).
 * Browser senza :has -> restano normali. */
/* ⚠️ LA MISURA E' `svh`, NON `vh` (09/09/2026, il tablet di vitti).
 * Su Android/iOS `100vh` NON e' quello che si vede: e' la finestra GRANDE, cioe'
 * la pagina come sarebbe se la barra dell'indirizzo si ritirasse. Qui la pagina
 * non scorre (`overflow: hidden`), quindi la barra non si ritira mai: il foglio
 * nasce piu' alto dello schermo di quei ~56px e l'ultima striscia diventa
 * IRRAGGIUNGIBILE - sul JukeBox spariva la console con le playing list.
 * `svh` e' la finestra PICCOLA, quella con le barre fuori: e' sempre quello che
 * si vede davvero e non salta mai. Su desktop `svh == vh`, quindi non cambia
 * niente. La riga `vh` resta prima come ripiego per i browser vecchi. */
body:has(.vrp-log-view),
body:has(.vrp-sess-table),
body:has(.vrp-fixed-body) {
  height: 100vh; height: 100svh; overflow: hidden; padding: 12px; box-sizing: border-box;
}
.vrp-wrap:has(.vrp-log-view),
.vrp-wrap:has(.vrp-sess-table),
.vrp-wrap:has(.vrp-fixed-body) {
  max-width: 92%; height: calc(100vh - 24px); height: calc(100svh - 24px);
  display: flex; flex-direction: column;
}
/* i pezzi di testata non si comprimono; a riempire e' il pannello scorrevole */
.vrp-wrap:has(.vrp-log-view)  > *,
.vrp-wrap:has(.vrp-sess-table) > *,
.vrp-wrap:has(.vrp-fixed-body) > * { flex: 0 0 auto; }

/* Utenti/Config: e' .vrp-fixed-body a riempire e scorrere; un filo di spazio a
 * destra perche' lo scrollbar non morda i pannelli. La testata fissa sta sopra. */
.vrp-wrap:has(.vrp-fixed-body) .vrp-fixed-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 8px;
}
.vrp-fixed-head { margin-bottom: 6px; }
.vrp-fixed-head h1 { margin-bottom: 2px; }

/* --- sezione collassabile (details) con testata come un <h2> --- */
.vrp-fold > summary {
  cursor: pointer; list-style: none;
  margin: 0 0 12px; padding-bottom: 8px;
  font-size: 14px; color: var(--vrp-accent); letter-spacing: .03em;
  border-bottom: 1px solid var(--vrp-line);
  display: flex; align-items: center; gap: 8px;
}
.vrp-fold > summary::-webkit-details-marker { display: none; }
.vrp-fold > summary::before { content: "\25B8"; color: var(--vrp-mut-2); }
.vrp-fold[open] > summary::before { content: "\25BE"; }
.vrp-fold:not([open]) > summary { margin-bottom: 0; border-bottom: none; }
.vrp-fold > summary .vrp-muted { font-weight: 400; }

/* Log: e' il <pre> a riempire e scorrere */
.vrp-wrap:has(.vrp-log-view) .vrp-log-view {
  flex: 1 1 auto; min-height: 0; max-height: none; margin: 0;
}
/* Sessioni: e' il contenitore-tabella a riempire e scorrere; intestazione fissa */
.vrp-wrap:has(.vrp-sess-table) .vrp-table-wrap {
  flex: 1 1 auto; min-height: 0; overflow: auto;
}
/* Sessioni: contenitore semi-opaco cosi' le scritte bianche risaltano sullo sfondo */
.vrp-sess-table { background: var(--vrp-panel-a); border-radius: 8px; }
.vrp-sess-table td, .vrp-sess-table th { border-bottom-color: var(--vrp-line-strong); }
.vrp-sess-table thead th {
  position: sticky; top: 0; background: var(--vrp-panel); z-index: 1;
}
/* intestazioni cliccabili per ordinare */
.vrp-sess-table th a.vrp-sort {
  color: var(--vrp-mut); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
}
.vrp-sess-table th a.vrp-sort:hover { color: var(--vrp-txt); }
.vrp-sess-table th a.vrp-sort.on   { color: var(--vrp-accent); }
.vrp-log-line { display: block; }
.vrp-log-lv--ERROR { color: var(--vrp-err); }
.vrp-log-lv--WARN  { color: var(--vrp-warn); }
.vrp-log-lv--TRACE { color: var(--vrp-mut); }
.vrp-log-lv--INFO  { color: var(--vrp-ok); }
.vrp-log-lv--DEBUG { color: var(--vrp-mut-2); }
/* etichette-livello colorate nel filtro */
.vrp-log-levels .vrp-log-lv--ERROR { color: var(--vrp-err); }
.vrp-log-levels .vrp-log-lv--WARN  { color: var(--vrp-warn); }
.vrp-log-levels .vrp-log-lv--TRACE { color: var(--vrp-mut); }
.vrp-log-levels .vrp-log-lv--INFO  { color: var(--vrp-ok); }
.vrp-log-levels .vrp-log-lv--DEBUG { color: var(--vrp-mut-2); }

/* --- wallpaper di contesto (pannelli in trasparenza, stile VRV) --- */
body.vrp-bg {
  background: linear-gradient(var(--vrp-velo-alto), var(--vrp-velo-basso)), var(--vrp-wp, none);
  background-size: cover; background-position: center; background-attachment: fixed;
}
body.vrp-bg .vrp-cfg-section,
body.vrp-bg .vrp-card { background: var(--vrp-panel-a); backdrop-filter: blur(var(--vrp-sfoca)); }

/* sfondi dalla LISTA (22/10/2026): la foto INTERA davanti, e nelle bande la stessa foto
   ingrandita, sfocata e scurita dietro - come nella slideshow (vrp_slideshow.php .sfondo).
   Col solo «cover» le foto verticali perdevano l'alto e il basso. */
body.vrp-sfondi { background: var(--vrp-bg); }
body.vrp-sfondi::before,
body.vrp-sfondi::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body.vrp-sfondi::before {
  z-index: -2; inset: -40px;
  background: var(--vrp-wp, none) center / cover no-repeat;
  filter: blur(10px) brightness(0.95);  /* 0.6 come la slideshow: vitti 22/10 «troppo scura», poi «prova 95%» */
}
body.vrp-sfondi::after {
  z-index: -1;
  background: linear-gradient(var(--vrp-velo-alto), var(--vrp-velo-basso)), var(--vrp-wp, none);
  background-size: cover, contain; background-position: center; background-repeat: no-repeat;
}

/* bottone Esci nella barra */
.vrp-nav-logout {
  margin-left: 6px; padding: 5px 12px; border-radius: 7px; font-size: 13px;
  text-decoration: none; color: var(--vrp-err); background: var(--vrp-err-bg); border: 1px solid var(--vrp-err-line);
}
.vrp-nav-logout:hover { filter: brightness(1.3); }

/* cartolina servizio con wallpaper: sfondo + velo per leggere il testo */
.vrp-card-wp {
  position: relative; overflow: hidden;
  background-image: var(--vrp-card-wp); background-size: cover; background-position: center;
}
.vrp-card-wp::before { content: ""; position: absolute; inset: 0; background: var(--vrp-liv2); }
.vrp-card-wp > * { position: relative; z-index: 1; }
.vrp-card-wp b, .vrp-card-wp span { color: var(--vrp-txt-forte); text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* --- foto NORMALE (niente velo scuro): leggibilita' da pannelli + ombra testo --- */
body.vrp-bg { background: var(--vrp-wp) center/cover fixed no-repeat; }
body.vrp-bg h1,
body.vrp-bg .vrp-muted,
body.vrp-bg .vrp-nav a,
body.vrp-bg .vrp-menu > summary,   /* «Il server»: senza ombra spariva sul cielo (21/10/2026) */
body.vrp-bg .vrp-nav-user { text-shadow: 0 1px 5px rgba(0,0,0,.9); }
body.vrp-bg .vrp-cfg-section,
body.vrp-bg .vrp-card { background: var(--vrp-panel-b); }

/* --- pagine immersive (login / logout): foto piena + pannello traslucido --- */
body.vrp-splash {
  margin: 0; min-height: 100vh; box-sizing: border-box; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vrp-wp) center/cover fixed no-repeat;
  font-family: system-ui, -apple-system, sans-serif;
}
.vrp-splash-click { cursor: pointer; }
.vrp-splash-panel {
  /* velo leggero e NIENTE blur (vitti, 18/09/2026: «si deve vedere un po' di
     foto sotto»); i campi hanno il loro fondo scuro, restano leggibili */
  background: var(--vrp-velo-leggero);
  border: 1px solid var(--vrp-line-strong); border-radius: 18px;
  padding: 32px 38px; text-align: center; width: 100%; max-width: 360px;
  box-shadow: 0 12px 45px rgba(0,0,0,.55);
}
.vrp-splash-title {
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  color: var(--vrp-accent); font-size: 42px; margin: 0 0 4px; text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.vrp-splash-sub { color: var(--vrp-txt); margin: 0 0 20px; font-size: 15px; line-height: 1.5; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.vrp-splash-form { display: flex; flex-direction: column; gap: 12px; }
.vrp-splash-bottoni { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* etichetta ruolo/ospite sulla cartolina servizio */
.vrp-card { position: relative; }
.vrp-card-badge {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  font-size: 12.5px; font-family: ui-monospace, monospace; color: var(--vrp-code);
  background: var(--vrp-liv2); border: 1px solid var(--vrp-line-strong);
  border-radius: 999px; padding: 1px 9px;
}

/* cartolina di un servizio «solo da casa» vista da fuori (29/09/2026):
   grigia, non cliccabile, dice perche'. Niente blur: solo grigio. */
.vrp-card-fuori { filter: grayscale(1); opacity: .55; cursor: not-allowed; }
.vrp-card-fuori:hover { border-color: var(--vrp-line); }

/* login: pannello in alto a destra (sul cielo, non sulle rocce/mare) */
.vrp-splash-tr { align-items: flex-start; justify-content: flex-end; }
.vrp-splash-tr .vrp-splash-panel { margin: 3vh 4vw 0 0; }

/* fix: il selettore deve battere body.vrp-splash (stessa specificita', ordine) */
body.vrp-splash-tr { align-items: flex-start; justify-content: flex-end; }

/* Sessioni: filtri Sessione(vrp_id) + Azione sulla STESSA riga (erano impilati
   perche' .vrp-cfg-input e' width:100%). Etichetta sopra, campo sotto, in fila. */
.vrp-sess-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 8px; }
.vrp-sess-filters > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--vrp-mut); }
.vrp-sess-filters .vrp-cfg-input { width: auto; min-width: 200px; }
.vrp-sess-filters .vrp-cols-n { min-width: 0; width: 72px; }   /* Righe/pag.: campo corto */
.vrp-sess-filters .vrp-cfg-btn { align-self: flex-end; }        /* Applica/Reimposta in fila coi campi */
.vrp-sess-filters .vrp-filter-clear { align-self: center; }

/* --- .vrp-btn: IL BOTTONE GENERICO (09/09/2026) -----------------------------
   Era usato in cinque punti (fogli.php quattro volte, users.php una) ma NON
   ESISTEVA in questo foglio: quei bottoni cadevano sul disegno di serie del
   browser - il «Torna all'elenco» era un link blu sottolineato in mezzo alla
   fotografia. Trovato guardando a video la pagina Fogli, non leggendo il PHP.
   Stesso vestito di .vrp-cfg-btn, che e' il bottone che si vede in giro per la
   piattaforma; --ghost e' la variante in sordina per l'azione secondaria. */
.vrp-btn {
  display: inline-block; padding: 9px 20px; border-radius: 8px;
  border: 1px solid var(--vrp-accent); background: var(--vrp-accent); color: var(--vrp-accent-txt);
  cursor: pointer; font-size: 14px; text-decoration: none; line-height: 1.3;
}
.vrp-btn:hover { filter: brightness(1.12); text-decoration: none; }
.vrp-btn--ghost { border-color: var(--vrp-line-strong); background: var(--vrp-panel); color: var(--vrp-mut); }
.vrp-btn--ghost:hover { background: var(--vrp-panel3); }

/* IL TAB DI UN SERVIZIO (21/10/2026): niente barra, solo «✖ Chiudi» (classe messa
   da uno script in testata se window.name e' «vr-...»; vedi public/index.php) */
.vrp-chiudi-tab { display: none; }
.vrp-tab-servizio .vrp-nav { display: none; }
.vrp-tab-servizio .vrp-chiudi-tab {
  display: block; position: fixed; top: 10px; right: 12px; z-index: 9999;
  background: #2a1420; color: #f2d4de; text-decoration: none; padding: 6px 12px; border-radius: 8px;
  font: 600 13px/1 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
/* la testata della pagina lascia libero l'angolo del «Chiudi» (il JukeBox ci teneva «?») */
.vrp-tab-servizio .vrp-fixed-head { padding-right: 96px; }

/* --- SFONDI A ROTAZIONE (prova 21/10/2026): con foto qualsiasi la barra deve
   leggersi sempre. vitti: «la barra copre troppo! proviamo a metterla in
   verticale»: sugli schermi larghi diventa una colonna stretta a sinistra,
   su una sfumatura scura che svanisce verso la foto. In alto si naviga, in
   basso le targhette tecniche (le spinge giu' il bottone ⏭, il primo). --- */
a.vrp-sfondo-avanti { text-decoration: none; cursor: pointer; white-space: nowrap; }
@media (min-width: 900px) {
  body.vrp-sfondi .vrp-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 190px;
    flex-direction: column; align-items: flex-start; gap: 4px;
    margin: 0; padding: 14px 10px; border: 0; box-sizing: border-box;
    background: none;
  }
  /* l'ombra sta in un foglio a parte (::before) con la maschera che la sfuma
     verso destra: la maschera sulla colonna sbiadirebbe anche le scritte.
     Scura in alto (le voci) e in fondo (le targhette), nel mezzo quasi niente
     (vitti: «troppo scura con le foto chiare, in mezzo deve quasi sparire»). */
  body.vrp-sfondi .vrp-nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(0,0,0,.55) 0, rgba(0,0,0,.45) 190px, rgba(0,0,0,.06) 300px,
      rgba(0,0,0,.06) calc(100% - 200px), rgba(0,0,0,.5) 100%);
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
            mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  }
  body.vrp-sfondi .vrp-nav > a,
  body.vrp-sfondi .vrp-menu > summary { padding: 5px 10px; }
  body.vrp-sfondi .vrp-nav-tag,
  body.vrp-sfondi .vrp-ups-pop > summary { margin-left: 0; }
  body.vrp-sfondi .vrp-nav-tag:first-of-type { margin-left: 0; }
  /* il ⏭ subito sotto «Il server»; le targhette tecniche giu' in fondo */
  body.vrp-sfondi .vrp-sfondo-avanti { margin-top: 4px; }
  body.vrp-sfondi .vrp-sfondo-avanti + .vrp-nav-tag { margin-top: auto; }
  /* chi sei (faccia, nome, Esci) resta in alto a destra, su un fondino (vitti) */
  body.vrp-sfondi .vrp-nav-chi {
    position: fixed; top: 10px; right: 14px; margin: 0;
    background: rgba(0,0,0,.5); border-radius: 12px; padding: 4px 6px 4px 8px;
  }
  body.vrp-sfondi .vrp-nav * { white-space: nowrap; }
  /* le tendine si aprono verso destra, non sotto */
  body.vrp-sfondi .vrp-menu-voci,
  body.vrp-sfondi .vrp-ups-pop-dentro { top: 0; left: calc(100% + 8px); right: auto; }
  body.vrp-sfondi .vrp-ups-pop-dentro { top: auto; bottom: 0; }
  /* posto per la colonna, ma NON nei tab dei servizi, dove la barra non c'e'
     (catalogo e mulo uscivano spostati e tagliati, vitti 21/10 sera) */
  html:not(.vrp-tab-servizio) body.vrp-sfondi .vrp-wrap { padding-left: 200px; box-sizing: border-box; }
}