/* La Dashboard a riquadri (mockup v8 approvato il 2026-09-24, veste «a riquadri").
   Solo i gettoni di app.css: nessun colore nuovo. Spazio sempre ottimizzato: niente vuoti,
   righe allineate, ordinato e denso. */

.dr-pagina {max-width:1240px; margin:0 auto; color:var(--ink);}
.dr-intestazione {display:flex; align-items:flex-end; gap:var(--s5); margin-bottom:var(--s5);}
.dr-intestazione > div {flex:1; min-width:0;}
.dr-data {margin:0; font-size:var(--t-26); font-weight:600; letter-spacing:-.3px; text-transform:none;}
.dr-data::first-letter {text-transform:uppercase;}
.dr-meta {display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; margin:4px 0 0; font-size:var(--t-13); color:var(--ink-2);}
.dr-meta [data-ora] {font-size:var(--t-15); color:var(--ink);}
.dr-meta b {color:var(--ink); font-weight:400;}
.dr-frase {margin:6px 0 0; font-size:var(--t-15); line-height:1.5; max-width:820px;}
.dr-frase a {color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--bordo-ctl);}
.dr-frase a.dr-allerta, .dr-allerta {color:var(--allerta); text-decoration-color:var(--allerta);}
.dr-cifre {font-family:var(--cifre); font-variant-numeric:tabular-nums;}

.dr-griglia {display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-flow:row dense; gap:var(--s4); align-items:stretch;}
.dr-riquadro {min-width:0; box-sizing:border-box; display:flex; flex-direction:column; background:var(--piano);
  border:1px solid var(--linea-2); border-radius:var(--r-piano); padding:14px 16px;}
.dr-m-S {grid-column:span 1;} .dr-m-M {grid-column:span 2;} .dr-m-L {grid-column:span 3;}
.dr-testa {display:flex; align-items:center; gap:var(--s2); min-height:28px; margin-bottom:var(--s3); flex-wrap:wrap;}
.dr-testa h2 {margin:0; font-size:var(--t-13); font-weight:600; white-space:nowrap;}
.dr-sotto {flex:1; min-width:0; font-size:var(--t-12); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dr-corpo {display:flex; flex-direction:column; flex:1; min-width:0;}
.dr-corpo small {font-size:var(--t-12); color:var(--ink-2); line-height:1.4;}
.dr-link {background:none; border:0; padding:0; font:inherit; font-size:var(--t-12); color:var(--ink-2); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--bordo-ctl);}
.dr-sep {margin:0; padding:12px 0 5px; font-size:var(--t-11); font-weight:600; color:var(--ink-3);}
.dr-sep:first-child {padding-top:0;}
.dr-sep span {font-weight:400;}
.dr-nascosta {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* una riga cliccabile: tinta del cliente a sinistra */
.dr-riga {display:flex; align-items:center; gap:var(--s3); width:100%; text-align:left; background:none; border:0;
  border-top:1px solid var(--linea-2); border-left:3px solid var(--tinta, transparent); padding:8px 0 8px 10px;
  color:var(--ink); font:inherit; cursor:pointer;}
.dr-riga:hover {background:var(--piano-2);}
.dr-riga:focus-visible, .dr-cal-voce:focus-visible, .dr-cal-testa:focus-visible, .dr-mese-giorno:focus-visible {outline:2px solid var(--accento); outline-offset:2px;}
.dr-riga-testo {flex:1; min-width:0;}
.dr-riga strong {display:block; font-size:var(--t-13); font-weight:500; line-height:1.35; overflow-wrap:anywhere;}
.dr-stato {flex-shrink:0; font-size:var(--t-12);}
.dr-anche {margin:auto 0 0; padding-top:12px; border-top:1px solid var(--linea-2); font-size:var(--t-12); line-height:1.45; color:var(--ink-2);}
.dr-anche b {color:var(--ink-3); font-weight:600;}

.dr-grande {margin:0; font-size:34px; line-height:1.1;}
.dr-grande small {font-size:var(--t-12);}
.dr-conto {display:flex; align-items:baseline; gap:8px; background:none; border:0; padding:0; color:var(--ink); cursor:pointer; font:inherit;}
.dr-meteo-giorni {display:flex; justify-content:space-between; gap:6px; margin-top:8px; font-size:var(--t-12); color:var(--ink-2);}
.dr-meteo-giorni b {color:var(--ink); font-weight:400;} .dr-meteo-giorni i {font-style:normal; color:var(--ink-3);}
.dr-nota {resize:vertical; min-height:96px; font:inherit; font-size:var(--t-13);}

/* generazioni AI */
.dr-spesa {display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--linea-2);
  padding:10px 0; color:var(--ink); font:inherit; cursor:pointer;}
