/*
 * css/TODO_style.css — Stili della To Do List multi-progetto
 * ---------------------------------------------------------------------------
 * Variabili colore in :root (--todo-*). Sezioni:
 *  - layout pagina e toolbar (combo progetto, ricerca, pulsanti icona)
 *  - info box del progetto (totali, completati, scaduti, barra avanzamento)
 *  - righe dei task: rientro per livello (--livello), toggle sottotask,
 *    checkbox, testo con #tag, chip (contatore, priorita', scadenza), avatar
 *  - stati: selezionata, cursore, completata, in modifica, trascinamento
 *    (indicatori prima / dopo / dentro)
 *  - menu contestuale con sottomenu, popover (scadenza, assegna, sposta)
 *  - modale "Attività svolte" (.todo-dett*): stato, textarea note, zona di
 *    caricamento file con trascinamento, elenco allegati con barra di
 *    avanzamento e conferma di eliminazione in linea; chip note/allegati
 *  - "yellow fade technique" (.todo-flash) per il feedback di salvataggio
 *  - adattamento mobile e prefers-reduced-motion
 * Nessun font o risorsa esterna: si usa lo stack di sistema.
 * Versione Whitedove: regole globali limitate a .todo-app / .todo-dett; colori
 * e adattamenti al layout dell'extranet in css/TODO_whitedove.css.
 */
:root {
    --todo-primario: #2f77e3;
    --todo-primario-scuro: #1f5fc0;
    --todo-testo: #2c2f3c;
    --todo-testo-tenue: #8a8d9c;
    --todo-bordo: #dfe1e6;
    --todo-bordo-leggero: #eef0f4;
    --todo-hover: #eef1f7;
    --todo-selezione: #e3edfc;
    --todo-sfondo: #f5f6f9;
    --todo-pericolo: #e5484d;
    --todo-alta: #e5484d;
    --todo-media: #f2a33a;
    --todo-bassa: #3ba7f6;
    --todo-verde: #2fa46b;
    --todo-rientro: 28px;
}

/* Versione Whitedove: le regole globali (html, body, button, svg) sono
   limitate al modulo per non alterare il layout AdminLTE dell'extranet. */
.todo-app, .todo-app *, .todo-dett, .todo-dett * { box-sizing: border-box; }

.todo-app {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--todo-testo);
}

.todo-app button, .todo-dett button { font: inherit; }

.todo-app svg, .todo-dett svg { display: block; }

/* ------------------------------------------------------------ layout */

.todo-app {
    max-width: 960px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid var(--todo-bordo-leggero);
    border-right: 1px solid var(--todo-bordo-leggero);
}

.todo-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--todo-bordo);
    background: #fff;
    position: relative;
    z-index: 20;
}

.todo-toolbar__progetto {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 1 320px;
    min-width: 0;
}
.todo-toolbar__progetto .tcombo { flex: 1; }

.todo-toolbar__cerca {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 120px;
}
.todo-toolbar__lente {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    fill: var(--todo-testo-tenue);
    pointer-events: none;
}
#todo-cerca {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 34px;
    border: 1px solid var(--todo-bordo);
    border-radius: 6px;
    background: var(--todo-sfondo);
    font: inherit;
    color: var(--todo-testo);
    outline: none;
}
#todo-cerca:focus {
    background: #fff;
    border-color: var(--todo-primario);
    box-shadow: 0 0 0 3px rgba(47, 119, 227, .15);
}

.todo-toolbar__azioni { display: flex; gap: 2px; }

.todo-btn-icona {
    width: 34px;
    height: 34px;
    flex: none;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--todo-testo);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.todo-btn-icona svg { width: 18px; height: 18px; fill: currentColor; }
