/* Grafico grande a schermo intero (Oggi e area professionisti) */
.chart.apribile {
    cursor: zoom-in;
}
.chart-apri {
    margin-left: auto;
    color: var(--brand);
    font-weight: 700;
}
.gg {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    overflow: hidden;
}
.gg-quadro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: max(10px, var(--sa-top, env(safe-area-inset-top))) max(12px, var(--sa-right, env(safe-area-inset-right))) max(8px, var(--sa-bottom, env(safe-area-inset-bottom))) max(12px, var(--sa-left, env(safe-area-inset-left)));
}
/* Telefono in verticale: il quadro si gira, così basta ruotare il telefono */
@media (orientation: portrait) {
    .gg-quadro {
        inset: auto;
        top: 0;
        left: 100vw;
        width: 100vh;
        height: 100vw;
        width: 100dvh;
        transform-origin: top left;
        transform: rotate(90deg);
        padding: 10px max(12px, var(--sa-bottom, env(safe-area-inset-bottom))) 8px max(12px, var(--sa-top, env(safe-area-inset-top)));
    }
}
.gg-testa {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}
.gg-testa b {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gg-zoom {
    margin-left: auto;
}
.gg-zoom button {
    padding: 0 10px;
}
.gg-area {
    flex: 1;
    min-height: 0;
    touch-action: none; /* il trascinamento sposta il grafico, non la pagina */
}
.gg-area svg {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
}
.gg-banda {
    fill: var(--ok-soft);
}
.gg-riga {
    stroke: var(--border-strong);
    stroke-dasharray: 4 4;
}
.gg-riga.bassa {
    stroke: var(--low);
    stroke-opacity: 0.5;
}
.gg-tacca {
    stroke: var(--border);
}
.gg-asse {
    fill: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}
.gg-curva {
    fill: none;
    stroke: var(--brand);
    stroke-width: 2.6;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.gg-lettura {
    fill: var(--surface);
    stroke: var(--brand);
    stroke-width: 1.5;
}
.gg-misura {
    fill: var(--brand);
    stroke: var(--surface);
    stroke-width: 2;
}
.gg-ev-linea {
    stroke-width: 1.2;
    stroke-dasharray: 2 3;
    stroke: var(--text-muted);
    stroke-opacity: 0.6;
}
.gg-ev {
    stroke: var(--surface);
    stroke-width: 1.5;
}
.gg-ev.pasto, .gg-l-pasto { fill: var(--ok); background: var(--ok); }
.gg-ev.bolo, .gg-l-bolo { fill: var(--brand); background: var(--brand); }
.gg-ev.basale, .gg-l-basale { fill: var(--warn); background: var(--warn); }
.gg-ev.ipo, .gg-l-ipo { fill: var(--low); background: var(--low); }
.gg-ev.nota, .gg-l-nota { fill: var(--text-muted); background: var(--text-muted); }
.gg-ev.pompa, .gg-l-pompa { fill: #1f7a8c; background: #1f7a8c; }
.gg-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 4px;
}
.gg-legenda span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.gg-legenda i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}
.gg-cursore {
    stroke: var(--text);
    stroke-width: 1;
}
.gg-cursore-punto {
    fill: var(--brand);
    stroke: var(--surface);
    stroke-width: 3;
}
.gg-fumetto {
    fill: var(--surface);
    stroke: var(--border-strong);
}
.gg-fumetto-testo {
    fill: var(--text-2);
    font-size: 12.5px;
}
.gg-fumetto-testo.forte {
    fill: var(--text);
    font-weight: 800;
}
/* iOS 26, app installata: solo 100lvh copre tutto lo schermo (vedi app.css) */
@media (display-mode: standalone) {
    .gg {
        bottom: auto;
        height: 100lvh;
    }
}
@media (display-mode: standalone) and (orientation: portrait) {
    .gg-quadro {
        width: 100lvh;
    }
}

/* ===== Livelli: dati di Apple Salute sovrapposti alla glicemia ===== */
.gg-livelli-btn { min-height: 36px; padding: 0 12px; flex-shrink: 0; }
.gg-livelli {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 2px 6px;
}
.gg-livelli[hidden] { display: none; }
.gg-l-chip { min-height: 32px; font-size: 12.5px; gap: 6px; display: inline-flex; align-items: center; }
.gg-l-chip.vuoto { opacity: 0.45; }
.gg-l-chip i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.gg-l-chip i.gg-l-eventi { background: var(--ok); border-radius: 50%; }
.gg-l-chip i.gg-l-sonno { background: #5b5fc7; }
.gg-l-chip i.gg-l-allenamenti { background: #f08a24; }
.gg-l-chip i.gg-l-fc { background: #e5487a; height: 3px; }
.gg-l-chip i.gg-l-passi { background: #2fa7a0; }
/* Sonno: velatura della notte, orari, ipnogramma in fondo e riquadri */
.gg-notte { fill: #3b3f99; opacity: 0.09; }
body.dark .gg-notte { fill: #8e93ff; opacity: 0.1; }
.gg-notte-ora { font-size: 11px; font-weight: 700; fill: #4a4fb0; }
body.dark .gg-notte-ora { fill: #b9bcff; }
.gg-ipno-riga { fill: var(--surface-2); opacity: 0.6; }
.gg-ipno-nome { font-size: 8.5px; font-weight: 600; fill: var(--text-muted); }
.gg-ipno-filo { fill: none; stroke: #7d82d6; stroke-width: 1; opacity: 0.55; }
.gg-ipno.profondo { fill: #2f3496; }
.gg-ipno.leggero { fill: #6a70e0; }
.gg-ipno.rem { fill: #4fb3e8; }
.gg-ipno.sveglio { fill: #f0a24a; }
body.dark .gg-ipno.profondo { fill: #6f74ff; }
.gg-allenamento { fill: #f08a24; opacity: 0.1; }
.gg-allenamento-barra { fill: #f08a24; opacity: 0.85; }
.gg-allenamento-nome { font-size: 11px; font-weight: 700; fill: #c76a10; }
.gg-passi { fill: #2fa7a0; opacity: 0.45; }
.gg-fc { fill: none; stroke: #e5487a; stroke-width: 1.6; stroke-linejoin: round; opacity: 0.85; }
.gg-asse-fc { fill: #e5487a; }
body.dark .gg-allenamento-nome { fill: #ffb067; }

/* ===== Modalità battito: rosso, glicemia solo come riferimento ===== */
.gg-modo-battito { background: linear-gradient(180deg, rgba(229, 72, 122, 0.08), rgba(229, 72, 122, 0.02)), var(--surface); }
.gg-modo-battito .gg-legenda { display: none; }
.gg-curva.sfondo { stroke: var(--text-muted); stroke-width: 1.4; opacity: 0.55; }
.gg-fc-fascia.riposo { fill: #e5487a; opacity: 0.04; }
.gg-fc-fascia.normale { fill: #e5487a; opacity: 0.08; }
.gg-fc-fascia.elevato { fill: #e5487a; opacity: 0.14; }
.gg-fc-fascia.intenso { fill: #e5487a; opacity: 0.22; }
.gg-fc-fascia-nome { font-size: 10px; font-weight: 700; fill: #e5487a; opacity: 0.7; }
.gg-modo-battito .gg-fc { stroke-width: 2.4; opacity: 1; }
.gg-fc-area { fill: #e5487a; opacity: 0.12; }
.gg-fc-punto { fill: #e5487a; stroke: var(--surface); stroke-width: 1; }
.gg-fc-sintesi {
    display: flex;
    gap: 8px;
    padding: 0 2px 6px;
    overflow-x: auto;
}
.gg-fc-sintesi[hidden] { display: none; }
.gg-fc-sintesi span {
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(229, 72, 122, 0.1);
    min-width: 84px;
}
.gg-fc-sintesi small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #c2365f; }
.gg-fc-sintesi b { font-size: 17px; color: var(--text); }
.gg-fc-sintesi i { font-style: normal; font-size: 11px; color: var(--text-muted); font-weight: 600; }
body.dark .gg-fc-sintesi small { color: #ff8fb1; }
.gg-livelli-btn[hidden] { display: none; }
.gg-sonno-sintesi span { background: rgba(91, 95, 199, 0.11); }
.gg-sonno-sintesi small { color: #4a4fb0; }
body.dark .gg-sonno-sintesi small { color: #b9bcff; }
.gg-leg-sonno { display: none !important; }
.gg-modo-sonno .gg-leg-sonno { display: inline-flex !important; }
.gg-leg-sonno i.profondo { background: #2f3496; }
.gg-leg-sonno i.leggero { background: #6a70e0; }
.gg-leg-sonno i.rem { background: #4fb3e8; }
.gg-leg-sonno i.sveglio { background: #f0a24a; }
body.dark .gg-leg-sonno i.profondo { background: #6f74ff; }
.gg-modo-sonno .gg-legenda .muted { display: none; }