/*
 * css/TODO_metis.css — To Do gratuito nei colori e nella pagina di MetisItalia
 * ---------------------------------------------------------------------------
 * Caricato dopo TODO_combo.css e TODO_style.css (ToDo/index.php, pagina
 * index.php?idPg=21 dentro il guscio del sito). Non cambia la struttura
 * dell'app, solo:
 *  - palette: blu METIS #15476c e primario #007bff, verde dei completati;
 *  - testata della pagina, barra della lista (nome, link, invia, esci,
 *    elimina) e pagina iniziale "Crea la tua lista" (prefisso TODO_mi_);
 *  - altezza dell'app adattata allo spazio fra header e footer del sito;
 *  - SweetAlert2 v11 del modulo a grandezza normale; menu e popover sopra
 *    l'header fisso del sito.
 */
:root {
    --todo-primario: #007bff;
    --todo-primario-scuro: #15476c;
    --todo-hover: #eef4fb;
    --todo-selezione: #dceafc;
    --todo-sfondo: #f4f7fb;
    --todo-verde: #2e9e5b;
}
.TODO_mi_pagina { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; }
.TODO_mi_testa h1 { color: #15476c; font-size: 30px; font-weight: 800; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.TODO_mi_testa p { color: #4a5a68; font-size: 16px; margin: 0 0 18px !important; max-width: 760px; }
.TODO_mi_avviso { background: #fff1db; color: #8a5300; border-radius: 12px; padding: 10px 14px; font-weight: 600; margin: 0 0 14px !important; }

/* pagina iniziale */
.TODO_mi_inizio { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.TODO_mi_box { background: #fff; border: 1px solid #e3e8ef; border-radius: 18px; padding: 22px; box-shadow: 0 4px 18px rgba(21, 71, 108, .06); }
.TODO_mi_box h2 { font-size: 21px; color: #15476c; margin: 0 0 12px; font-weight: 800; }
.TODO_mi_punti { margin: 0 0 16px; padding-left: 20px; color: #2b3a47; }
.TODO_mi_punti li { margin: 4px 0; }
.TODO_mi_form { display: flex; flex-direction: column; gap: 6px; }
.TODO_mi_form label { font-weight: 700; color: #15476c; font-size: 14px; margin-top: 6px; }
.TODO_mi_form input { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #c9d4e0; border-radius: 10px; }
.TODO_mi_form input:focus { outline: 3px solid rgba(0, 123, 255, .25); border-color: #007bff; }
.TODO_mi_nota { font-size: 13px; color: #5d6b78; margin: 0 0 10px !important; }
.TODO_mi_box_piccolo p { color: #4a5a68; margin: 0 0 12px !important; }

/* barra della lista */
.TODO_mi_barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #15476c; color: #fff;
                 border-radius: 14px 14px 0 0; padding: 10px 14px; max-width: 960px; margin: 0 auto; }
.TODO_mi_nome_lista { font-size: 17px; }
.TODO_mi_azioni { display: flex; flex-wrap: wrap; gap: 6px; }
.TODO_mi_btn { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; border-radius: 9px; padding: 7px 12px;
               font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.TODO_mi_btn:hover { background: rgba(255, 255, 255, .2); }
.TODO_mi_rosso { border-color: #ffb3b3; color: #ffd6d6; }

/* app dentro la pagina del sito */
.TODO_mi_pagina .todo-app { height: calc(100vh - 260px); min-height: 520px; border: 1px solid #e3e8ef; border-top: 0; border-radius: 0 0 14px 14px; }
.TODO_mi_pagina .todo-toolbar { background: #f8fafc; }
.todo-riga.is-cursore.is-selezionata { background: #cfe2fb; }
.todo-aggiungi:hover { color: var(--todo-primario-scuro); }
body .swal2-container .swal2-popup { font-size: 1rem !important; }
body .swal2-container .swal2-toast { font-size: .875rem !important; }
.todo-menu { z-index: 1041; }
.todo-popover { z-index: 1040; }
@keyframes TODO_mi_flash { 0% { background-color: #fff3a0; } 100% { background-color: transparent; } }
.TODO_mi_flash { animation: TODO_mi_flash 1.4s ease-out; }
@media (max-width: 760px) {
    .TODO_mi_inizio { grid-template-columns: 1fr; }
    .TODO_mi_testa h1 { font-size: 24px; }
    .TODO_mi_pagina .todo-app { height: auto; min-height: 70vh; }
    .TODO_mi_azioni { width: 100%; }
}