/*
 * Calendario · modello 1.0.0 (dal CRM di Daniel Castorani, 07/10/2026)
 *
 * Il campo data (testo gg/mm/aaaa più pulsante), il campo periodo e il
 * pannello del calendario. Con il mouse il pannello si apre sotto il campo;
 * al tocco sale dal basso a tutta larghezza, con giorni grandi.
 */

/* ---------- Il campo di una data ---------- */
.comp-data-campo{position:relative; display:flex; align-items:center;}
.comp-data-testo,
.comp-periodo-campo{
  box-sizing:border-box; width:100%; min-height:44px;
  border:1px solid var(--comp-bordo-campo, var(--comp-bordo, #c9cec8)); border-radius:var(--comp-raggio, 10px);
  background:var(--comp-superficie, #fff); color:var(--comp-testo, #1f2a2b);
  font-family:var(--comp-carattere, inherit); font-size:var(--comp-testo-campo, 1rem);
}
.comp-data-testo{padding:.5rem 48px .5rem .75rem; font-variant-numeric:tabular-nums;}
.comp-data-testo:focus-visible, .comp-periodo-campo:focus-visible{outline:2px solid var(--comp-focus, #2b5f5a); outline-offset:2px;}
.comp-data-testo[aria-invalid="true"]{border-color:var(--comp-errore, #9b2c2c);}
.comp-data-apri{
  position:absolute; right:3px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--comp-raggio-piccolo, 8px); background:transparent; color:var(--comp-testo-2, #5a6566); cursor:pointer;
}
.comp-data-apri:hover, .comp-data-apri[aria-expanded="true"]{background:var(--comp-superficie-2, #f3f4f2); color:var(--comp-testo, #1f2a2b);}
.comp-data-apri:focus-visible{outline:2px solid var(--comp-focus, #2b5f5a); outline-offset:1px;}
@media (pointer: coarse){ .comp-data-apri{width:44px; height:44px; right:0;} .comp-data-testo{min-height:48px;} }

/* ---------- Il campo di un periodo ---------- */
.comp-periodo-campo{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .75rem; text-align:left; cursor:pointer;}
.comp-periodo-campo[data-vuoto] .comp-periodo-valore{color:var(--comp-testo-2, #5a6566);}
.comp-periodo-valore{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums;}
.comp-periodo-campo .comp-calendario-icona{color:var(--comp-testo-2, #5a6566);}
.comp-periodo-nativi[hidden]{display:none;}

.comp-calendario-icona{width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.comp-calendario-nascosto{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;}

/* ---------- Il pannello, con il mouse ---------- */
.comp-calendario{
  box-sizing:border-box; position:fixed; inset:auto; margin:0; width:19rem;
  padding:.75rem;
  background:var(--comp-superficie, #fff); color:var(--comp-testo, #1f2a2b);
  border:1px solid var(--comp-bordo, #d9ddd8); border-radius:var(--comp-raggio-grande, 16px);
  box-shadow:var(--comp-ombra, 0 18px 40px -12px rgba(20,30,30,.25));
  font-family:var(--comp-carattere, inherit);
}
.comp-calendario-testa-tocco{display:none;}
.comp-calendario-corpo{display:flex; gap:.75rem;}
.comp-calendario-mese{flex:1; min-width:0;}
.comp-calendario-testa{display:flex; align-items:center; gap:.125rem; padding:0 0 .5rem .25rem;}
.comp-calendario-titolo{flex:1; margin:0; font-size:.9375rem; font-weight:600;}
.comp-calendario-salta{
  display:inline-flex; align-items:center; gap:.25rem; margin-left:-.25rem; padding:.25rem .375rem;
  border:0; border-radius:var(--comp-raggio-piccolo, 8px); background:transparent; font:inherit; font-weight:600; color:inherit; cursor:pointer;
}
.comp-calendario-salta .comp-calendario-icona{width:14px; height:14px; color:var(--comp-testo-2, #5a6566);}
.comp-calendario-freccia{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--comp-raggio-piccolo, 8px); background:transparent; color:var(--comp-testo, #1f2a2b); cursor:pointer;
}

.comp-calendario-griglia{width:100%; border-collapse:separate; border-spacing:2px; table-layout:fixed;}
.comp-calendario-griglia[hidden]{display:none;}
.comp-calendario-griglia th{padding:0 0 .25rem; font-size:.75rem; font-weight:500; color:var(--comp-testo-2, #5a6566); text-align:center;}
.comp-calendario-griglia td{padding:0; text-align:center;}
.comp-calendario-giorno{
  position:relative; width:100%; aspect-ratio:1; max-width:2.375rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--comp-raggio, 10px); background:transparent;
  font:inherit; font-size:.875rem; font-variant-numeric:tabular-nums; color:var(--comp-testo, #1f2a2b); cursor:pointer;
}
.comp-calendario-giorno[data-fuori-mese]{color:var(--comp-testo-2, #5a6566); opacity:.7;}
.comp-calendario-giorno[aria-current="date"]{font-weight:700; box-shadow:inset 0 0 0 1px var(--comp-bordo-campo, var(--comp-bordo, #c9cec8));}
.comp-calendario-giorno[aria-pressed="true"]{background:var(--comp-accento, #2b5f5a); color:var(--comp-accento-testo, #fff); font-weight:600;}
.comp-calendario-giorno:disabled{opacity:.35; cursor:not-allowed; text-decoration:line-through;}

.comp-calendario-scelte{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.25rem; min-height:15.75rem; align-content:center;}
.comp-calendario-scelte[hidden]{display:none;}
.comp-calendario-scelta{
  min-height:48px; border:0; border-radius:var(--comp-raggio, 10px); background:transparent;
  font:inherit; font-size:.875rem; font-variant-numeric:tabular-nums; color:var(--comp-testo, #1f2a2b); cursor:pointer;
}
.comp-calendario-scelta[aria-pressed="true"]{background:var(--comp-accento, #2b5f5a); color:var(--comp-accento-testo, #fff); font-weight:600;}
.comp-calendario-scelta:disabled{opacity:.35; cursor:not-allowed;}

@media (hover:hover){
  .comp-calendario-salta:hover, .comp-calendario-freccia:hover,
  .comp-calendario-giorno:not(:disabled):not([aria-pressed="true"]):hover,
  .comp-calendario-scelta:not(:disabled):not([aria-pressed="true"]):hover,
  .comp-calendario-azione:hover{background:var(--comp-superficie-2, #f3f4f2);}
}
.comp-calendario button:focus-visible{outline:2px solid var(--comp-focus, #2b5f5a); outline-offset:1px;}

.comp-calendario-piede{display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--comp-bordo, #d9ddd8);}
.comp-calendario-azione{
  min-height:36px; padding:0 .75rem; border:0; border-radius:var(--comp-raggio-piccolo, 8px);
  background:transparent; font:inherit; font-size:.875rem; font-weight:500; color:var(--comp-testo-2, #5a6566); cursor:pointer;
}
.comp-calendario-azione[hidden]{display:none;}
.comp-calendario-oggi{color:var(--comp-testo, #1f2a2b); background:var(--comp-superficie-2, #f3f4f2);}

/* ---------- Il periodo: scorciatoie a sinistra, fascia fra i due giorni ---------- */
.comp-calendario-periodo{width:auto; padding:1rem;}
.comp-calendario-periodo .comp-calendario-mese{width:21rem;}
.comp-calendario-periodo .comp-calendario-giorno{max-width:2.875rem; font-size:.9375rem;}
.comp-calendario-scorciatoie{
  display:flex; flex-direction:column; gap:1px; width:10rem; flex:none;
  padding-right:.5rem; border-right:1px solid var(--comp-bordo, #d9ddd8);
}
.comp-calendario-scorciatoia{text-align:left; width:100%;}
.comp-calendario-suggerimento{margin:0; font-size:.8125rem; color:var(--comp-testo-2, #5a6566);}
.comp-calendario-periodo .comp-calendario-griglia{border-spacing:0 2px;}
.comp-calendario-periodo td[data-dentro]{background:var(--comp-superficie-2, #f3f4f2);}
.comp-calendario-periodo td[data-inizio]{background:linear-gradient(to right, transparent 50%, var(--comp-superficie-2, #f3f4f2) 50%);}
.comp-calendario-periodo td[data-fine]{background:linear-gradient(to left, transparent 50%, var(--comp-superficie-2, #f3f4f2) 50%);}
.comp-calendario-giorno[data-fine]:not([aria-pressed="true"]){background:var(--comp-superficie, #fff); box-shadow:inset 0 0 0 1.5px var(--comp-accento, #2b5f5a);}

/* ---------- Al tocco: pannello dal basso, a tutta larghezza ---------- */
.comp-calendario.comp-calendario-foglio{
  inset:auto 0 0 0; width:100%; max-width:100%; max-height:92dvh; overflow:auto; overscroll-behavior:contain;
  padding:0 1rem calc(1rem + env(safe-area-inset-bottom));
  border-width:1px 0 0; border-radius:var(--comp-raggio-grande, 16px) var(--comp-raggio-grande, 16px) 0 0;
}
.comp-calendario-foglio::backdrop{background:var(--comp-velo, rgba(20,30,30,.35));}
.comp-calendario-foglio .comp-calendario-testa-tocco{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  position:sticky; top:0; z-index:1; padding:.75rem 0 .5rem; background:inherit;
}
.comp-calendario-nome{font-weight:600; font-size:1rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.comp-calendario-chiudi{
  flex:none; min-height:44px; padding:0 .875rem; border:0; border-radius:var(--comp-raggio, 10px);
  background:var(--comp-superficie-2, #f3f4f2); color:var(--comp-testo, #1f2a2b); font:inherit; font-weight:500; cursor:pointer;
}
.comp-calendario-foglio .comp-calendario-corpo{flex-direction:column;}
.comp-calendario-foglio .comp-calendario-mese{width:auto;}
.comp-calendario-foglio .comp-calendario-freccia{width:44px; height:44px;}
.comp-calendario-foglio .comp-calendario-salta{min-height:44px; font-size:1rem;}
.comp-calendario-foglio .comp-calendario-giorno{max-width:none; min-height:44px; font-size:1rem;}
.comp-calendario-foglio .comp-calendario-azione{min-height:44px; font-size:.9375rem;}
/* Le scorciatoie del periodo, al tocco: una riga di pillole che scorre. */
.comp-calendario-foglio .comp-calendario-scorciatoie{
  flex-direction:row; width:auto; overflow-x:auto; gap:.375rem; padding:0 0 .5rem;
  border-right:0; border-bottom:1px solid var(--comp-bordo, #d9ddd8); scrollbar-width:none;
}
.comp-calendario-foglio .comp-calendario-scorciatoia{
  flex:none; width:auto; min-height:40px; border:1px solid var(--comp-bordo, #d9ddd8); border-radius:999px; white-space:nowrap;
}

@media (prefers-reduced-motion: no-preference){
  .comp-calendario{transition:opacity .15s ease, transform .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;}
  .comp-calendario:not(:popover-open){opacity:0; transform:translateY(-4px);}
  @starting-style{ .comp-calendario:popover-open{opacity:0; transform:translateY(-4px);} }
  .comp-calendario-foglio:not(:popover-open){opacity:1; transform:translateY(100%);}
  @starting-style{ .comp-calendario-foglio:popover-open{opacity:1; transform:translateY(100%);} }
}