/* Stile minimale del pannello di assistenza — stessa palette "Platino + Gioiello" del gestionale
   (vedi NewPlaneSciacca/assets/css/gestionale.css), non l'intero foglio di stile: questo è uno
   strumento interno per 2 persone, non serve replicare ogni componente del gestionale. */

:root {
  --colore-primario: #0A3A82;
  --colore-primario-chiaro: #0F52BA;
  --colore-primario-scuro: #082C63;
  --colore-testo: #1A1A1A;
  --colore-testo-chiaro: #616161;
  --colore-sfondo: #ffffff;
  --colore-sfondo-alt: #E8EAEE;
  --colore-bordo: #C7CDD6;
  --colore-ok: #00694A;
  --colore-ok-sfondo: #DFF7EC;
  --colore-errore: #9B111E;
  --colore-errore-sfondo: #FBE4E6;
  --colore-oro: #8C6D0F;
  --colore-oro-sfondo: #FFF6DC;
  --gradiente-primario: linear-gradient(120deg, #082C63 0%, #0F52BA 28%, #6E96E0 48%, #0F52BA 68%, #082C63 100%);
  --raggio: 6px;
  --raggio-pillola: 999px;
}

* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; color: var(--colore-testo); background: var(--colore-sfondo-alt); line-height: 1.5; }
a { color: var(--colore-primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { margin: 0 0 16px; font-weight: 600; }

.barra-superiore { background: var(--gradiente-primario); color: #fff; box-shadow: 0 2px 8px rgba(8,44,99,.3); }
.fascia-marchio { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; flex-wrap: wrap; gap: 10px; }
.marchio-titolo { font-weight: 700; font-size: 1.2rem; }
.utente-corrente { font-size: 0.85rem; }
.utente-corrente a { color: #fff; text-decoration: underline; }
.nav-principale { display: flex; gap: 18px; padding: 0 24px 12px; }
.nav-principale a { color: #fff; font-weight: 600; opacity: .9; }
.nav-principale a:hover { opacity: 1; text-decoration: underline; }

.contenuto { max-width: 960px; margin: 0 auto; padding: 24px; }

.messaggio-flash { padding: 10px 16px; border-radius: var(--raggio); margin-bottom: 16px; font-weight: 600; }
.messaggio-ok { background: var(--colore-ok-sfondo); color: var(--colore-ok); }
.messaggio-errore { background: var(--colore-errore-sfondo); color: var(--colore-errore); }

.riquadro-login { background: #fff; padding: 32px; border-radius: var(--raggio); box-shadow: 0 4px 14px rgba(0,0,0,.14); max-width: 340px; margin: 60px auto; border-top: 5px solid transparent; border-image: linear-gradient(90deg, #082C63, #6E96E0, #C9A227) 1; }
.pagina-login { min-height: 100vh; background: linear-gradient(160deg, #F4F6F8 0%, #DCE1E8 35%, #F4F6F8 55%, #C7CDD6 80%, #EEF0F3 100%); }

label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.9rem; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--colore-bordo); border-radius: var(--raggio); font: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--colore-primario); box-shadow: 0 0 0 1px var(--colore-primario); }

.pulsante, button[type="submit"], button { display: inline-block; background: var(--gradiente-primario); color: #fff; border: none; padding: 8px 20px; border-radius: var(--raggio-pillola); font-size: 0.86rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.pulsante-secondario { background: #fff; color: var(--colore-primario-chiaro); border: 1.5px solid var(--colore-primario-chiaro); }

.barra-azioni { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.filtri { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtri a { padding: 6px 14px; border-radius: var(--raggio-pillola); background: #fff; border: 1px solid var(--colore-bordo); color: var(--colore-testo-chiaro); font-size: 0.85rem; }
.filtri a.filtro-attivo { background: var(--gradiente-primario); color: #fff; border-color: transparent; }

.tabella-dati { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--raggio); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.tabella-dati th, .tabella-dati td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--colore-bordo); font-size: 0.9rem; }
.tabella-dati th { background: var(--colore-sfondo-alt); font-weight: 700; }
.cella-vuota { text-align: center; color: var(--colore-testo-chiaro); padding: 24px; }

.etichetta-stato { padding: 4px 12px; border-radius: var(--raggio-pillola); font-size: 0.75rem; font-weight: 700; color: #fff; white-space: nowrap; }
.stato-aperto { background: var(--colore-errore); }
.stato-in-lavorazione { background: var(--colore-oro); }
.stato-risolto { background: var(--colore-ok); }
.stato-chiuso { background: var(--colore-testo-chiaro); }

.scheda { background: #fff; border-radius: var(--raggio); padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.1); margin-bottom: 16px; }

.bolla-chat { max-width: 75%; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; }
.bolla-cliente { background: var(--colore-sfondo-alt); margin-right: auto; }
.bolla-staff { background: var(--colore-teal-sfondo, #E3EBFA); margin-left: auto; }
.bolla-testo { white-space: pre-wrap; }
.bolla-meta { font-size: 0.75rem; color: var(--colore-testo-chiaro); margin-top: 6px; }
.bolla-allegato-immagine { max-width: 220px; border-radius: 8px; margin-top: 6px; display: block; }
.bolla-allegato-documento { display: inline-block; margin-top: 6px; }

.suggerimento-campo { font-weight: normal; color: var(--colore-testo-chiaro); font-size: 0.85em; }