/* Gantt delle lavorazioni (js/gantt.js). Pagina a tutto schermo: menu e barra
   in alto si nascondono finché è aperta, e tornano con «← Lavorazioni». */

.app-view.open:has(#panel-gantt.active) { grid-template-columns: 1fr; }
.app-view.open:has(#panel-gantt.active) .sidebar,
.app-view.open:has(#panel-gantt.active) .app-top { display: none; }
.app-content:has(> .app-content-inner > #panel-gantt.active) { padding: 0; overflow: hidden; }
.app-content-inner:has(> #panel-gantt.active) { max-width: none; margin: 0; height: 100%; }
#panel-gantt.active { height: 100%; animation: none; }
#ganttContent { height: 100%; display: flex; flex-direction: column; background: #fff; }

.gt-vuoto { padding: 60px 24px; text-align: center; color: var(--ink-soft); }
.gt-rosso { color: var(--rosso); }

/* --- testata */
.gt-testata { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.gt-titolo { flex: 1; min-width: 200px; }
.gt-titolo-nome { font-family: Archivo, Inter, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.gt-titolo-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.gt-azioni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gt-azioni .btn-sm { padding: 7px 13px; font-size: 13px; }
.gt-segmenti { display: inline-flex; border: 1px solid var(--line-card); border-radius: 999px; padding: 2px; background: var(--bg-soft); }
.gt-seg { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.gt-seg.on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

.gt-striscia { min-height: 50px; display: flex; flex-direction: column; justify-content: center; }
.gt-avviso { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 20px; padding: 6px 8px 6px 14px; border: 1px solid color-mix(in srgb, var(--blu), #fff 70%); background: var(--blu-bg); border-radius: 10px; font-size: 13.5px; }
.gt-avviso-tenue { border-color: var(--line-card); background: var(--bg-soft); }
.gt-avviso-azioni { display: inline-flex; gap: 8px; }
.gt-avviso .btn-sm { padding: 6px 13px; font-size: 13px; }

.gt-legenda { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 20px; font-size: 12px; color: var(--ink-soft); }
.gt-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.gt-leg { display: inline-block; width: 16px; height: 8px; border-radius: 3px; }
.gt-leg-critica { background: #fff; border: 2px solid var(--rosso); height: 10px; }
.gt-leg-rif { background: #c9d1cd; height: 4px; }
.gt-leg-ritardo { background: #8fa8d8 repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px); }
.gt-leg-aiuto { margin-left: auto; }

/* --- area del diagramma: un solo contenitore che scorre nei due sensi */
.gt-corpo { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--line); position: relative; }
.gt-tela { position: relative; }
.gt-intest { position: sticky; top: 0; z-index: 6; display: flex; height: 52px; background: #fff; border-bottom: 1px solid var(--line-card); }
.gt-intest-sx { align-items: flex-end; padding-bottom: 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.gt-intest-dx { position: relative; height: 52px; }
.gt-h1, .gt-h2 { position: absolute; overflow: hidden; white-space: nowrap; font-size: 11.5px; color: var(--ink-soft); border-left: 1px solid var(--line); padding-left: 6px; }
.gt-h1 { top: 0; height: 26px; line-height: 26px; font-weight: 700; color: var(--ink); text-transform: capitalize; }
.gt-h2 { top: 26px; height: 26px; line-height: 26px; }
.gt-h2-fermo { background: var(--bg-soft); color: #9aa6a0; }
.gt-h2-lun { color: var(--ink); font-weight: 600; }
.gt-h2-oggi { color: var(--brand-dark); font-weight: 700; }

/* La griglia a sinistra resta ferma mentre il diagramma scorre. */
.gt-sx { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; flex-shrink: 0; width: var(--gt-sx, 740px); height: 100%; background: #fff; border-right: 1px solid var(--line-card); }
.gt-sx-resto { display: contents; }
.gt-divisore { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 7; touch-action: none; }
.gt-divisore:hover, .gt-divisore-attivo { background: var(--brand-soft); box-shadow: inset -3px 0 0 var(--brand); }
.gt-c-sel { width: 30px; flex-shrink: 0; text-align: center; }
.gt-c-num { width: 58px; flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 12px; padding-left: 4px; }
.gt-c-nome { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.gt-nome-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-c-dur { width: 58px; flex-shrink: 0; text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; }
.gt-c-av { width: 60px; flex-shrink: 0; text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.gt-inp-av { text-align: right; }
.gt-sel-av .gt-inp-av { width: 56px; }
.gt-c-data { width: 112px; flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.gt-c-pred { width: 104px; flex-shrink: 0; padding-right: 8px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-intest-sx .gt-c-dur { text-align: right; }

.gt-inp { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px; font: inherit; font-size: 12.5px; padding: 3px 5px; color: var(--ink); }
.gt-inp:hover { border-color: var(--line-card); }
.gt-inp:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.gt-inp-dur { text-align: right; }
.gt-inp-dur::-webkit-inner-spin-button { opacity: .4; }
.gt-inp-data { padding: 2px 3px; }
.gt-inp-vuoto:not(:focus):not(:hover) { color: transparent; }
.gt-inp-vuoto:not(:focus):not(:hover)::-webkit-datetime-edit { color: transparent; }
.gt-inp-data::-webkit-calendar-picker-indicator { opacity: .35; }

/* --- righe */
.gt-righe { position: relative; }
.gt-riga { position: absolute; left: 0; height: 34px; display: flex; font-size: 13px; color: var(--ink); border-bottom: 1px solid #f0f3f1; }
.gt-riga:hover .gt-sx, .gt-riga:hover .gt-dx { background-color: #f8faf9; }
.gt-riga-g .gt-sx { background: var(--bg-soft); font-weight: 700; }
.gt-riga-sel .gt-sx { background: var(--brand-soft); }
.gt-riga-bersaglio .gt-dx { background: var(--brand-soft); }
.gt-freccia { border: 0; background: transparent; cursor: pointer; color: var(--ink-soft); font-size: 12px; width: 18px; padding: 0; flex-shrink: 0; }
.gt-dx { position: relative; flex-shrink: 0; height: 100%; }

.gt-sfondo { position: absolute; top: 0; height: 100%; pointer-events: none; }
.gt-fermo { position: absolute; top: 0; height: 100%; background: rgba(94,108,102,.055); }
.gt-vlinea { position: absolute; top: 0; height: 100%; background: #eef2f0; }
.gt-vlinea-mese { background: #dfe6e2; }
.gt-oggi { position: absolute; top: 0; height: 100%; background: var(--brand); opacity: .55; }

/* --- barre */
.gt-barra { position: absolute; top: 8px; height: 18px; border-radius: 5px; z-index: 2; display: flex; align-items: center; overflow: visible; }
.gt-barra-v { background: var(--blu); }
.gt-st-da_pianificare { background: #8fa8d8; }
.gt-st-in_corso { background: var(--brand); }
.gt-st-sospesa { background: var(--giallo); }
.gt-st-completata { background: #a3ada8; }
.gt-barra-testo { padding: 0 8px; font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.gt-critica { box-shadow: 0 0 0 2px var(--rosso); }
/* In ritardo: righe diagonali sulla barra e data di fine in rosso (il bordo rosso resta del percorso critico). */
.gt-ritardo { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 4px, transparent 4px 8px); }
.gt-fine-ritardo input, .gt-fine-ritardo > span { color: var(--rosso); font-weight: 600; }
.gt-mossa { outline: 2px dashed var(--blu); outline-offset: 2px; opacity: .85; }
/* Un gruppo è una staffa scura: il periodo delle sue voci. */
.gt-barra-g { top: 12px; height: 8px; border-radius: 1px; background: var(--ink); opacity: .8; }
.gt-barra-g::before, .gt-barra-g::after { content: ""; position: absolute; top: 100%; width: 0; height: 0; border-top: 5px solid var(--ink); }
.gt-barra-g::before { left: 0; border-right: 5px solid transparent; }
.gt-barra-g::after { right: 0; border-left: 5px solid transparent; }
.gt-rif { position: absolute; top: 28px; height: 3px; border-radius: 2px; background: #c3ccc7; z-index: 1; }
.gt-scad { position: absolute; top: 10px; height: 14px; border-left: 2px dotted var(--ink-soft); z-index: 1; }

.gt-modifica .gt-barra-v { cursor: grab; }
.gt-modifica .gt-barra-g { cursor: grab; }
.gt-modifica .gt-riga-v .gt-dx { cursor: crosshair; }
.gt-modifica .gt-riga-v .gt-dx:has(.gt-barra) { cursor: default; }
.gt-maniglia { position: absolute; right: -2px; top: -2px; width: 9px; height: calc(100% + 4px); cursor: ew-resize; }
.gt-punto { position: absolute; right: -14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-soft); cursor: crosshair; opacity: 0; transition: opacity .12s; }
.gt-barra:hover .gt-punto, .gt-riga:hover .gt-punto { opacity: 1; }
body.gt-trascina, body.gt-trascina * { cursor: grabbing !important; user-select: none; }

/* --- frecce dei legami */
.gt-svg { position: absolute; top: 0; z-index: 3; pointer-events: none; overflow: visible; }
.gt-legame { fill: none; stroke: #7d8a84; stroke-width: 1.3; }
.gt-freccia-punta { fill: #7d8a84; }
.gt-freccia-punta-rossa { fill: var(--rosso); }
.gt-legame-critico { stroke: var(--rosso); stroke-width: 1.6; }
.gt-legame-violato { stroke: var(--rosso); stroke-dasharray: 4 3; }
/* Tempo tecnico (asciugatura, stagionatura): tratteggio fitto, per non confonderlo con un legame violato. */
.gt-legame-attesa { stroke-dasharray: 1.5 3; stroke-linecap: round; }
.gt-legame-attesa.gt-legame-violato { stroke-dasharray: 4 3; }
.gt-legame-nascosto { stroke-dasharray: 2 3; opacity: .7; }
.gt-legame-nuovo { stroke: var(--blu); stroke-width: 1.6; stroke-dasharray: 5 3; }
.gt-legame-presa { fill: none; stroke: transparent; stroke-width: 10; pointer-events: stroke; cursor: pointer; }
.gt-legame-presa:hover { stroke: rgba(47,111,237,.18); }

.gt-sugg { position: fixed; z-index: 1000; pointer-events: none; background: var(--dark); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }

/* --- piccoli pannelli (legame, calendario, riferimento) */
.gt-popover { position: fixed; z-index: 900; width: 320px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--line-card); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 14px 16px; font-size: 13.5px; }
.gt-popover-largo { width: 520px; }
.gt-pop-titolo { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; }
.gt-pop-nota { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 8px; }
.gt-pop-sotto { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 6px; }
.gt-pop-campo { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.gt-pop-campo input { width: 72px; padding: 6px 8px; border: 1px solid var(--line-card); border-radius: 8px; font: inherit; }
.gt-pop-campo.gt-pop-campo-largo input { width: 100%; }
.gt-pop-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.gt-pop-azioni { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.gt-pop-azioni .gt-rosso { margin-right: auto; }
.gt-pop-azioni .btn-sm { padding: 7px 13px; font-size: 13px; }
.gt-tipi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gt-tipo { border: 1px solid var(--line-card); background: #fff; border-radius: 8px; padding: 7px 8px; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; color: var(--ink); }
.gt-tipo b { display: inline-block; min-width: 22px; color: var(--ink-soft); }
.gt-tipo.on { border-color: var(--brand); background: var(--brand-soft); }
.gt-tipo.on b { color: var(--brand-dark); }
.gt-cal-riga { display: grid; grid-template-columns: 130px 130px 1fr 34px; gap: 6px; margin-bottom: 6px; }
.gt-cal-riga input { padding: 5px 7px; border: 1px solid var(--line-card); border-radius: 8px; font: inherit; font-size: 12.5px; min-width: 0; }
.gt-cal-riga .btn { padding: 0; min-height: 0; width: 34px; height: 100%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

@media (max-width: 760px) {
  .gt-testata { padding: 10px 12px; }
  .gt-legenda { padding: 6px 12px; }
  .gt-leg-aiuto { margin-left: 0; }
  .gt-sx { width: var(--gt-sx, 300px); }
  /* Restano numero, nome e data di fine: con durata e inizio in più la colonna
     del nome si riduceva a zero e le lavorazioni non si leggevano. */
  .gt-c-pred, .gt-c-av, .gt-c-dur, .gt-c-av + .gt-c-data, .gt-c-sel { display: none; }
  .gt-c-num { width: 40px; }
  /* Su telefono testata e legenda vanno a capo e occupano quasi tutto lo
     schermo: con tutto a altezza fissa e overflow nascosto l'area delle righe
     si schiacciava e la pagina non scorreva. Qui scorre la pagina, e le righe
     hanno un'altezza propria (scorrono a loro volta, con l'intestazione fissa). */
  .app-content:has(> .app-content-inner > #panel-gantt.active) { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .app-content-inner:has(> #panel-gantt.active), #panel-gantt.active, #ganttContent { height: auto; }
  .gt-corpo { flex: none; height: calc(100dvh - 70px); min-height: 380px; }
}

/* Un conteggio in testata che si puo' cliccare (es. «1 non rispettato»). */
.gt-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.gt-link:hover { text-decoration-style: solid; }

/* Quanto e' gia' fatto di una voce: la parte sinistra della barra, piu' scura. */
.gt-barra-fatto { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px 0 0 5px; background: rgba(0, 0, 0, .28); pointer-events: none; }
.gt-sel-av { display: inline-flex; gap: 6px; align-items: center; margin-right: 10px; }

/* Traguardi (milestone): un rombo alla data, una tacca sulla scadenza. */
.gt-riga-t .gt-sx { background: var(--bg-soft); }
.gt-trag { position: absolute; top: 9px; width: 16px; height: 16px; transform: rotate(45deg) scale(.78); background: var(--ink); border-radius: 2px; z-index: 2; }
.gt-modifica .gt-trag { cursor: pointer; }
.gt-trag-rosso { background: var(--rosso); }
.gt-trag-ok { background: #a3ada8; }
.gt-trag-scad { position: absolute; background: var(--rosso); opacity: .55; top: 4px; bottom: 4px; border-radius: 1px; z-index: 1; }
.gt-trag-apri { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-trag-apri:hover { text-decoration: underline; }
.gt-popover select { width: 100%; padding: 6px 8px; border: 1px solid var(--line-card); border-radius: 8px; font: inherit; }

/* Durata dalle ore previste. */
.gt-ore-campi { display: flex; gap: 14px; flex-wrap: wrap; }
.gt-ore-elenco { margin-top: 10px; max-height: 240px; overflow: auto; }
.gt-ore-riga { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--line-card); font-size: 13px; }
.gt-ore-riga span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.gt-ore-riga span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Sospensione dei lavori: una fascia a righe sopra i giorni fermi, con il motivo nel tooltip. */
.gt-sosp { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(224, 138, 11, .22) 0 6px, rgba(224, 138, 11, .08) 6px 12px); border-left: 1px solid rgba(224, 138, 11, .6); border-right: 1px solid rgba(224, 138, 11, .6); pointer-events: auto; z-index: 0; }
.gt-leg-sosp { background: repeating-linear-gradient(135deg, rgba(224, 138, 11, .55) 0 3px, rgba(224, 138, 11, .2) 3px 6px); }