.todo-btn-icona:hover:not(:disabled) { background: var(--todo-hover); }
.todo-btn-icona:disabled { color: #c3c6d1; cursor: default; }
.todo-btn-icona:focus-visible { outline: 2px solid var(--todo-primario); outline-offset: 1px; }

.todo-btn {
    height: 32px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.todo-btn--primario { background: var(--todo-primario); color: #fff; }
.todo-btn--primario:hover { background: var(--todo-primario-scuro); }
.todo-btn--leggero { background: var(--todo-sfondo); border-color: var(--todo-bordo-leggero); color: var(--todo-testo); height: 28px; padding: 0 10px; font-size: 13px; }
.todo-btn--leggero:hover { background: var(--todo-hover); }
.todo-btn--leggero.is-pericolo { color: var(--todo-pericolo); }

/* ------------------------------------------------------------ info box */

.todo-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--todo-bordo-leggero);
    font-size: 13px;
    color: var(--todo-testo-tenue);
}
.todo-info[hidden] { display: none; }
.todo-info__voce strong { color: var(--todo-testo); font-weight: 600; }
.todo-info__voce.is-fatti strong { color: var(--todo-verde); }
.todo-info__voce.is-scaduti strong { color: var(--todo-pericolo); }
.todo-info__barra {
    margin-left: auto;
    width: 140px;
    height: 6px;
    border-radius: 3px;
    background: var(--todo-bordo-leggero);
    overflow: hidden;
}
.todo-info__barra-piena {
    display: block;
    height: 100%;
    background: var(--todo-verde);
    border-radius: 3px;
    transition: width .3s ease-out;
}

/* ------------------------------------------------------------ lista */

.todo-corpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0 40px;
}

.todo-lista { outline: none; }
.todo-lista:focus-visible .todo-riga.is-cursore { box-shadow: inset 2px 0 0 var(--todo-primario); }

