/* =====================================================================
   snodus-ui.css · base grafica comune delle app Snodus (ottobre 2026)
   Stessa base del sito: blu notte + arancio + crema, carattere Inter.
   L'accento della ditta arriva da marchio.js in --gold / --gold-testo
   (senza colore della ditta: arancio Snodus con testo blu notte).

   VARIABILI (usare questi nomi anche nelle altre app)
   Colori
     --notte  #13294B   testate, barre, menu        --notte-2  #0E1F3A  hover / fondo più scuro
     --arancio #FF7A1A  accento Snodus              --arancio-testo #B84A00  arancio leggibile come testo
     --crema  #F5F2EC   fondo pagina                --carta    #FFFFFF  schede, finestre
     --inchiostro #1B2433 testo                     --grigio   #4A5466  testo secondario
     --segnaposto #6B7280 segnaposto e note         --bordo    #E4DED3  bordi e divisori
     --verde #1E7A44  --rosso #B42318  --blu #2F5FB3  --viola #7A4BB8
     --gold / --gold-testo / --gold-dim / --gold-chiaro   accento della ditta (da marchio.js)
   Spazi (multipli di 4): --s1 4px · --s2 8px · --s3 12px · --s4 16px · --s5 20px · --s6 24px · --s8 32px
   Raggi: --r-campo 10px (campi e pulsanti) · --r-card 16px · --r-dlg 20px · --r-pill 999px
   Ombre: --ombra-card 0 1px 2px rgba(19,41,75,.08) · --ombra-sopra 0 12px 32px rgba(19,41,75,.18)
   Testo (scala): --t-xs 12px · --t-s 14px · --t-m 16px (base) · --t-l 18px · --t-xl 22px · --t-xxl 28px
   Caratteri: --font-ui Inter… · --font-titoli Archivo (solo titoli di pagina, 700–800)

   COMPONENTI: .btn (.ghost .small .danger .accento) · .lnk · input/select/textarea · label · .card
   .badge / .pill + stati (.b-nuova … .b-urgente) · dialog (.dlg-head .dlg-body .dlg-foot)
   .tab-carte (tabelle che diventano schede sul telefono) · .empty · .skeleton · :focus-visible
   ===================================================================== */
:root{
  --notte:#13294B; --notte-2:#0E1F3A; --arancio:#FF7A1A; --arancio-testo:#B84A00;
  --crema:#F5F2EC; --carta:#FFFFFF; --inchiostro:#1B2433; --grigio:#4A5466; --segnaposto:#6B7280; --bordo:#E4DED3;
  --verde:#1E7A44; --rosso:#B42318; --blu:#2F5FB3; --viola:#7A4BB8;
  --gold:#FF7A1A; --gold-testo:#13294B; --gold-dim:#B84A00; --gold-chiaro:#FF7A1A;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --r-campo:10px; --r-card:16px; --r-dlg:20px; --r-pill:999px;
  --ombra-card:0 1px 2px rgba(19,41,75,.08); --ombra-sopra:0 12px 32px rgba(19,41,75,.18);
  --t-xs:12px; --t-s:14px; --t-m:16px; --t-l:18px; --t-xl:22px; --t-xxl:28px;
  --font-ui:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-titoli:Archivo, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* nomi storici delle app (gestione, operatori…): puntano ai nuovi colori */
  --ink:var(--inchiostro); --cream:var(--crema); --paper:var(--carta); --muted:var(--grigio); --line:var(--bordo);
  --red:var(--rosso); --green:var(--verde); --fondo:var(--crema);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--crema); color:var(--inchiostro); font-family:var(--font-ui); font-size:var(--t-m); line-height:1.5;}
h1,h2{font-family:var(--font-titoli); font-weight:800; letter-spacing:-.01em; line-height:1.2;}
h3,h4{font-family:var(--font-ui); font-weight:700; line-height:1.3;}
a{color:var(--blu);}

