/* Turni (Teams Turni): i colori dei temi dei turni e la vista #turni. Il resto lo danno le classi di app.css.
   I nomi dei temi sono quelli di Teams; turni.js li passa come --c (style="--c:var(--sh-blue)"). */
:root {
  --sh-white: #AEB4AD; --sh-gray: #8E9590;
  --sh-blue: #3E68D6; --sh-green: #4C8A3E; --sh-purple: #8752C4; --sh-pink: #C24A82; --sh-yellow: #BF9012;
  --sh-darkBlue: #23428F; --sh-darkGreen: #2D6140; --sh-darkPurple: #523493; --sh-darkPink: #8C2F5D; --sh-darkYellow: #96700F;
  --sh-yellow-soft: #FBF2D3; --sh-yellow-ink: #6B4F00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-white: #8F968F; --sh-gray: #6F7672;
    --sh-blue: #7896F0; --sh-green: #8BC07A; --sh-purple: #B496EE; --sh-pink: #EE8DB9; --sh-yellow: #E5C14F;
    --sh-darkBlue: #5675CC; --sh-darkGreen: #4F9466; --sh-darkPurple: #8869CF; --sh-darkPink: #C05C8C; --sh-darkYellow: #BE972F;
    --sh-yellow-soft: #2F2810; --sh-yellow-ink: #E9CC6A;
  }
}
:root[data-theme="dark"] {
  --sh-white: #8F968F; --sh-gray: #6F7672;
  --sh-blue: #7896F0; --sh-green: #8BC07A; --sh-purple: #B496EE; --sh-pink: #EE8DB9; --sh-yellow: #E5C14F;
  --sh-darkBlue: #5675CC; --sh-darkGreen: #4F9466; --sh-darkPurple: #8869CF; --sh-darkPink: #C05C8C; --sh-darkYellow: #BE972F;
  --sh-yellow-soft: #2F2810; --sh-yellow-ink: #E9CC6A;
}

/* ---------- Pezzi comuni ---------- */
.tu-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); flex: none; }
.chip .tu-dot { width: 7px; height: 7px; }
/* «in corso»: contorno nel colore del contesto, senza riempimento */
.chip.tu-live { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
/* Reperibilità di oggi: una riga gialla, piccola */
.tu-oc { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; margin-top: 12px; padding: 6px 10px; border-radius: 8px;
  background: var(--sh-yellow-soft); color: var(--sh-yellow-ink); font-size: 12.5px; text-align: left; }
.tu-oc b { font-weight: 600; }
.tu-oc .tu-dot { --c: var(--sh-yellow); }
.tu-oc.tag { width: auto; min-height: 24px; margin: -4px 0; padding: 0 9px; gap: 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }

/* ---------- Vista ---------- */
.tu-head { margin-bottom: 16px; }
.tu-head h2 { font: 600 20px/1.2 var(--f-ui); letter-spacing: -.01em; }
.tu-head p { margin-top: 4px; font-size: 12.5px; }
.tu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tu-card { display: flex; flex-direction: column; gap: 4px; }
.tu-card > .lbl { margin-bottom: 8px; }
.tu-card > .card-h { margin-bottom: 8px; }
.tu-when { font-size: 12px; font-weight: 600; }
.tu-title { font: 600 18px/1.25 var(--f-ui); letter-spacing: -.01em; overflow-wrap: anywhere; }
.tu-cust { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.tu-meta { font-size: 12px; color: var(--muted); }
.tu-prog { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; }
.tu-prog .meter { flex: 1; width: auto; }
.tu-actnow { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; }
.tu-foot { margin-top: auto; padding-top: 12px; }
.tu-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); }
.tu-big .mono { font-size: 28px; font-weight: 500; color: var(--text); letter-spacing: -.02em; }
.tu-wsum { font-size: 12.5px; }
/* Una barretta per giorno: altezza = ore in turno; puntino giallo = reperibile; tratteggio = assenza */
.tu-spark { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: auto; padding-top: 14px; }
.tu-sp { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 500 10.5px/1 var(--f-mono); color: var(--muted); }
.tu-sp-t { position: relative; width: 100%; max-width: 22px; height: 44px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.tu-sp-t i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--border-strong); }
.tu-sp.today .tu-sp-t i { background: var(--accent); }
.tu-sp.today b { color: var(--text); }
.tu-sp.off .tu-sp-t { background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, var(--surface-2) 1.5px 6px); }
.tu-sp b { font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tu-sp b::after { content: ""; width: 4px; height: 4px; border-radius: 50%; }
.tu-sp.oc b::after { background: var(--sh-yellow); }

/* Settimana: frecce, «Questa settimana» e titolo */
.tu-bar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 24px 0 10px; }
.tu-range { font: 600 15px/1.2 var(--f-ui); min-width: 0; }
.tu-range .mono { font-weight: 400; font-size: 12px; }