.dr-spesa:first-child {border-top:0; padding-top:0;}
.dr-spesa-riga {display:flex; justify-content:space-between; gap:var(--s3); font-size:var(--t-13);}
.dr-spesa-riga span {white-space:nowrap; color:var(--ink-2); font-size:var(--t-12);}
.dr-spesa-riga b {color:var(--ink); font-size:var(--t-13);}
.dr-barra {height:6px; border-radius:3px; background:var(--piano-2); overflow:hidden; margin:4px 0 2px;}
.dr-barra i {display:block; height:6px; background:var(--accento);}
.dr-barra.ferma i {background:var(--allerta);}

/* tacche di avanzamento */
.dr-tacche {display:inline-flex; gap:2px; align-items:center; flex-shrink:0; height:16px;}
.dr-tacche i {width:4px; height:11px; border-radius:1px; box-sizing:border-box; border:1px solid var(--bordo-ctl);}
.dr-tacche i.piena {background:var(--ink-2); border-color:var(--ink-2);}

/* il calendario */
.dr-ctl-gruppo {display:inline-flex; gap:6px;}
.dr-ctl-gruppo.unito {gap:0; border:1px solid var(--bordo-ctl); border-radius:var(--r-ctl); overflow:hidden;}
.dr-ctl {height:28px; padding:0 10px; border-radius:var(--r-ctl); border:1px solid var(--bordo-ctl); background:transparent;
  color:var(--ink-2); font:500 var(--t-12) var(--testo); cursor:pointer;}
.dr-ctl.attivo {background:var(--accento-tinta); color:var(--ink); border-color:var(--bordo-ctl);}
.dr-ctl-gruppo.unito .dr-ctl {border:0; border-radius:0;}
.dr-ctl-gruppo.unito .dr-ctl + .dr-ctl {border-left:1px solid var(--bordo-ctl);}
.dr-cal-riassunto {margin:-4px 0 10px; font-size:var(--t-12); color:var(--ink-2);}
.dr-cal-settimana {display:grid; grid-template-columns:repeat(5, minmax(0,1fr)) minmax(0,.72fr); gap:4px; flex:1;}
.dr-cal-giorno {display:flex; flex-direction:column; min-width:0; border-radius:7px; border:1px solid transparent;}
.dr-cal-giorno.oggi {background:var(--accento-tinta); border-color:var(--bordo-ctl); box-shadow:inset 0 3px 0 var(--marchio);}
.dr-cal-testa {display:flex; align-items:baseline; gap:6px; padding:6px 7px 5px; background:none; border:0; color:var(--ink-2);
  font:inherit; font-size:var(--t-12); cursor:pointer; text-align:left; width:100%; border-radius:6px;}
.dr-cal-testa:hover {background:var(--piano-2);}
.dr-cal-testa b {font-size:var(--t-15); font-weight:400; color:var(--ink);}
.dr-cal-testa.fine, .dr-cal-testa.fine b {color:var(--ink-3);}
.dr-cal-testa em {margin-left:auto; font-style:normal; font-size:var(--t-11); font-weight:700; color:var(--ink);}
.dr-cal-giorno.oggi .dr-cal-testa, .dr-cal-giorno.oggi .dr-cal-testa b {color:var(--ink); font-weight:700;}
.dr-cal-giorno.oggi .dr-cal-testa b {font-weight:700;}
.dr-cal-elenco {display:flex; flex-direction:column; gap:5px; padding:0 5px 7px;}
.dr-cal-voce {display:block; width:100%; text-align:left; background:var(--piano-2); border:0; border-left:3px solid var(--tinta, transparent);
  border-radius:6px; padding:5px 7px 6px 8px; font:inherit; font-size:var(--t-12); line-height:1.35; color:var(--ink); cursor:pointer;}