/* --- campi --- */
label{display:block; font-size:var(--t-s); font-weight:600; color:var(--inchiostro); margin:var(--s3) 0 var(--s1); text-transform:none; letter-spacing:0;}
label .muted{font-weight:400;}
input,select,textarea{width:100%; min-height:48px; padding:11px 12px; border:1px solid #CFC8BA; border-radius:var(--r-campo); font:inherit; font-size:16px; line-height:1.4; color:var(--inchiostro); background:var(--carta);}
textarea{min-height:96px; resize:vertical;}
input::placeholder,textarea::placeholder{color:var(--segnaposto);}
input[type=checkbox],input[type=radio]{width:20px; height:20px; min-height:0; padding:0; accent-color:var(--notte);}
input:disabled,select:disabled,textarea:disabled{background:#F1EEE8; color:var(--grigio);}
select{appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A5466' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center;}
select[multiple]{background-image:none; padding-right:12px;}

/* --- pulsanti --- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:44px; padding:10px 16px; border-radius:var(--r-campo); border:1.5px solid var(--notte); background:var(--notte); color:#fff; font:inherit; font-weight:600; font-size:var(--t-s); line-height:1.2; cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s;}
.btn:hover{background:var(--notte-2); border-color:var(--notte-2);}
.btn.ghost{background:var(--carta); color:var(--inchiostro); border-color:#CFC8BA;}
.btn.ghost:hover{border-color:var(--notte); background:var(--carta);}
.btn.small{min-height:36px; padding:6px 12px; font-size:var(--t-s); border-radius:8px;}
.btn.danger{background:transparent; color:var(--rosso); border-color:#E7B4AE;}
.btn.danger:hover{background:#FDECEA; border-color:var(--rosso);}
.btn.accento{background:var(--gold); border-color:var(--gold); color:var(--gold-testo);}
.btn.accento:hover{filter:brightness(.95);}
.btn:disabled{opacity:.5; cursor:default;}
.lnk{display:inline; padding:0; margin:0; border:0; background:none; font:inherit; font-size:inherit; font-weight:600; color:var(--blu); cursor:pointer; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
.lnk:hover{color:var(--notte);}

/* --- schede --- */
.card{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r-card); padding:var(--s4); margin-bottom:var(--s3); box-shadow:var(--ombra-card);}
.muted{color:var(--grigio); font-size:var(--t-s);}
.hint{font-size:var(--t-s); color:var(--grigio); margin:0 0 var(--s3);}
.empty{text-align:center; color:var(--grigio); padding:32px 12px;}
.eyebrow{font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grigio);}

/* --- etichette di stato (pill: fondo chiaro, testo scuro, pallino) --- */
.badge,.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:600; line-height:1.5; letter-spacing:0; text-transform:none; white-space:nowrap; background:#EEF0F3; color:var(--grigio);}
.badge[class*="b-"]::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none;}
.badge.b-nuova{background:#FFF1E6; color:#B84A00;}
.badge.b-presa_in_carico,.badge.b-pianificata{background:#E8EFFB; color:#1F4A93;}
.badge.b-inviata{background:#F1EAFB; color:#5B3593;}
.badge.b-da_validare{background:#FEF3C7; color:#92400E;}
.badge.b-da_fatturare{background:#FDE7C8; color:#8A3B00;}
.badge.b-chiusa{background:#EEF0F3; color:#4A5466;}
.badge.b-annullata{background:#F3F4F6; color:#6B7280; text-decoration:line-through;}
.badge.b-urgente{background:#B42318; color:#fff;}
.badge.b-urgente::before{background:#fff;}
.badge.b-ok{background:#E3F2E8; color:#1E6B3C;} .badge.b-warn{background:#FEF3C7; color:#92400E;} .badge.b-ko{background:#FDE4E1; color:#9B1C12;}
.badge.b-prova{background:#E8EFFB; color:#1F4A93;} .badge.b-att{background:#FFF1E6; color:#B84A00;} .badge.b-tipo{background:#EEF0F3; color:#4A5466;}

/* --- finestre --- */
dialog{border:none; border-radius:var(--r-dlg); padding:0; width:min(680px, 94vw); max-height:90vh; color:var(--inchiostro); box-shadow:var(--ombra-sopra); overflow:hidden;}
dialog[open]{display:flex; flex-direction:column;}
dialog::backdrop{background:rgba(14,31,58,.55);}
.dlg-head{background:var(--carta); color:var(--inchiostro); padding:20px 24px 12px; font-family:var(--font-titoli); font-weight:800; font-size:var(--t-xl); line-height:1.25; border-bottom:1px solid var(--bordo); flex:none;}
.dlg-body{padding:4px 24px 24px; overflow:auto; flex:1 1 auto; min-height:0;}
.dlg-foot{padding:12px 24px; border-top:1px solid var(--bordo); display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:flex-end; background:var(--carta); flex:none;}
@media(max-width:599px){
  dialog{width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0;}
  .dlg-head{padding:calc(14px + env(safe-area-inset-top)) 16px 10px; font-size:var(--t-l);}
  .dlg-body{padding:4px 16px 20px;}
  .dlg-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -4px 12px rgba(19,41,75,.08);}
  .dlg-foot .btn{flex:1 1 auto;}
}

/* --- pulsante «scegli file» in italiano --- */
.file-it{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); margin-top:var(--s1);}
.file-it .file-nascosto{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); min-height:0; padding:0; border:0;}
.file-it .file-nome{font-size:var(--t-s); color:var(--segnaposto); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.file-it.pieno .file-nome{color:var(--inchiostro); font-weight:600;}
.file-it .file-btn{margin:0;}

/* --- tabelle che diventano schede sul telefono: <table class="tab-carte"> con data-label sulle celle --- */
.tab-carte{width:100%; border-collapse:collapse; font-size:var(--t-s);}
.tab-carte th{text-align:left; font-weight:600; color:var(--grigio); padding:10px 12px; border-bottom:1px solid var(--bordo);}
.tab-carte td{padding:12px; border-bottom:1px solid var(--bordo); vertical-align:top;}
@media(max-width:700px){
  .tab-carte thead{display:none;}
  .tab-carte, .tab-carte tbody, .tab-carte tr, .tab-carte td{display:block; width:100%;}
  .tab-carte tr{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r-card); padding:var(--s2) var(--s3); margin-bottom:var(--s2);}
  .tab-carte td{border:0; padding:4px 0; display:flex; justify-content:space-between; gap:var(--s3);}
  .tab-carte td[data-label]::before{content:attr(data-label); color:var(--grigio); font-weight:600;}
}

/* --- caricamento --- */
.skeleton{background:linear-gradient(90deg,#ECE8E0 0,#F6F3EE 50%,#ECE8E0 100%); background-size:200% 100%; animation:sk-onda 1.2s ease-in-out infinite; border-radius:8px; min-height:16px;}
@keyframes sk-onda{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none;}}

/* --- fuoco visibile da tastiera --- */
:focus{outline:none;}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
input:focus,select:focus,textarea:focus{border-color:var(--notte);}
.sr-only{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}