/* Elenco della settimana: un giorno dopo l'altro, righe divise da linee sottili */
.card.tu-list { padding: 0; overflow: hidden; }
.tu-day + .tu-day { border-top: 1px solid var(--border); }
.tu-dh { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 16px; }
.tu-dh h3 { font: 500 11px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tu-day.today .tu-dh h3 { color: var(--text); }
.tu-oggi { padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.tu-dsum { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tu-day.none .tu-dsum { color: var(--faint); }
.tu-row { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%;
  padding: 10px 16px 11px 19px; border-top: 1px solid var(--border); text-align: left; }
.tu-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 11px; width: 3px; border-radius: 0 2px 2px 0; background: var(--c); }
.tu-row:hover { background: var(--surface-2); }
.tu-row:focus-visible { outline-offset: -2px; }   /* l'elenco taglia i bordi: il contorno del fuoco sta dentro la riga */
.tu-t { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; font-size: 12.5px; }
.tu-t small { font-size: 11px; color: var(--muted); }
.tu-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tu-l1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.tu-lab { min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.tu-grp { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tu-l2 { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-l3 { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tu-row.past { opacity: .55; }
.tu-row.off .tu-lab { font-weight: 500; color: var(--muted); }
.tu-row.live { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.tu-row.live:hover { background: var(--surface-2); }
.tu-now { padding: 4px 16px 4px 19px; }
.tu-now + .tu-row { border-top: 0; }

/* ---------- Oggi: «Turni di oggi» ---------- */
.tu-og { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 0 9px 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.35; text-align: left; }
.tu-og::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--c); }
.og-turni .card-h + .tu-og { border-top: 0; padding-top: 2px; }
.og-turni .card-h + .tu-og::before { top: 3px; }
.tu-og-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.tu-og-h .mono { font-size: 12px; color: var(--muted); }
.tu-og > b, .tu-og-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-og > b { font-size: 13px; font-weight: 600; }
.tu-og-n { color: var(--muted); }
.tu-og.live .tu-og-h .mono { color: var(--text); font-weight: 600; }
.tu-og.past { opacity: .55; }
.tu-og.off > b { font-weight: 500; color: var(--muted); }
.og-turni .tu-oc { margin-top: 10px; }

/* Pillola in fondo alla barra laterale */
.tu-pill .ell { flex: 1; }
.tu-pill:hover { border-color: var(--text); }

/* ---------- Pannello del turno: 420px di lato, a tutto schermo su telefono ---------- */
.layer[data-layer^="tu-"] .drawer { width: min(420px, 100%); }
.layer[data-layer^="tu-"] .dr-ttl > .tu-dot { width: 10px; height: 10px; margin-top: 22px; }
.tu-notes { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.tu-tl { position: relative; height: 8px; margin: 2px 0 8px; border-radius: 4px; background: var(--surface-2); }
.tu-tl i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 1px var(--surface); }
.tu-tl i.unpaid { background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, var(--surface-2) 1.5px 5px); }
.tu-tl-now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--accent); }
.tu-ar { display: grid; grid-template-columns: 92px 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; }
.tu-ar:first-child { border-top: 0; }
.tu-ar > .mono { font-size: 12px; color: var(--muted); }
.tu-ar > .muted { font-size: 12px; }
.tu-ar-l { min-width: 0; overflow-wrap: anywhere; }
.tu-ar.now .tu-ar-l { font-weight: 600; }
.tu-ar .chip { margin-left: 4px; vertical-align: 1px; }
.tu-ov { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border-radius: 8px; background: var(--warn-soft); font-size: 13px; text-align: left; }
.tu-ov + .tu-ov { margin-top: 6px; }
.tu-ov .mono { flex: none; font-size: 12px; color: var(--muted); }
.tu-ov b { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.tu-ov .i { color: var(--muted); }
.tu-ro { font-size: 12px; }

@container app (min-width: 760px) {
  /* il toast si centra nello spazio lasciato dal pannello, che qui è più largo */
  .app:has(.layer[data-layer^="tu-"]) .toasts { right: min(420px, 100%); }
}
@container app (max-width: 959px) {
  .tu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tu-cards > .tu-wk { grid-column: 1 / -1; }
}

/* ---------- Telefono ---------- */
@container app (max-width: 759px) {
  .tu-head { margin-bottom: 12px; }
  .tu-head h2 { font-size: 18px; }
  .tu-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tu-cards > .tu-wk { grid-column: auto; }
  .tu-title { font-size: 17px; }
  .tu-foot .btn { height: 40px; padding: 0 16px; font-size: 13px; }
  .tu-oc { min-height: 44px; }
  .tu-bar { margin-top: 20px; }
  .tu-range { flex-basis: 100%; order: -1; }
  .tu-bar .ib.bordered { width: 40px; height: 40px; }
  .tu-bar .btn.small { height: 40px; padding: 0 14px; font-size: 13px; }
  .tu-row { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; min-height: 56px; padding: 12px 14px 12px 17px; }
  .tu-row::before { top: 12px; bottom: 12px; }
  .tu-t { font-size: 12px; }
  .tu-lab { font-size: 14px; }
  .tu-dh { padding: 8px 14px; }
  .tu-now { padding: 4px 14px 4px 17px; }
  .tu-og { min-height: 52px; }
  /* il dettaglio è una pagina intera: niente maniglia, spazio per la barra di stato */
  .layer[data-layer^="tu-"] .drawer { top: 0; width: 100%; height: auto; border-radius: 0; padding-top: var(--sat); }
  .layer[data-layer^="tu-"] .grip { display: none; }
  .layer[data-layer^="tu-"] .dr-head { padding-top: 14px; }
  .tu-ar { grid-template-columns: 88px 8px minmax(0, 1fr); }
  .tu-ar > .muted { grid-column: 3; margin-top: -6px; }
}