/*
 * Stato operatori — grafica per Soapok.php (2026-11-09, sul modello «Scegli chi ti risponde adesso»).
 * Il PHP non cambia: questo foglio ridisegna il markup che già produce
 *   <div class="boxNew"><div class="imgNew"><img src="rosso|verde|giallo.png"></div>
 *   <div class="labelnameNew"><strong><b>Nome</b><br>Codice 123</strong></div></div>
 * Lo stato si ricava dall'immagine (selettore :has): verde = libero, rosso = in consulto,
 * giallo = in pausa (pausa o linea occupata). I non collegati il PHP non li stampa più.
 * Titolo e conteggi in alto sono i due pseudo-elementi del body (i conteggi con i contatori CSS,
 * calcolati dopo le schede e spostati in cima con order). L'ordine delle schede cambia con order:
 * prima i liberi. Senza nessuno collegato compare un avviso al posto delle schede. Nei browser senza :has resta una griglia ordinata con le icone di prima.
 */
html {
  background: #140F2A;
}
body {
  margin: 0;
  padding: clamp(12px, 3vw, 24px);
  min-height: 100vh;
  box-sizing: border-box;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(124, 77, 255, .22), transparent 60%),
    radial-gradient(700px 380px at 100% 0%, rgba(232, 72, 120, .14), transparent 60%),
    linear-gradient(180deg, #1C1538 0%, #140F2A 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  color: #EDE9FF;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 22px);
  align-content: start;
  counter-reset: liberi consulto pausa;
}

/* ===== scheda ===== */
.boxNew {
  --c: #8B85A8;                       /* colore dello stato */
  --glow: rgba(139, 133, 168, .25);   /* alone della cornice */
  --lab: "";
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 16px 16px 20px;
  box-sizing: border-box;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 24px;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
}

/* cornice con il disegno: luna, stelle e alone del colore dello stato */
.imgNew {
  position: relative;
  top: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 0 14px;
  box-sizing: border-box;
  border-radius: 18px;
  border: 3px solid var(--c);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .03), 0 0 28px -4px var(--glow), inset 0 0 40px rgba(0, 0, 0, .45);
  background-color: #241B47;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE7A3'/%3E%3Cstop offset='1' stop-color='%23E0A93B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M118 52a52 52 0 1 0 30 94a44 44 0 1 1-30-94z' fill='url(%23g)'/%3E%3Cg fill='%23FFE7A3'%3E%3Cpath d='M150 40l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3Cpath d='M44 54l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' opacity='.8'/%3E%3Cpath d='M160 120l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' opacity='.7'/%3E%3Ccircle cx='60' cy='150' r='2' opacity='.7'/%3E%3Ccircle cx='132' cy='160' r='1.6' opacity='.6'/%3E%3Ccircle cx='36' cy='108' r='1.4' opacity='.6'/%3E%3Ccircle cx='96' cy='30' r='1.6' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 55%, var(--glow), transparent 62%),
    radial-gradient(circle at 30% 20%, rgba(124, 77, 255, .35), transparent 55%),
    linear-gradient(160deg, #2E2160 0%, #1A1338 100%);
  background-size: 74% 74%, 100% 100%, 100% 100%, 100% 100%;
  background-position: center 56%, center, center, center;
  background-repeat: no-repeat;
}
.imgNew img {
  width: 34px;
  height: 34px;
  margin: 10px;
}

/* nome e codice */
.labelnameNew {
  position: static;
  width: 100%;
  height: auto;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
  color: #A9A2CC;
}
.labelnameNew strong {
  font-weight: 600;
}
.labelnameNew b {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.labelnameNew b + br {
  display: none;
}

@supports selector(:has(*)) {
  .boxNew:has(img[src="verde.png"])   { --c: #34D399; --glow: rgba(52, 211, 153, .35); --lab: "Libero";         order: 1; counter-increment: liberi; }
  .boxNew:has(img[src="rosso.png"])   { --c: #F0567A; --glow: rgba(240, 86, 122, .35); --lab: "In consulto";    order: 2; counter-increment: consulto; }
  .boxNew:has(img[src="giallo.png"])  { --c: #F5B23D; --glow: rgba(245, 178, 61, .35); --lab: "In pausa";       order: 3; counter-increment: pausa; }

  .imgNew img { display: none; }

  /* etichetta dello stato in alto a destra della cornice */
  .imgNew::before {
    content: "\25CF\00a0\00a0" var(--lab);
    position: absolute;
    top: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(18, 13, 38, .82);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--c);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* pallino in basso a destra */
  .imgNew::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c);
    border: 3px solid #1A1338;
  }
  .boxNew:has(img[src="rosso.png"]) .imgNew::after {
    background: radial-gradient(circle, #FFFFFF 0 3px, var(--c) 3.5px);
    animation: idw-battito 1.6s infinite;
  }
  .boxNew:has(img[src="giallo.png"]) .imgNew::after {
    background: repeating-linear-gradient(90deg, var(--c) 0 4px, #1A1338 4px 6px);
  }

  /* titolo e conteggi in cima */
  body::before,
  body::after {
    grid-column: 1 / -1;
  }
  body::before {
    content: "Scegli chi ti risponde adesso";
    order: -2;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 3.4vw, 30px);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.15;
  }
  body::after {
    content: "\1F7E2\00a0 Liberi " counter(liberi) "\2003\1F534\00a0 In consulto " counter(consulto) "\2003\1F7E1\00a0 In pausa " counter(pausa);
    order: -1;
    justify-self: start;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: -6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #D9D3F5;
    font-size: 13.5px;
    font-weight: 600;
    white-space: pre-wrap;
  }
  /* nessun operatore collegato: avviso al posto dei conteggi */
  body:not(:has(.boxNew))::after {
    content: "Nessun operatore collegato in questo momento: riprova tra qualche minuto.";
    justify-self: stretch;
    margin-top: 4px;
    padding: 22px 18px;
    border-radius: 20px;
    border-style: dashed;
    text-align: center;
    font-size: 15px;
  }
}

@keyframes idw-battito {
  0%   { box-shadow: 0 0 0 0 rgba(240, 86, 122, .6); }
  70%  { box-shadow: 0 0 0 9px rgba(240, 86, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 86, 122, 0); }
}

/* telefono: due operatori per riga */
@media (max-width: 600px) {
  body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .boxNew {
    padding: 9px 9px 13px;
    border-radius: 18px;
  }
  .imgNew {
    border-radius: 14px;
    border-width: 2px;
    margin-bottom: 10px;
  }
  .labelnameNew { font-size: 12.5px; }
  @supports selector(:has(*)) {
    .imgNew::before {
      top: 7px;
      right: 7px;
      max-width: calc(100% - 14px);
      padding: 3px 8px;
      font-size: 9.5px;
      letter-spacing: .06em;
    }
    .imgNew::after {
      right: 7px;
      bottom: 7px;
      width: 16px;
      height: 16px;
      border-width: 2px;
    }
    body::after { font-size: 12px; padding: 7px 12px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .imgNew::after { animation: none !important; }
}