.dr-cal-voce.passata {opacity:.55;}
.dr-cal-voce small {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:var(--t-11); color:var(--ink-2); margin-top:1px;}
.dr-cal-titolo {display:flex; gap:6px; align-items:flex-start; text-align:left; font-weight:500;}
.dr-cal-titolo > span:last-child {min-width:0; text-align:left; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.dr-cal-personale {background:none; border:1px dashed var(--bordo-ctl); border-radius:6px; padding:5px 7px; cursor:default; overflow-wrap:anywhere;}
.dr-cal-personale b, .dr-mio b {font-size:var(--t-11); font-weight:700; color:var(--ink-2);}
.dr-cal-dopo {border-top:1px solid var(--linea); margin-top:8px; padding-top:8px;}
.dr-cal-dopo > p {margin:0 0 6px 7px; font-size:var(--t-12); color:var(--ink-2);}
.dr-cal-dopo > p span {color:var(--ink-3);}
.dr-cal-settimana.corta {flex:none;}
.dr-cal-prossima {min-width:0; display:flex; flex-direction:column; gap:4px; padding:0 5px;}
.dr-cal-etichetta {font-size:var(--t-11); color:var(--ink-3); padding:0 2px 2px;}
.dr-cal-etichetta b {font-weight:400;}
.dr-cal-mini {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:left; background:none; border:0;
  border-left:3px solid var(--tinta, transparent); padding:1px 0 1px 6px; font:inherit; font-size:var(--t-11); line-height:1.3; color:var(--ink); cursor:pointer;}
.dr-cal-mini span {color:var(--ink-3);}
.dr-cal-mini.personale {border:1px dashed var(--bordo-ctl); border-radius:4px; padding:1px 5px; cursor:default;}
.dr-legenda {display:flex; flex-wrap:wrap; gap:6px 14px; margin:10px 0 0; font-size:var(--t-12); color:var(--ink-3);}
.dr-legenda-tacche {display:inline-flex; align-items:center; gap:6px;}
.dr-legenda-tua::before {content:''; display:inline-block; width:12px; height:10px; margin-right:6px; border:1px dashed var(--bordo-ctl); border-radius:3px; vertical-align:-1px;}

.dr-mese {display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px;}
.dr-mese-nome {font-size:var(--t-11); color:var(--ink-3); padding:0 6px;}
.dr-mese-giorno {display:flex; flex-direction:column; gap:2px; min-height:78px; min-width:0; padding:5px 6px; text-align:left; background:var(--piano-2);
  border:1px solid transparent; border-radius:6px; font:inherit; color:var(--ink); cursor:pointer;}
.dr-mese-giorno.fuori {opacity:.45;}
.dr-mese-giorno.oggi {background:var(--accento-tinta); border-color:var(--bordo-ctl); box-shadow:inset 0 3px 0 var(--marchio);}
.dr-mese-giorno b {font-size:var(--t-12); font-weight:400;}
.dr-mese-voce {display:block; font-size:var(--t-11); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-left:2px solid var(--tinta, transparent); padding-left:4px;}
.dr-mese-voce.personale {border-left:2px dashed var(--bordo-ctl);}
.dr-mese-piu {font-size:var(--t-11); color:var(--ink-3);}

/* il giorno aperto */
.dr-giorno {min-width:min(440px, 86vw); display:flex; flex-direction:column; gap:6px; padding:20px 22px; box-sizing:border-box;}
.dr-giorno header {display:flex; align-items:center; justify-content:space-between; gap:var(--s3);}
.dr-giorno h2 {margin:0; font-size:var(--t-18);}
.dr-giorno h2::first-letter {text-transform:uppercase;}
.dr-mio {display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:6px 0; border-top:1px solid var(--linea-2);}
.dr-nuovo {display:flex; gap:var(--s2); align-items:flex-end; margin-top:var(--s3); flex-wrap:wrap;}
.dr-nuovo label {display:flex; flex-direction:column; gap:4px; font-size:var(--t-12); color:var(--ink-2);}
.dr-nuovo .largo {flex:1; min-width:180px;}
.dr-errore {margin:0; min-height:1em; font-size:var(--t-12); color:var(--allerta);}

@media (max-width:1100px) {
  .dr-griglia {grid-template-columns:repeat(2, minmax(0,1fr));}
  .dr-m-L, .dr-m-M {grid-column:1 / -1;}
}
@media (max-width:650px) {
  .dr-intestazione {flex-direction:column; align-items:stretch;}
  .dr-griglia {grid-template-columns:minmax(0,1fr);}
  .dr-m-S {grid-column:1 / -1;}
  .dr-riquadro[data-w="da_fare"] {order:-1;}   /* sul telefono prima si sa cosa fare (mockup v8) */
  .dr-cal-settimana {grid-template-columns:minmax(0,1fr);}
  .dr-cal-giorno {border-bottom:1px solid var(--linea-2);}
  .dr-cal-settimana.corta {grid-template-columns:repeat(2, minmax(0,1fr));}
  .dr-mese-giorno {min-height:48px;}
  .dr-mese-voce {display:none;}
}

/* Personalizza */
.dr-barra-modifica {display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s5); padding:14px 16px;
  background:var(--piano); border:1px solid var(--linea); border-radius:var(--r-piano);}