.todo-riga {
    --livello: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 40px;
    padding: 6px 12px 6px calc(12px + var(--livello) * var(--todo-rientro));
    cursor: default;
    user-select: none;
    transition: background-color .12s;
}
.todo-riga:hover { background: var(--todo-hover); }
.todo-riga.is-selezionata { background: var(--todo-selezione); }
.todo-riga.is-cursore.is-selezionata { background: #d6e5fb; }

.todo-riga__toggle {
    flex: none;
    width: 22px;
    height: 28px;
    margin-right: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--todo-testo-tenue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.todo-riga__toggle svg { width: 16px; height: 16px; fill: currentColor; transition: transform .15s; }
.todo-riga__toggle.is-aperto svg { transform: rotate(90deg); }
.todo-riga__toggle.is-vuoto { cursor: default; visibility: hidden; }
.todo-riga__toggle:hover { color: var(--todo-testo); }

.todo-check {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 5px 10px 0 0;
    padding: 0;
    border: 2px solid #b9bdc9;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s, border-color .15s;
}
.todo-check svg { width: 14px; height: 14px; fill: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.todo-check:hover { border-color: var(--todo-primario); }
.prio-alta > .todo-check { border-color: var(--todo-alta); }
.prio-media > .todo-check { border-color: var(--todo-media); }
.prio-bassa > .todo-check { border-color: var(--todo-bassa); }
.is-completata > .todo-check { background: var(--todo-primario); border-color: var(--todo-primario); }
.is-completata > .todo-check svg { opacity: 1; transform: scale(1); }

.todo-riga__corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding-top: 4px;
}

.todo-riga__testo {
    flex: 0 1 auto;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
}
.todo-riga__testo.is-vuoto { color: var(--todo-testo-tenue); font-style: italic; }
.todo-riga__testo mark { background: #fff1a8; color: inherit; border-radius: 2px; }
.is-completata .todo-riga__testo { color: var(--todo-testo-tenue); text-decoration: line-through; text-decoration-color: rgba(138, 141, 156, .6); }

.todo-tag {
    color: var(--todo-primario);
    cursor: pointer;
    border-radius: 3px;
}
.todo-tag:hover { text-decoration: underline; }

.todo-riga__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin-left: auto;
}

.todo-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--todo-sfondo);
    font-size: 12px;
    color: var(--todo-testo-tenue);
    white-space: nowrap;
}
.todo-chip svg { width: 12px; height: 12px; fill: currentColor; }
.todo-chip[data-azione] { cursor: pointer; }
.todo-chip[data-azione]:hover { filter: brightness(.96); }
.todo-chip--contatore.is-completo { color: var(--todo-verde); }
.todo-chip--prio.prio-alta { color: var(--todo-alta); background: #fdecec; }
.todo-chip--prio.prio-media { color: #c77a12; background: #fdf3e3; }
.todo-chip--prio.prio-bassa { color: #1e82cf; background: #e8f4fe; }
.todo-chip--data.is-scaduta { color: var(--todo-pericolo); background: #fdecec; font-weight: 600; }
.todo-chip--data.is-oggi { color: var(--todo-verde); background: #e6f5ee; font-weight: 600; }
.is-completata .todo-chip { opacity: .65; }

.todo-avatar-gruppo { display: inline-flex; cursor: pointer; }
.todo-avatar {
    --avatar: #8a8d9c;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--avatar);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    flex: none;
}
.todo-avatar-gruppo .todo-avatar + .todo-avatar { margin-left: -7px; }
.todo-avatar--piu { background: #c3c6d1; }

.todo-riga__menu {
    flex: none;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--todo-testo-tenue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.todo-riga__menu svg { width: 16px; height: 16px; fill: currentColor; }
.todo-riga:hover .todo-riga__menu, .todo-riga.is-cursore .todo-riga__menu { opacity: 1; }
.todo-riga__menu:hover { background: rgba(44, 47, 60, .08); color: var(--todo-testo); }

/* editor inline */
.todo-riga.is-modifica { background: #fff; box-shadow: inset 0 0 0 1px var(--todo-primario); }
.todo-editor {
    flex: 1 1 240px;
    min-width: 0;
    margin: -3px 0;
    padding: 2px 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    line-height: 20px;
    color: var(--todo-testo);
    resize: none;
    overflow: hidden;
    outline: none;
}

/* trascinamento */
.todo-lista.is-trascinamento .todo-riga:hover { background: transparent; }
.todo-riga.is-trascinata { opacity: .45; }
.todo-riga.drop-prima::before,
.todo-riga.drop-dopo::after {
    content: "";
    position: absolute;
    left: calc(12px + var(--livello) * var(--todo-rientro));
    right: 12px;
    height: 2px;
    background: var(--todo-primario);
    border-radius: 1px;
}
.todo-riga.drop-prima::before { top: -1px; }
.todo-riga.drop-dopo::after { bottom: -1px; }
.todo-riga.drop-dentro { background: var(--todo-selezione); box-shadow: inset 0 0 0 2px var(--todo-primario); }

/* aggiungi / vuoto */
.todo-aggiungi {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    padding: 8px 12px 8px 36px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--todo-testo-tenue);
    cursor: pointer;
    text-align: left;
}
.todo-aggiungi:hover { color: var(--todo-primario); }
.todo-aggiungi__piu {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--todo-primario);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
}
.todo-aggiungi[hidden] { display: none; }

.todo-vuoto {
    padding: 56px 24px 24px;
    text-align: center;
    color: var(--todo-testo-tenue);
}
.todo-vuoto__titolo { font-size: 17px; font-weight: 600; color: var(--todo-testo); margin-bottom: 6px; }
.todo-vuoto__testo { margin-bottom: 16px; }

/* ------------------------------------------------------------ menu */

.todo-menu {
    position: fixed;
    z-index: 100;
    min-width: 230px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--todo-bordo);
    border-radius: 8px;
    box-shadow: 0 10px 32px rgba(44, 47, 60, .18);
    font-size: 14px;
}
.todo-menu[hidden] { display: none; }

.todo-menu__voce {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
}
.todo-menu__voce:hover, .todo-menu__voce:focus { background: var(--todo-hover); }
.todo-menu__voce.is-disabilitata { color: #c3c6d1; cursor: default; background: transparent; }
.todo-menu__voce.is-pericolo { color: var(--todo-pericolo); }
.todo-menu__segno { width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center; }
.todo-menu__segno svg { width: 16px; height: 16px; fill: var(--todo-primario); }
.todo-menu__pallino { width: 10px; height: 10px; border-radius: 50%; }
.todo-menu__pallino.prio-alta { background: var(--todo-alta); }
.todo-menu__pallino.prio-media { background: var(--todo-media); }
.todo-menu__pallino.prio-bassa { background: var(--todo-bassa); }
.todo-menu__segno .todo-menu__pallino + svg { display: none; }
.todo-menu__label { flex: 1; }
.todo-menu__tasto { color: var(--todo-testo-tenue); font-size: 12px; margin-left: 16px; }
.todo-menu__freccia { width: 14px; height: 14px; fill: var(--todo-testo-tenue); }
.todo-menu__sep { height: 1px; margin: 5px 0; background: var(--todo-bordo-leggero); }

.todo-menu--sub {
    position: absolute;
    top: -7px;
    left: 100%;
    display: none;
}
.todo-menu__voce.has-figli:hover > .todo-menu--sub,
.todo-menu__voce.is-aperta > .todo-menu--sub { display: block; }
.todo-menu--sub.is-sinistra { left: auto; right: 100%; }
.todo-menu--sub.is-su { top: auto; bottom: -7px; }

/* ------------------------------------------------------------ popover */

.todo-popover {
    position: fixed;
    z-index: 90;
    width: 300px;
    background: #fff;
    border: 1px solid var(--todo-bordo);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(44, 47, 60, .18);
}
.todo-popover[hidden] { display: none; }
.todo-pop { padding: 12px; }
.todo-pop__titolo { font-weight: 600; margin-bottom: 8px; }
.todo-pop__data {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--todo-bordo);
    border-radius: 6px;
    font: inherit;
    color: var(--todo-testo);
}
.todo-pop__data:focus { outline: none; border-color: var(--todo-primario); }
.todo-pop__scelte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.todo-pop__lista { margin-top: 6px; max-height: 260px; overflow-y: auto; }
.todo-pop__persona {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.todo-pop__persona.is-attivo, .todo-pop__persona:hover { background: var(--todo-hover); }
.todo-pop__spunta {
    width: 16px;
    height: 16px;
    border: 2px solid #b9bdc9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.todo-pop__spunta svg { width: 12px; height: 12px; fill: #fff; opacity: 0; }
.todo-pop__persona.is-spuntata .todo-pop__spunta { background: var(--todo-primario); border-color: var(--todo-primario); }
.todo-pop__persona.is-spuntata .todo-pop__spunta svg { opacity: 1; }
.todo-pop__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-pop__elimina {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--todo-testo-tenue);
    cursor: pointer;
    opacity: 0;
    padding: 0;
    font-size: 16px;
    line-height: 18px;
}
.todo-pop__persona:hover .todo-pop__elimina { opacity: 1; }
.todo-pop__elimina:hover { color: var(--todo-pericolo); background: #fdecec; }
.todo-pop__persona--nuova { color: var(--todo-primario); font-weight: 500; padding-left: 30px; }
.todo-pop__vuoto { padding: 8px 6px; color: var(--todo-testo-tenue); font-size: 13px; }

/* scorciatoie (dialog SweetAlert2) */
.todo-scorciatoie { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.todo-scorciatoie td { padding: 5px 6px; border-bottom: 1px solid var(--todo-bordo-leggero); }
.todo-scorciatoie td:first-child { white-space: nowrap; width: 1%; }
.todo-scorciatoie kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--todo-bordo);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--todo-sfondo);
    font: 12px/18px system-ui, sans-serif;
}

/* ------------------------------------------------------------ attivita' svolte */

.todo-chip--dettaglio { color: var(--todo-primario); background: #e8f0fd; }
.todo-chip--dettaglio svg + svg { margin-left: 2px; }

.todo-dett-popup { text-align: left; }
.swal2-popup.todo-dett-popup .swal2-html-container { margin: 8px 24px 0; text-align: left; overflow: visible; }
.todo-dett-titolo {
    font-size: 19px;
    text-align: left;
    padding: 20px 48px 0 24px;
    word-break: break-word;
}

.todo-dett { font-size: 14px; color: var(--todo-testo); }

.todo-dett__stato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--todo-sfondo);
    color: var(--todo-testo-tenue);
    font-size: 12px;
}
.todo-dett__stato svg { width: 14px; height: 14px; fill: currentColor; }
.todo-dett__stato.is-fatto { background: #e6f5ee; color: var(--todo-verde); font-weight: 600; }

.todo-dett__avviso {
    margin-top: 10px;
    padding: 8px 12px;
    border-left: 3px solid var(--todo-primario);
    background: #f0f6fe;
    border-radius: 0 6px 6px 0;
    color: var(--todo-testo);
}

.todo-dett__label { display: block; margin: 16px 0 6px; font-weight: 600; }

.todo-dett__note {
    width: 100%;
    min-height: 120px;
    padding: 8px 10px;
    border: 1px solid var(--todo-bordo);
    border-radius: 6px;
    font: inherit;
    line-height: 20px;
    color: var(--todo-testo);
    resize: vertical;
    outline: none;
}
.todo-dett__note:focus { border-color: var(--todo-primario); box-shadow: 0 0 0 3px rgba(47, 119, 227, .15); }
.todo-dett__salvato { min-height: 16px; margin-top: 2px; font-size: 12px; color: var(--todo-verde); text-align: right; }

.todo-dett__zona {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border: 2px dashed var(--todo-bordo);
    border-radius: 8px;
    color: var(--todo-testo-tenue);
    transition: border-color .15s, background-color .15s;
}
.todo-dett__zona.is-sopra { border-color: var(--todo-primario); background: #f0f6fe; }
.todo-dett__zona-icona { width: 20px; height: 20px; fill: currentColor; }
.todo-dett__zona-testo { font-size: 13px; }

.todo-dett__errore {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fdecec;
    color: var(--todo-pericolo);
    font-size: 13px;
}
.todo-dett__errore[hidden] { display: none; }

.todo-dett__lista { margin-top: 8px; max-height: 240px; overflow-y: auto; }
.todo-dett__vuoto { padding: 6px 2px; font-size: 13px; color: var(--todo-testo-tenue); }

.todo-dett__file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--todo-bordo-leggero);
}
.todo-dett__file-icona { width: 20px; height: 20px; flex: none; fill: #9aa4b8; }
.todo-dett__file-info { flex: 1; min-width: 0; }
.todo-dett__file-nome {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--todo-primario);
    text-decoration: none;
}
a.todo-dett__file-nome:hover { text-decoration: underline; }
.todo-dett__file.is-caricamento .todo-dett__file-nome { color: var(--todo-testo-tenue); }
.todo-dett__file-meta { font-size: 12px; color: var(--todo-testo-tenue); }
.todo-dett__barra { height: 4px; margin-top: 4px; border-radius: 2px; background: var(--todo-bordo-leggero); overflow: hidden; }
.todo-dett__barra-piena { width: 0; height: 100%; background: var(--todo-primario); transition: width .15s; }

.todo-dett__file-elimina {
    width: 30px;
    height: 30px;
    flex: none;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--todo-testo-tenue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.todo-dett__file-elimina svg { width: 16px; height: 16px; fill: currentColor; }
.todo-dett__file-elimina:hover { color: var(--todo-pericolo); background: #fdecec; }
.todo-dett__conferma { display: flex; align-items: center; gap: 6px; font-size: 13px; flex: none; }

/* ------------------------------------------------------------ yellow fade */

@keyframes todo-yellow-fade {
    0%   { background-color: #fff3a0; }
    100% { background-color: transparent; }
}
.todo-flash { animation: todo-yellow-fade 1.5s ease-out; }
.todo-riga.is-selezionata.todo-flash { animation-name: todo-yellow-fade-sel; }
@keyframes todo-yellow-fade-sel {
    0%   { background-color: #fff3a0; }
    100% { background-color: var(--todo-selezione); }
}
.tcombo.todo-flash .tcombo__input { animation: todo-yellow-fade 1.5s ease-out; }
.todo-dett__note.todo-flash { animation: todo-yellow-fade 1.5s ease-out; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 640px) {
    :root { --todo-rientro: 18px; }
    .todo-toolbar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
    .todo-toolbar__progetto { flex: 1 1 100%; order: 1; }
    .todo-toolbar__cerca { flex: 1 1 0; order: 2; }
    .todo-toolbar__azioni { order: 3; }
    .todo-info { padding: 8px 12px; gap: 10px; }
    .todo-info__barra { width: 70px; }
    .todo-riga { padding-right: 6px; }
    .todo-riga__menu { opacity: 1; }
    .todo-popover { width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
    .todo-app *, .todo-app *::before, .todo-app *::after { transition: none !important; animation-duration: .01ms !important; }
}