/* === mobile.css — Nuova UI mobile in parallelo ==============================
 *
 * Stili del layer mobile (mobile.js). TUTTO è prefissato `.m-...` ed è figlio
 * di `.m-app`, che viene montato SOLO quando `isMobile && mobileLayout==='new'`
 * (fork in app.jsx). Quindi su desktop / layout "Classico" questi stili non
 * hanno alcun effetto (il DOM .m-app non esiste). Nessuna media query: il
 * gating è lato JS.
 *
 * Z-index: barra/FAB 80-85 · sidebar 150 · foglio impostazioni 160. I modali
 * condivisi (.modal-overlay) stanno a 200 e quindi coprono la shell; su mobile
 * EventModal è fullscreen e copre barra e FAB.
 * ========================================================================== */

/* Guscio a tutto schermo. Sostituisce topbar + main-content del desktop. */
.m-app {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #F8F7F5;
    overflow: hidden;
    font-family: inherit;
}

/* === Header ============================================================== */
.m-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}
.m-header-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #2B4C7E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-icon-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
    color: #555;
    cursor: pointer;
    font-family: inherit;
}
.m-icon-btn:active { background: #ececec; }
.m-text-btn {
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 0 8px;
    height: 38px;
    font-size: 14px;
    font-weight: 600;
    color: #2B4C7E;
    cursor: pointer;
    font-family: inherit;
}
.m-text-btn:active { background: #ececec; border-radius: 8px; }
/* "+" nuovo evento accanto a Oggi: glifo grande, accento blu. */
.m-icon-new { color: #2B4C7E; font-size: 26px; font-weight: 700; }
/* Accento blu (es. "O" Oggi, stesso colore del "+"). */
.m-icon-accent { color: #2B4C7E; }
/* Titolo del periodo: tappabile (gesto 6 → salto mese/anno). */
.m-header-title { cursor: pointer; }

/* === Area contenuto ===================================================== */
.m-app { /* base flex column già definito sopra */ }
.m-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    /* Spazio per non finire sotto la barra inferiore (56px) + safe-area. */
    padding-bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0px));
}
/* Vista Mese: riempie tutto lo schermo, niente scroll interno (la griglia
 * divide l'altezza in righe uguali). Padding minimo per andare quasi
 * edge-to-edge; in basso solo lo spazio della barra. */
.m-content.m-content-fill {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px;
    padding-bottom: calc(56px + 6px + env(safe-area-inset-bottom, 0px));
}

/* Placeholder fasi 1-4 */
.m-placeholder {
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #999;
    font-size: 15px;
    text-align: center;
}
.m-placeholder-emoji { font-size: 40px; }

/* === Vista Abitudini — griglia annuale verticale (una riga = un giorno) = */
.m-hy { width: 100%; }
.m-hy-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    min-height: 48px;
    cursor: pointer;
}
.m-hy-head:active { background: #f4f6f9; }
.m-hy-head-info { color: #bbb; font-size: 14px; align-items: center; }
/* Cella header: icona/colore sopra, streak (🔥N) sotto. */
.m-hy-head-cell {
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
}
.m-hy-head-streak { font-size: 10px; color: #888; line-height: 1; white-space: nowrap; }
.m-hy-day-col {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-left: 8px;
}
.m-hy-dow { font-size: 10px; color: #aaa; }
.m-hy-dnum { font-size: 13px; font-weight: 600; }
.m-hy-cell {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    cursor: pointer;
}
.m-hy-head-icon { font-size: 18px; }
.m-hy-head-swatch { width: 14px; height: 14px; border-radius: 50%; }
.m-hy-month {
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #2B4C7E;
    background: #F3F2F0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.m-hy-row {
    display: flex;
    align-items: stretch;
    min-height: 33px;
    border-bottom: 1px solid #f4f4f4;
}
.m-hy-row.today { background: #F0F5FA; }
.m-hy-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ccc;
    box-sizing: border-box;
    transition: background 0.1s;
}
.m-hy-cell:active .m-hy-dot { transform: scale(0.85); }
.m-hy-empty {
    padding: 48px 16px;
    text-align: center;
    color: #888;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.m-hy-manage {
    border: none;
    background: #2B4C7E;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
}
/* Modal legenda (tocco sull'header) */
.m-hy-legend-backdrop {
    position: fixed;
    inset: 0;
    z-index: 175;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.m-hy-legend {
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    min-width: 220px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.m-hy-legend-title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.m-hy-legend-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 15px; }
.m-hy-legend-icon { font-size: 20px; width: 24px; text-align: center; flex-shrink: 0; }
.m-hy-legend-swatch { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.m-hy-legend-name { color: #333; }

/* === Salto rapido mese/anno (gesto 6) ================================== */
.m-jump-backdrop {
    position: fixed;
    inset: 0;
    z-index: 175;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.m-jump {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    width: 300px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.m-jump-year {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}
.m-jump-arrow {
    width: 40px;
    height: 40px;
    border: none;
    background: #f0f0f0;
    border-radius: 8px;
    font-size: 20px;
    color: #555;
    cursor: pointer;
}
.m-jump-ylabel { font-size: 20px; font-weight: 700; color: #2B4C7E; min-width: 64px; text-align: center; }
.m-jump-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.m-jump-mon {
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 8px;
    padding: 12px 0;
    font-family: inherit;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.m-jump-mon:active { background: #f4f6f9; }
.m-jump-mon.current { background: #2B4C7E; color: #fff; border-color: #2B4C7E; }

/* === Vista Mese (titoli, uno per riga, a tutto schermo) ================ */
/* .m-month riempie l'altezza di .m-content-fill: header fisso + griglia
 * flex:1 con righe di altezza uguale (grid-auto-rows:1fr). Niente scroll. */
.m-month {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.m-month-head {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 3px;
}
.m-month-head-cell {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 0;
}
/* gap 1px su sfondo grigio = linee di griglia (come la versione desktop). */
.m-month-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: 1px;
    background: #e5e5e5;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}
.m-month-cell {
    min-height: 0;
    background: #fff;
    padding: 2px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.m-month-cell.other-month { opacity: 0.45; }
.m-month-cell.gray { background: #F3F2F0; }
.m-month-cell:active { background: #eef2f7; }
.m-month-num {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 500;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 5px;
    flex-shrink: 0;
}
.m-month-num.bold { font-weight: 700; }
/* Lista titoli: occupa lo spazio rimasto, ciò che non entra viene tagliato. */
.m-month-evs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.m-month-ev {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    line-height: 1.35;
    color: #fff;
    border-radius: 2px;
    padding: 0 3px;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}
.m-month-ev.checked { opacity: 0.55; text-decoration: line-through; }
/* Taglio netto senza "…": è già evidente che il testo è troncato. */
.m-month-ev .m-ev-title { overflow: hidden; text-overflow: clip; white-space: nowrap; }
.m-month-ev .m-ev-ic { font-size: 8px; flex-shrink: 0; opacity: 0.9; }
.m-month-off {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background: #10B981;
}

/* === Vista Settimana — agenda verticale ================================ */
.m-agenda { display: flex; flex-direction: column; gap: 14px; }
.m-agenda-day {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
}
.m-agenda-day.today { border-color: #2B4C7E; box-shadow: 0 0 0 1px #2B4C7E; }
.m-agenda-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    background: #FAFAF8;
    border-bottom: 1px solid #f0f0f0;
}
.m-agenda-dow { font-size: 14px; font-weight: 600; }
.m-agenda-dow.bold { font-weight: 700; }
.m-agenda-off {
    font-size: 10px;
    font-weight: 600;
    color: #10B981;
    border: 1px solid #10B981;
    border-radius: 4px;
    padding: 0 5px;
}
.m-agenda-tip { font-size: 12px; margin-left: auto; }
.m-agenda-empty { padding: 10px 12px; color: #bbb; font-size: 13px; }
.m-agenda-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-top: 1px solid #f5f5f5;
    cursor: pointer;
    min-height: 44px;
}
.m-agenda-row:first-of-type { border-top: none; }
.m-agenda-row:active { background: #f4f6f9; }
.m-agenda-row.checked { opacity: 0.55; }
.m-agenda-row.checked .m-agenda-title { text-decoration: line-through; }
.m-agenda-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.m-agenda-time { font-size: 12px; color: #888; flex-shrink: 0; min-width: 78px; }
.m-agenda-title {
    font-size: 14px;
    color: #333;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-agenda-check { color: #555; }
.m-agenda-link { font-size: 11px; }

/* === Vista Giorno (riusa window.DayView / classi wk-*) ================= */
/* Header del giorno più compatto e scroller adattato all'altezza mobile,
 * tutto scoped sotto .m-app così phase7.css (desktop) resta intatto. */
.m-app .m-day .day-header { margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.m-app .m-day .day-header h2 { font-size: 17px; }
.m-app .wk-scroller { max-height: calc(100dvh - 210px); }
/* Gesto 7: pan-y permette lo scroll verticale e DISABILITA il pinch-zoom del
 * browser sul Giorno, così il nostro handler controlla la densità oraria. */
.m-day { touch-action: pan-y; }

/* === Barra inferiore =================================================== */
.m-bottombar {
    flex-shrink: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.04);
}
.m-tab {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    position: relative;
    padding: 0;
}
.m-tab.active { color: #2B4C7E; }
.m-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #2B4C7E;
}
.m-tab:active { background: #f4f6f9; }

/* === Foglio impostazioni (bottom sheet) ================================ */
.m-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 160;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.m-sheet {
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: 80vh;
    overflow-y: auto;
    animation: m-sheet-up 0.22s ease;
}
@keyframes m-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.m-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #ddd;
    margin: 6px auto 10px;
}
.m-sheet-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: #333;
    text-align: left;
    cursor: pointer;
    min-height: 52px;
}
.m-sheet-item:active { background: #f4f6f9; }
.m-sheet-icon { font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }

/* === Sidebar "Da fare" a tutto schermo ================================= */
.m-sidebar-wrap {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: #fff;
    display: flex;
}
.m-sidebar-wrap .sidebar {
    width: 100%;
    height: 100%;
    border-left: none;
}