.dr-barra-modifica > .ms {color:var(--accento);}
.dr-barra-modifica > div {flex:1; min-width:240px;}
.dr-barra-modifica strong {display:block; font-size:var(--t-13);}
.dr-barra-modifica small {font-size:var(--t-12); color:var(--ink-2);}
.dr-barra-modifica .dr-errore {flex-basis:100%;}
.dr-in-modifica {border-style:dashed; border-color:var(--bordo-ctl); cursor:grab;}
.dr-in-modifica.trascinato {opacity:.5; border-color:var(--accento);}
.dr-maniglia {flex-shrink:0; color:var(--ink-2); margin-left:-4px;}
.dr-misura {min-width:26px; height:24px; padding:0 4px; border-radius:6px; border:1px solid var(--bordo-ctl); background:transparent;
  color:var(--ink-2); font:600 var(--t-11) var(--testo); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.dr-misura .ms {font-size:15px;}
.dr-misura.attivo {border-color:var(--accento); background:var(--accento-tinta); color:var(--ink);}
.dr-misura:disabled {opacity:.35; cursor:default;}
.dr-misura:focus-visible {outline:2px solid var(--accento); outline-offset:2px;}
.dr-anteprima {opacity:.6; pointer-events:none;}
.dr-catalogo {position:fixed; top:0; right:0; bottom:0; width:min(400px, 100vw); overflow:auto; z-index:50; box-sizing:border-box;
  padding:20px; background:var(--piano); border-left:1px solid var(--linea); box-shadow:-12px 0 32px rgba(0,0,0,.35);}
.dr-catalogo[hidden], .dr-intestazione[hidden] {display:none;}
.dr-catalogo header {display:flex; align-items:center; justify-content:space-between;}
.dr-catalogo h2 {margin:0; font-size:var(--t-15);}
.dr-voce-catalogo {display:flex; align-items:center; gap:var(--s3); padding:9px 0; border-top:1px solid var(--linea-2);}
.dr-voce-catalogo > span:first-child {flex:1; min-width:0;}
.dr-voce-catalogo strong {display:block; font-size:var(--t-13); font-weight:500;}
.dr-voce-catalogo small {font-size:var(--t-12); color:var(--ink-2);}
.dr-c-e {display:inline-flex; align-items:center; gap:4px; font-size:var(--t-12); color:var(--ink-3); white-space:nowrap;}
.dr-c-e .ms {font-size:14px;}
.dr-barra-modifica .dr-errore:empty {display:none;}

/* un clic sulla frase accende il riquadro a cui si riferisce */
.dr-acceso {animation:dr-acceso 1.6s ease-out;}
@keyframes dr-acceso {0%, 35% {border-color:var(--accento); box-shadow:0 0 0 2px var(--accento-tinta);} 100% {border-color:var(--linea-2); box-shadow:none;}}
@media (prefers-reduced-motion: reduce) {.dr-acceso {animation:none; border-color:var(--accento);}}

/* Da fare: le altre righe e le fasi ferme */
.dr-altre {align-self:flex-start; padding:6px 0 2px 13px;}
.dr-ferme strong {font-weight:500; color:var(--ink-2);}

/* avvisi: il colore non basta mai da solo (grassetto + pallino) */
.dr-frase a.dr-allerta {font-weight:600;}
.dr-riga small .dr-allerta {font-weight:600;}
.dr-riga small .dr-allerta::before {content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:5px; vertical-align:1px;}