/* =========================================================
   Design system ispirato a Pro Senectute
   ========================================================= */

:root {
    /* ===== Brand: VERDI ufficiali Pro Senectute =====
       (mantengo i nomi "pro-petrol*" per non spezzare le classi;
        i valori sono però i verdi del brand)
    */
    --pro-petrol:        #007b48;   /* darkgreen (primario) */
    --pro-petrol-dark:   #005f37;   /* verde più scuro per hover/active */
    --pro-petrol-50:     #e7f1ec;   /* verde pallido per sfondi soft */
    --pro-petrol-100:    #c9dfd2;   /* verde chiaro per bordi/hover */

    /* Verdi secondari */
    --pro-green:         #37aa32;   /* verde vivo (success / highlight) */
    --pro-green-dark:    #2a8528;
    --pro-green-50:      #e7f4e6;
    --pro-olivgreen:     #bbcf00;   /* lime (accenti leggeri) */
    --pro-olivgreen-50:  #f5f8d0;

    /* Accent caldo (per azioni distruttive / contrasto) */
    --pro-cinnabar:      #E14B34;
    --pro-cinnabar-dark: #b73a26;
    --pro-cinnabar-50:   #fceae6;   /* velo caldo per sfondi al passaggio del mouse */

    /* Stati */
    --pro-success:    #37aa32;
    --pro-success-bg: #e7f4e6;
    --pro-warning:    #f0ad4e;
    --pro-danger:     #d9534f;
    --pro-info:       #5bc0de;

    /* Neutri */
    --pro-cararra:    #F6F6F2;
    --pro-lightgrey:  #edece5;
    --pro-pearlgrey:  #E1E3E1;
    --pro-dividers:   #e8e8dd;
    --pro-hairline:   #d2d2bc;
    --pro-carbongrey: #919291;
    --pro-text:       #1a1a1a;
    --pro-text-muted: #5b5d5b;
    --white:          #ffffff;

    /* Tipografia */
    --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-base-size: 15px;

    /* Spaziature / raggi */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0, 95, 55, 0.07), 0 1px 1px rgba(0, 95, 55, 0.04);
    --shadow:    0 4px 12px rgba(0, 95, 55, 0.10), 0 1px 3px rgba(0, 95, 55, 0.05);
    --shadow-lg: 0 12px 32px rgba(0, 95, 55, 0.14), 0 4px 8px rgba(0, 95, 55, 0.07);

    /* Bootstrap override */
    --bs-primary: var(--pro-petrol);
    --bs-primary-rgb: 0, 123, 72;
    --bs-link-color: var(--pro-petrol-dark);
    --bs-link-hover-color: var(--pro-petrol);
    --bs-border-color: var(--pro-dividers);
}

/* =========================================================
   Reset / base
   ========================================================= */
html { font-size: var(--font-base-size); }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    font-family: var(--font-sans);
    color: var(--pro-text);
    background-color: var(--pro-cararra);
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Sfondo ambientale "mesh": 6 aloni di brand color stratificati per dare profondità,
   resta chiarissimo e performante (fixed pseudo-element, no animazioni). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* Top-right: lime caldo */
        radial-gradient(820px 620px at 100% -5%, rgba(187, 207, 0, 0.22), transparent 58%),
        /* Mid-right: verde vivo */
        radial-gradient(720px 720px at 110% 45%, rgba(55, 170, 50, 0.22), transparent 60%),
        /* Bottom-right: petrol primario */
        radial-gradient(900px 720px at 95% 108%, rgba(0, 123, 72, 0.22), transparent 60%),
        /* Bottom-left: petrol scuro */
        radial-gradient(900px 720px at -5% 102%, rgba(0, 95, 55, 0.18), transparent 60%),
        /* Mid-left: blue-pine come contrasto freddo (depth) */
        radial-gradient(720px 620px at -10% 40%, rgba(83, 120, 128, 0.13), transparent 60%),
        /* Top-left: warm wash leggerissimo */
        radial-gradient(620px 520px at -5% -5%, rgba(255, 252, 240, 0.7), transparent 60%),
        /* Base diagonale tenue dal verde chiaro al cararra */
        linear-gradient(160deg, #eaf2ea 0%, #f1f4ec 45%, var(--pro-cararra) 100%);
}
/* Riservo spazio inferiore solo quando il footer è davvero renderizzato (utente loggato) */
body.is-auth {
    padding-bottom: calc(var(--app-footer-height, 56px) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--pro-petrol-dark);
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
h3 { font-size: 1.2rem; }

a { color: var(--pro-petrol-dark); text-decoration: none; }
a:hover { color: var(--pro-petrol); text-decoration: underline; }

hr { border-color: var(--pro-dividers); opacity: 1; }

/* =========================================================
   Topbar
   ========================================================= */
.app-header {
    /* NB: NIENTE backdrop-filter qui — creerebbe un containing block che rompe
       il position:fixed di offcanvas e modali dentro l'header. */
    background: var(--white);
    border-bottom: 1px solid var(--pro-dividers);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--shadow-sm);
}
/* Striscia accent verde brand sopra l'header */
.app-header::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg,
        var(--pro-petrol-dark) 0%,
        var(--pro-petrol) 35%,
        var(--pro-green) 70%,
        var(--pro-olivgreen) 100%);
}

.app-header .navbar { padding-block: .65rem; }

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--pro-petrol-dark) !important;
    text-decoration: none;
    letter-spacing: -0.01em;
}
.app-brand:hover { color: var(--pro-petrol) !important; text-decoration: none; }

.app-brand__logo {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
}
.app-brand__logo svg { width: 22px; height: 22px; }
.app-brand__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.app-nav { gap: .25rem; }
.app-nav .nav-link {
    color: var(--pro-text);
    font-weight: 500;
    padding: .5rem .85rem;
    border-radius: 8px;
    transition: background-color .15s, color .15s;
}
.app-nav .nav-link:hover { background: var(--pro-cararra); color: var(--pro-petrol-dark); }
.app-nav .nav-link.active {
    background: var(--pro-petrol-50);
    color: var(--pro-petrol-dark);
}
.app-nav .nav-link i { opacity: .8; }

/* =========================================================
   Dropdown di navigazione raggruppati (Chef, Admin)
   Desktop: menu a card con icone; Mobile: voci espanse nel drawer.
   ========================================================= */
.nav-dropdown .dropdown-toggle { display: inline-flex; align-items: center; }
.nav-dropdown .dropdown-toggle::after {
    margin-left: .4rem;
    transition: transform .15s ease;
}
.nav-dropdown.show .dropdown-toggle::after { transform: rotate(180deg); }

.app-dropdown.dropdown-menu {
    --bs-dropdown-min-width: 17rem;
    padding: .5rem;
    border: 1px solid var(--pro-dividers);
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(0, 95, 55, .18);
    margin-top: .45rem;
}
@media (min-width: 768px) {
    .app-dropdown.dropdown-menu { animation: appDropIn .16s ease-out; }
}
@keyframes appDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.app-dropdown .dropdown-header {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--pro-text-muted); font-weight: 700;
    padding: .3rem .55rem .45rem;
}
.app-dropdown .dropdown-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem; border-radius: 12px;
    white-space: normal;
    transition: background-color .12s, color .12s;
}
.app-dropdown .dropdown-item:hover,
.app-dropdown .dropdown-item:focus {
    background: var(--pro-cararra); color: var(--pro-petrol-dark);
}
.app-dropdown .dropdown-item.active {
    background: var(--pro-petrol-50); color: var(--pro-petrol-dark);
}
.app-dropdown .dropdown-item > i {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: var(--pro-petrol-50);
    color: var(--pro-petrol-dark);
    font-size: 1.3rem;
    transition: background-color .12s, color .12s;
}
.app-dropdown .dropdown-item:hover > i,
.app-dropdown .dropdown-item.active > i {
    background: var(--pro-petrol);
    color: #fff;
}
.app-dropdown .dd-text { display: flex; flex-direction: column; line-height: 1.2; }
.app-dropdown .dd-text strong { font-weight: 600; font-size: .95rem; }
.app-dropdown .dd-text small { color: var(--pro-text-muted); font-size: .78rem; }
.app-dropdown .dropdown-item:hover .dd-text small { color: var(--pro-petrol-dark); }

/* --- Mobile (<md): il dropdown vive dentro il drawer, sempre espanso --- */
@media (max-width: 767.98px) {
    .app-offcanvas .nav-dropdown .dropdown-menu.app-dropdown {
        display: block;
        position: static !important;
        float: none;
        inset: auto !important;
        transform: none !important;
        border: 0; box-shadow: none; padding: 0; margin: .1rem 0 .25rem;
        background: transparent; animation: none;
    }
    /* il toggle "Admin" diventa l'etichetta di sezione del drawer */
    .app-offcanvas .nav-dropdown .dropdown-toggle.nav-link {
        margin: 1rem .25rem .15rem;
        padding: 0 .65rem;
        font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
        color: var(--pro-text-muted); font-weight: 700;
        pointer-events: none;
        background: transparent;
    }
    .app-offcanvas .nav-dropdown .dropdown-toggle::after { display: none; }
    .app-offcanvas .nav-dropdown .dropdown-toggle.nav-link > i { display: none; }
    .app-offcanvas .app-dropdown .dropdown-item {
        padding: .7rem .9rem; border-radius: 10px;
    }
    .app-offcanvas .app-dropdown .dropdown-item > i {
        width: 34px; height: 34px; font-size: 1.05rem; border-radius: 9px;
    }
    .app-offcanvas .app-dropdown .dd-text small { display: none; }
}

/* =========================================================
   Phosphor Duotone — rinforzo del secondo layer (default 0.2
   troppo sbiadito) e allineamento verticale col testo.
   ========================================================= */
.ph-duotone {
    vertical-align: -0.125em;
}
.ph-duotone::after {
    opacity: 0.38 !important;
}

/* Hamburger button: icona Phosphor (ph-list), sempre visibile e ben dimensionata */
.app-burger {
    border: 1px solid var(--pro-dividers);
    color: var(--pro-petrol-dark);
    background: transparent;
    padding: .3rem .55rem;
    border-radius: 10px;
    line-height: 1;
}
.app-burger:hover, .app-burger:focus {
    background: var(--pro-cararra);
    color: var(--pro-petrol);
    box-shadow: 0 0 0 .2rem rgba(0, 123, 72, .18);
}
.app-burger i { font-size: 1.6rem; vertical-align: middle; }

/* =========================================================
   Offcanvas (menu mobile drawer) — Bootstrap 5.1 non ha
   offcanvas-md, quindi rendiamo l'offcanvas "inline" su md+
   e drawer su <md.
   ========================================================= */

/* --- Desktop (md+): comporta l'offcanvas come barra inline orizzontale --- */
@media (min-width: 768px) {
    .app-offcanvas {
        position: static !important;
        visibility: visible !important;
        background: transparent !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        border: none !important;
        box-shadow: none !important;
        transition: none !important;
        display: flex;
        flex-grow: 1;
        z-index: auto !important;
    }
    .app-offcanvas .offcanvas-body {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        padding: 0;
        flex-direction: row;
    }
    .app-offcanvas .app-nav { flex-direction: row; }
    .app-offcanvas .app-user-area { margin-left: auto; }
    .app-offcanvas .nav-section { display: none; }
}

/* --- Mobile (<md): drawer ben spaziato e tappabile --- */
@media (max-width: 767.98px) {
    .app-offcanvas {
        width: min(86vw, 360px) !important;
        background: var(--white);
    }
    .app-offcanvas .offcanvas-header {
        border-bottom: 1px solid var(--pro-dividers);
        padding: 1rem 1.15rem;
    }
    .app-offcanvas .offcanvas-header .app-brand__logo { width: 32px; height: 32px; flex-basis: 32px; }
    .app-offcanvas .offcanvas-body {
        padding: .75rem .9rem 1rem;
        display: flex;
        flex-direction: column;
    }
    .app-offcanvas .app-nav {
        flex-direction: column;
        gap: .15rem;
        width: 100%;
    }
    .app-offcanvas .app-nav .nav-link {
        display: flex;
        align-items: center;
        padding: .75rem .9rem;
        font-size: 1rem;
        border-radius: 10px;
    }
    .app-offcanvas .app-nav .nav-link i { font-size: 1.1rem; margin-right: .5rem; }
    /* Etichetta sezione "Amministrazione" */
    .app-offcanvas .nav-section {
        margin: 1rem .25rem .25rem;
        padding: 0;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--pro-text-muted);
        font-weight: 700;
    }
    /* Area utente + Esci in fondo al drawer.
       In riga i pulsanti andrebbero a capo ammassandosi: nel drawer diventano
       righe a tutta larghezza, con la stessa resa delle voci di navigazione. */
    .app-offcanvas .app-user-area {
        margin-top: auto;
        padding-top: .85rem;
        border-top: 1px solid var(--pro-dividers);
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: .35rem;
    }
    /* Il separatore verticale non ha senso in colonna */
    .app-offcanvas .app-user-area .vr { display: none; }

    .app-offcanvas .app-user-area .app-logout-form { width: 100%; }
    .app-offcanvas .app-user-area .btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .55rem;
        padding: .7rem .9rem;
        font-size: .97rem;
        border-radius: 10px;
        text-align: left;
    }
    .app-offcanvas .app-user-area .btn i { font-size: 1.15rem; }
    .app-offcanvas .app-user-area .btn span { margin-left: 0 !important; }

    /* L'utente collegato va in cima al blocco: prima chi sei, poi cosa puoi fare */
    .app-offcanvas .app-user-area .user-chip {
        order: -1;
        width: 100%;
        justify-content: flex-start;
        gap: .6rem;
        padding: .6rem .75rem;
        margin-bottom: .3rem;
        border-radius: 10px;
        background: var(--pro-cararra);
        max-width: none;
    }
    .app-offcanvas .app-user-area .user-chip > span:last-child {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* "Esci" chiude la lista e si distingue dalle azioni ordinarie */
    .app-offcanvas .app-user-area .app-logout-form { order: 10; margin-top: .15rem; }
    .app-offcanvas .app-user-area .app-logout-form .btn {
        color: var(--pro-cinnabar);
        border-color: rgba(225, 75, 52, .35);
    }
    .app-offcanvas .app-user-area .app-logout-form .btn:hover {
        background: rgba(225, 75, 52, .08);
        border-color: var(--pro-cinnabar);
        color: var(--pro-cinnabar);
    }
}

/* User chip */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem .35rem .35rem;
    background: var(--pro-cararra);
    border: 1px solid var(--pro-dividers);
    border-radius: 999px;
    font-size: .9rem;
    color: var(--pro-text);
    /* Da quando è un collegamento al profilo: niente sottolineatura, ma si deve
       capire che è cliccabile. */
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.user-chip:hover,
.user-chip:focus-visible {
    background: var(--white);
    border-color: var(--pro-petrol);
    color: var(--pro-text);
}
.user-chip--attivo {
    background: var(--pro-petrol-50);
    border-color: var(--pro-petrol);
}
.user-chip__avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pro-petrol), var(--pro-petrol-dark));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}
.signin-btn {
    background: var(--pro-petrol);
    color: #fff !important;
    padding: .5rem 1rem !important;
    border-radius: 999px;
    font-weight: 600;
}
.signin-btn:hover { background: var(--pro-petrol-dark); }

/* =========================================================
   Main / cards
   ========================================================= */
.app-main { padding-block: 2rem 4rem; }

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header h1 { margin: 0; }
.page-header .page-sub { color: var(--pro-text-muted); margin-top: .25rem; }

.card {
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.card-soft {
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

/* Stat / dashboard tile */
.tile {
    display: block;
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 1.1rem;
    text-decoration: none;
    color: var(--pro-text);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    height: 100%;
}
.tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--pro-petrol-100);
    text-decoration: none;
    color: var(--pro-text);
}
.tile {
    border-left: 4px solid var(--pro-petrol);
}
.tile__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pro-petrol-50);
    color: var(--pro-petrol-dark);
    margin-bottom: .9rem;
    font-size: 1.4rem;
}
.tile__title { font-weight: 700; color: var(--pro-petrol-dark); margin: 0 0 .2rem; }
.tile__desc { color: var(--pro-text-muted); font-size: .92rem; margin: 0; }

/* Variante verde vivo (es. piatti) */
.tile--accent { border-left-color: var(--pro-green); }
.tile--accent .tile__icon { background: var(--pro-green-50); color: var(--pro-green-dark); }
.tile--accent .tile__title { color: var(--pro-green-dark); }

/* Variante lime (es. ingredienti) */
.tile--success { border-left-color: var(--pro-olivgreen); }
.tile--success .tile__icon { background: var(--pro-olivgreen-50); color: #6e7a00; }
.tile--success .tile__title { color: #6e7a00; }

/* =========================================================
   Bottoni
   ========================================================= */
.btn { border-radius: 8px; font-weight: 600; transition: all .15s; }
.btn:focus, .btn:active:focus { box-shadow: 0 0 0 .2rem rgba(0, 123, 72, .25); }

.btn-primary {
    background: var(--pro-petrol);
    border-color: var(--pro-petrol);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--pro-petrol-dark) !important;
    border-color: var(--pro-petrol-dark) !important;
}
.btn-outline-primary {
    color: var(--pro-petrol-dark);
    border-color: var(--pro-petrol);
}
.btn-outline-primary:hover {
    background: var(--pro-petrol);
    border-color: var(--pro-petrol);
}
.btn-outline-secondary {
    color: var(--pro-text);
    border-color: var(--pro-hairline);
    background: var(--white);
}
.btn-outline-secondary:hover {
    background: var(--pro-lightgrey);
    border-color: var(--pro-carbongrey);
    color: var(--pro-text);
}
.btn-outline-danger { color: var(--pro-cinnabar-dark); border-color: var(--pro-cinnabar); }
.btn-outline-danger:hover { background: var(--pro-cinnabar); border-color: var(--pro-cinnabar); color:#fff; }
.btn-link { color: var(--pro-petrol-dark); }

/* =========================================================
   Form
   ========================================================= */
.form-control, .form-select {
    border-radius: 8px;
    border-color: var(--pro-hairline);
    background: var(--white);
}
.form-control:focus, .form-select:focus {
    border-color: var(--pro-petrol);
    box-shadow: 0 0 0 .2rem rgba(0, 123, 72, .18);
}
.form-label { font-weight: 600; color: var(--pro-text); }

/* =========================================================
   Tabelle
   ========================================================= */
.table {
    --bs-table-bg: var(--white);
    --bs-table-border-color: var(--pro-dividers);
    border-radius: var(--radius);
    overflow: hidden;
}
.table thead th {
    background: var(--pro-cararra);
    color: var(--pro-petrol-dark);
    font-weight: 700;
    border-bottom: 1px solid var(--pro-dividers);
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .04em;
}
.table-bordered { border: 1px solid var(--pro-dividers); }
.table-bordered > :not(caption) > * > * { border-color: var(--pro-dividers); }

/* =========================================================
   Alert / Badge
   ========================================================= */
.alert { border-radius: var(--radius); border: 1px solid transparent; }
.alert-danger { background: #fdecea; border-color: #f5c6c1; color: #8a2820; }
.alert-warning { background: #fdf3e3; border-color: #f5dfa0; color: #6e4a08; }
.alert-info { background: var(--pro-petrol-50); border-color: var(--pro-petrol-100); color: var(--pro-petrol-dark); }

.badge { font-weight: 600; padding: .35em .6em; border-radius: 999px; }
/* il colore di .bg-warning è ridefinito più sotto con olivgreen brand */

/* ---------------------------------------------------------
   Compatibilità Bootstrap 5.1: queste classi sono state
   introdotte più tardi (.text-bg-* in 5.2, .*-subtle in 5.3).
   Senza definizione i badge restavano col testo bianco e
   nessuno sfondo → illeggibili. Le ridefiniamo col brand.
   --------------------------------------------------------- */
.text-bg-primary   { color: #fff !important;    background-color: var(--pro-petrol) !important; }
.text-bg-secondary { color: #fff !important;    background-color: var(--pro-carbongrey) !important; }
.text-bg-success   { color: #fff !important;    background-color: var(--pro-success) !important; }
.text-bg-danger    { color: #fff !important;    background-color: var(--pro-danger) !important; }
.text-bg-warning   { color: #2b3300 !important; background-color: var(--pro-olivgreen) !important; }
.text-bg-info      { color: #06343f !important; background-color: var(--pro-info) !important; }
.text-bg-light     { color: var(--pro-text) !important; background-color: var(--pro-cararra) !important; }
.text-bg-dark      { color: #fff !important;    background-color: #1a1a1a !important; }

.bg-success-subtle     { background-color: var(--pro-success-bg) !important; }
.bg-primary-subtle     { background-color: var(--pro-petrol-50) !important; }
.bg-secondary-subtle   { background-color: var(--pro-lightgrey) !important; }
.border-success-subtle { border-color: var(--pro-petrol-100) !important; }

/* ---------------------------------------------------------
   Tab (nav-tabs) e link "btn-link": col verde brand,
   niente blu di default di Bootstrap.
   --------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--pro-dividers); }
.nav-tabs .nav-link {
    color: var(--pro-text-muted);
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--pro-petrol-dark);
    border-bottom-color: var(--pro-petrol-100);
}
.nav-tabs .nav-link.active {
    color: var(--pro-petrol-dark);
    background: transparent;
    border-color: transparent;
    border-bottom: 2px solid var(--pro-petrol);
}

.btn-link { color: var(--pro-petrol-dark); }
.btn-link:hover { color: var(--pro-petrol); }

/* =========================================================
   Griglia menu (5 × 3)
   ========================================================= */
.menu-grid { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.menu-grid th {
    background: var(--pro-petrol-dark) !important;
    color: #fff !important;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .04em;
}
.menu-grid th:first-child { background: var(--pro-petrol) !important; }
.menu-grid tbody th {
    background: var(--pro-cararra) !important;
    color: var(--pro-petrol-dark) !important;
    text-transform: none;
    font-size: 1rem;
}
.menu-grid td { vertical-align: top; padding: 1rem; min-width: 240px; }
.menu-cell-piatto {
    background: var(--pro-petrol-50);
    border-left: 4px solid var(--pro-green);
    padding: .65rem .8rem;
    border-radius: 6px;
    margin-bottom: .65rem;
}
.menu-cell-piatto strong { color: var(--pro-petrol-dark); }
.menu-cell-piatto ul { font-size: .85rem; color: var(--pro-text-muted); margin: .3rem 0 0; padding-left: 1.1rem; }

/* Badge "allergene" usa il giallo brand */
.bg-warning { background-color: var(--pro-olivgreen) !important; color: #2b3300 !important; }

.versione-pill {
    display: inline-block;
    padding: .15em .55em;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.versione-leggero    { background: var(--pro-olivgreen-50); color: #6e7a00; border: 1px solid #d8e34d; }
.versione-bilanciato { background: var(--pro-petrol-50); color: var(--pro-petrol-dark); border: 1px solid var(--pro-petrol-100); }
.versione-proteico   { background: #fde9e4; color: var(--pro-cinnabar-dark); border: 1px solid #f2b6ab; }

/* =========================================================
   Footer
   ========================================================= */
.app-footer {
    --app-footer-height: 56px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1020;
    min-height: 56px;
    border-top: 1px solid var(--pro-dividers);
    background: var(--white);
    padding-block: .85rem;
    /* safe-area per iPhone (notch / barra home) */
    padding-bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
    color: var(--pro-text-muted);
    font-size: .88rem;
    box-shadow: 0 -2px 8px rgba(0, 95, 55, 0.06);
}
.app-footer__versione {
    font-size: .8rem;
    color: var(--pro-carbongrey);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 575.98px) {
    /* La stringa del runtime è la più lunga: è la prima a lasciare il posto */
    .app-footer__runtime { display: none; }
}
.app-footer::before {
    /* sottile gradient verde brand sopra il footer */
    content: "";
    position: absolute;
    left: 0; right: 0; top: -3px;
    height: 3px;
    background: linear-gradient(90deg,
        var(--pro-petrol-dark) 0%,
        var(--pro-petrol) 35%,
        var(--pro-green) 70%,
        var(--pro-olivgreen) 100%);
}

/* =========================================================
   Login overlay (mostrato se non autenticato)
   ========================================================= */
.login-hero {
    min-height: calc(100vh - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.login-card {
    max-width: 460px;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem;
    text-align: center;
}
.login-card__logo {
    width: 64px; height: 64px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, var(--pro-petrol) 0%, var(--pro-petrol-dark) 100%);
    color: #fff;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 123, 72, .25);
}
.login-card__logo--brand {
    width: 96px; height: 96px;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.login-card__logo--brand img { width: 100%; height: 100%; object-fit: contain; display: block; }
.login-card h1 { margin: 0 0 .4rem; font-size: 1.5rem; }
.login-card p { color: var(--pro-text-muted); margin-bottom: 1.75rem; }

/* =========================================================
   Responsive helpers
   ========================================================= */
@media (max-width: 575.98px) {
    .page-header { flex-direction: column; align-items: flex-start; }
    .table-responsive { border-radius: var(--radius); }
}

/* ----- Griglia menu → card per giorno su mobile/tablet ----- */
@media (max-width: 767.98px) {
    .menu-grid thead { display: none; }
    .menu-grid,
    .menu-grid tbody,
    .menu-grid tr,
    .menu-grid th,
    .menu-grid td {
        display: block;
        width: 100%;
    }
    .menu-grid tbody tr {
        background: var(--white);
        border: 1px solid var(--pro-dividers);
        border-radius: var(--radius);
        margin-bottom: 1rem;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .menu-grid tbody > tr > th {
        background: linear-gradient(90deg, var(--pro-petrol) 0%, var(--pro-petrol-dark) 100%) !important;
        color: #fff !important;
        padding: .75rem 1rem !important;
        text-align: left;
        font-size: 1.05rem;
        text-transform: none;
    }
    .menu-grid tbody > tr > td {
        min-width: 0;
        padding: .85rem 1rem !important;
        border: 0;
        border-top: 1px solid var(--pro-dividers);
    }
    .menu-grid tbody > tr > td::before {
        content: attr(data-versione);
        display: inline-block;
        padding: .2em .6em;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .55rem;
        background: var(--pro-petrol-50);
        color: var(--pro-petrol-dark);
        border: 1px solid var(--pro-petrol-100);
    }
    .menu-grid tbody > tr > td[data-versione="Leggero"]::before    { background: var(--pro-olivgreen-50); color: #6e7a00; border-color: #d8e34d; }
    .menu-grid tbody > tr > td[data-versione="Bilanciato"]::before { background: var(--pro-petrol-50); color: var(--pro-petrol-dark); border-color: var(--pro-petrol-100); }
    .menu-grid tbody > tr > td[data-versione="Proteico"]::before   { background: #fde9e4; color: var(--pro-cinnabar-dark); border-color: #f2b6ab; }

    .menu-cell-piatto { padding: .6rem .7rem; }
}

/* ----- Tabella ingredienti del piatto → card per riga su mobile ----- */
@media (max-width: 767.98px) {
    #tabella-ingredienti thead { display: none; }
    #tabella-ingredienti,
    #tabella-ingredienti tbody,
    #tabella-ingredienti tr,
    #tabella-ingredienti td {
        display: block;
        width: 100%;
    }
    #tabella-ingredienti tbody tr.riga-ingrediente {
        background: var(--white);
        border: 1px solid var(--pro-dividers);
        border-radius: var(--radius);
        margin-bottom: .85rem;
        padding: .75rem;
        position: relative;
    }
    #tabella-ingredienti tbody td {
        padding: .35rem 0 !important;
        border: 0 !important;
    }
    #tabella-ingredienti tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--pro-text-muted);
        margin-bottom: .25rem;
        letter-spacing: .03em;
    }
    /* Il bottone "Rimuovi" finisce in alto a destra come icona */
    #tabella-ingredienti tbody td:last-child {
        position: absolute;
        top: .5rem;
        right: .5rem;
        width: auto;
        padding: 0 !important;
    }
    #tabella-ingredienti tbody td:last-child::before { display: none; }

    /* Footer "Totale kcal" diventa una barra orizzontale leggibile */
    #tabella-ingredienti tfoot { display: block; }
    #tabella-ingredienti tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--pro-petrol-50);
        border: 1px solid var(--pro-petrol-100);
        border-radius: var(--radius);
        padding: .65rem .85rem;
        margin-top: .4rem;
    }
    #tabella-ingredienti tfoot th {
        display: block;
        padding: 0 !important;
        background: transparent !important;
        text-align: left !important;
        font-size: .95rem;
        color: var(--pro-petrol-dark) !important;
    }
    #tabella-ingredienti tfoot th:empty { display: none; }
    #tabella-ingredienti tfoot #kcal-totali { font-size: 1.05rem; }
}

/* ----- Index tables: scroll orizzontale automatico se necessario ----- */
@media (max-width: 767.98px) {
    .table-mobile-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* lo scroll vale solo per le tabelle che NON diventano card */
    .table-mobile-scroll > .table:not(.table-cards) { min-width: 600px; }
}

/* ----- Index tables → card per riga su mobile ----- */
@media (max-width: 767.98px) {
    .table-cards thead { display: none; }
    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: 100%;
    }
    .table-cards tbody tr {
        background: var(--white);
        border: 1px solid var(--pro-dividers);
        border-radius: var(--radius);
        margin-bottom: .85rem;
        padding: .85rem 1rem;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    /* nessuna zebratura sulle card */
    .table-cards.table-striped > tbody > tr > * { --bs-table-bg-type: transparent; background: transparent; }

    .table-cards tbody td {
        padding: .4rem 0 !important;
        border: 0 !important;
    }
    /* sottile divisore tra i campi della card */
    .table-cards tbody td + td { border-top: 1px solid var(--pro-dividers) !important; }
    /* etichetta della colonna sopra il valore */
    .table-cards tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--pro-text-muted);
        letter-spacing: .03em;
        margin-bottom: .2rem;
    }
    /* nasconde i campi davvero vuoti (es. note assenti) */
    .table-cards tbody td[data-label]:empty { display: none; }

    /* cella azioni: pulsanti a tutta larghezza in fondo alla card */
    .table-cards tbody td.cell-actions { padding-top: .65rem !important; }
    .table-cards tbody td.cell-actions > .btn,
    .table-cards tbody td.cell-actions > form {
        display: block !important;
        width: 100%;
        margin: 0 0 .4rem 0;
    }
    .table-cards tbody td.cell-actions > form .btn { width: 100%; }
    /* badge di stato (es. "Ordini chiusi"): su una riga propria, allineato a sinistra come i pulsanti */
    .table-cards tbody td.cell-actions > .badge {
        display: inline-flex;
        align-items: center;
        margin: 0 0 .5rem 0;
        vertical-align: middle;
    }
    .table-cards tbody td.cell-actions > :last-child { margin-bottom: 0; }
}

/* ----- Touch target più generosi su mobile ----- */
@media (max-width: 575.98px) {
    .btn { min-height: 42px; }
    .form-control, .form-select { min-height: 42px; }
    .btn-sm, .form-control-sm, .form-select-sm { min-height: 36px; }
    .navbar-brand { font-size: 1rem; }
    .app-brand__logo { width: 34px; height: 34px; flex-basis: 34px; }

    /* Layout più compatto e respiro corretto su telefono */
    .app-main { padding-block: 1.25rem 2.5rem; }
    .page-header { margin-bottom: 1.1rem; gap: .65rem; }
    .card-soft { padding: 1rem; }
    /* Le azioni in fondo ai form occupano tutta la larghezza su mobile */
    .order-actions .btn,
    .page-header > a.btn { width: 100%; }
}

/* ----- Header sticky: aggiusta progress bar su mobile ----- */
@media (max-width: 575.98px) {
    .card-soft .progress { width: 100% !important; }
}

/* ----- Modal scrollable su schermi bassi ----- */
@media (max-height: 700px) {
    .modal-dialog-centered { align-items: flex-start; margin-top: 1rem; }
}

.text-petrol { color: var(--pro-petrol-dark) !important; }

/* =========================================================
   Componi la tua settimana (collaboratore)
   ========================================================= */
.compose-hint {
    display: flex; align-items: center; gap: .5rem;
    background: var(--pro-petrol-50);
    border: 1px solid var(--pro-petrol-100);
    color: var(--pro-petrol-dark);
    border-radius: var(--radius);
    padding: .6rem .9rem;
    margin-bottom: 1rem;
    font-size: .92rem;
}
.compose-hint.is-active {
    background: #fff6e6; border-color: #f0d79a; color: #8a5a08;
    box-shadow: 0 4px 12px rgba(240, 173, 78, .2);
}

.week-panel, .pool-panel {
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
}
@media (min-width: 992px) {
    .week-panel { position: sticky; top: 88px; }
}

.consegna-group { margin-bottom: 1rem; }
.consegna-group__title {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--pro-petrol-dark);
    background: var(--pro-cararra);
    border-radius: 8px;
    padding: .35rem .6rem;
    margin-bottom: .5rem;
}

.day-slot {
    position: relative;
    border: 1.5px dashed var(--pro-hairline);
    border-radius: 10px;
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    background: var(--pro-cararra);
    transition: border-color .12s, background-color .12s, box-shadow .12s;
    cursor: pointer;
}
.day-slot.is-target { border-color: var(--pro-petrol); background: var(--pro-petrol-50); }
.day-slot.is-hover  { border-style: solid; border-color: var(--pro-green); background: var(--pro-green-50); }
.day-slot.is-filled { border-style: solid; border-color: var(--pro-green); background: #fff; }
.day-slot__head { display: flex; align-items: baseline; justify-content: space-between; gap: .25rem; }
.day-slot.is-filled .day-slot__head { padding-right: 30px; }
.day-slot__day { font-weight: 700; color: var(--pro-petrol-dark); }
.day-slot__date { font-size: .8rem; color: var(--pro-text-muted); }
.day-slot__body { margin-top: .25rem; min-height: 1.5rem; }
.day-slot__empty { color: var(--pro-carbongrey); font-size: .88rem; font-style: italic; }
.day-slot__piatto { display: none; flex-wrap: wrap; align-items: center; gap: .4rem; }
.day-slot.is-filled .day-slot__empty { display: none; }
.day-slot.is-filled .day-slot__piatto { display: flex; }
.day-slot__nome { font-weight: 600; }
.day-slot__regime { display: inline-flex; align-items: center; }
.day-slot__regime .badge { font-size: .65rem; padding: .25em .5em; }
.day-slot__allergeni { display: flex; flex-wrap: wrap; gap: .2rem; width: 100%; margin-top: .15rem; }
.day-slot__allergeni .badge { font-size: .65rem; padding: .25em .5em; }
.day-slot__clear {
    position: absolute; top: .4rem; right: .4rem;
    border: 0; background: transparent; color: var(--pro-carbongrey);
    width: 26px; height: 26px; border-radius: 50%; line-height: 1;
    display: none;
}
.day-slot.is-filled .day-slot__clear { display: inline-flex; align-items: center; justify-content: center; }
.day-slot__clear:hover { background: #fde9e4; color: var(--pro-cinnabar-dark); }

/* Giorno festivo / di chiusura: non ordinabile */
.day-slot.is-closed-day {
    border-style: solid;
    border-color: var(--pro-pearlgrey);
    background: repeating-linear-gradient(45deg, #f3f3ee 0, #f3f3ee 8px, #ececdf 8px, #ececdf 16px);
    cursor: not-allowed;
    opacity: .9;
}
.day-slot.is-closed-day .day-slot__day,
.day-slot.is-closed-day .day-slot__date { color: var(--pro-carbongrey); }
.day-slot__closed {
    display: inline-flex;
    align-items: center;
    color: var(--pro-cinnabar-dark);
    font-weight: 600;
    font-size: .9rem;
}

.pool-cat { margin-bottom: 1rem; }
.pool-cat__title { margin-bottom: .5rem; }
.pool-cat__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
}
.pool-card {
    border: 1px solid var(--pro-dividers);
    border-radius: 10px;
    padding: .65rem .7rem;
    background: var(--white);
    cursor: grab;
    transition: transform .1s, box-shadow .12s, border-color .12s;
    user-select: none;
}
.pool-card:hover { border-color: var(--pro-petrol-100); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pool-card.is-armed { border-color: var(--pro-green); background: var(--pro-green-50); box-shadow: 0 0 0 2px rgba(55,170,50,.25); }
.pool-card.is-dragging { opacity: .5; }
.pool-card__nome { font-weight: 700; color: var(--pro-text); line-height: 1.2; }
.pool-card__kcal { font-size: .75rem; color: var(--pro-petrol-dark); font-weight: 600; margin-top: .15rem; }
.pool-card__desc { font-size: .8rem; color: var(--pro-text-muted); margin-top: .15rem;
                   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pool-card__ingredienti {
    font-size: .72rem;
    color: var(--pro-text-muted);
    margin-top: .35rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pool-card__allergeni {
    margin-top: .35rem;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
}
.pool-card__allergeni .badge { font-size: .65rem; padding: .25em .5em; }

/* Badge allergene: toni morbidi (crema con accento ambra) */
.badge-allergene {
    background-color: #fdf3d0;
    color: #7a5d12;
    border: 1px solid #ead9a5;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.badge-allergene i { font-size: 1em; line-height: 1; }

/* Badge regime alimentare: verde tenue per vegano, verde lime per vegetariano */
.badge-regime-vegano,
.badge-regime-vegetariano {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.badge-regime-vegano i,
.badge-regime-vegetariano i { font-size: 1em; line-height: 1; }

.badge-regime-vegano {
    background-color: #d8efdc;
    color: #1e5b32;
    border: 1px solid #b6dec0;
}
.badge-regime-vegetariano {
    background-color: #ecf5d1;
    color: #4d6b14;
    border: 1px solid #d1e3a3;
}

@media (max-width: 575.98px) {
    .pool-cat__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Editor pool del menu (chef)
   ========================================================= */
.pool-col {
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius);
    padding: 1rem;
    height: 100%;
    box-shadow: var(--shadow-sm);
}
.pool-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.pool-slot { margin-bottom: .5rem; }

/* =========================================================
   Box valori nutrizionali del piatto
   ========================================================= */
.nutri-box {
    background: var(--pro-petrol-50);
    border: 1px solid var(--pro-petrol-100);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-top: .5rem;
}
.nutri-box__title { font-weight: 700; color: var(--pro-petrol-dark); margin-bottom: .65rem; }
.nutri-grid {
    display: grid;
    /* auto-fit invece di un numero fisso: con l'aggiunta del peso le celle sono sei e,
       se non ci stanno in riga, vanno a capo invece di schiacciarsi. */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: .6rem;
}
/* Il peso non è un nutriente ma la dimensione della porzione: si distingue appena. */
.nutri-cell--peso {
    background: var(--pro-petrol-50);
    border-color: var(--pro-petrol-100);
}
.nutri-cell {
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: 10px;
    padding: .6rem .4rem;
    text-align: center;
}
.nutri-val { display: block; font-size: 1.35rem; font-weight: 800; color: var(--pro-petrol-dark); line-height: 1.1; }
.nutri-lbl { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pro-text-muted); margin-top: .15rem; }
.nutri-box__hint { font-size: .78rem; color: var(--pro-text-muted); margin-top: .55rem; }

@media (max-width: 575.98px) {
    .nutri-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Ordini collaboratori — countdown + day cards
   ========================================================= */
.countdown-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--pro-petrol) 0%, var(--pro-petrol-dark) 100%);
    color: #fff;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.countdown-bar::after {
    content: "";
    position: absolute; right: -40px; top: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255, .08);
    pointer-events: none;
}
.countdown-bar__icon {
    width: 48px; height: 48px;
    background: rgba(255,255,255, .15);
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.45rem;
    flex: 0 0 48px;
}
.countdown-bar__body { flex-grow: 1; min-width: 0; }
.countdown-bar__label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
    margin-bottom: .25rem;
}
.countdown-bar__time {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.cd-cell {
    background: rgba(255,255,255, .15);
    border-radius: 10px;
    padding: .35rem .65rem;
    min-width: 56px;
    text-align: center;
    line-height: 1.1;
}
.cd-cell span {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.cd-cell small {
    display: block;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .8;
}
.cd-sep { font-size: 1.4rem; font-weight: 800; opacity: .6; }
.countdown-bar__status {
    background: rgba(255,255,255, .2);
    border-radius: 999px;
    padding: .35rem .85rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .06em;
    flex: 0 0 auto;
    align-self: flex-start;
}

.countdown-bar.is-ok     { background: linear-gradient(135deg, var(--pro-petrol)      0%, var(--pro-petrol-dark) 100%); }
.countdown-bar.is-warn   { background: linear-gradient(135deg, #d28e2f               0%, #a96914 100%); }
.countdown-bar.is-danger { background: linear-gradient(135deg, var(--pro-cinnabar)    0%, var(--pro-cinnabar-dark) 100%);
                           animation: pulse-danger 1.4s ease-in-out infinite; }
.countdown-bar.is-closed  { background: linear-gradient(135deg, #6c757d                0%, #495057 100%); }
.countdown-bar.is-waiting { background: linear-gradient(135deg, var(--pro-blue-pine, #537880) 0%, #355c66 100%); }
.countdown-bar.is-waiting-soon     { background: linear-gradient(135deg, var(--pro-petrol) 0%, var(--pro-petrol-dark) 100%); }
.countdown-bar.is-waiting-imminent { background: linear-gradient(135deg, var(--pro-green, #4ea64e) 0%, #2f8132 100%);
                                     animation: pulse-positive 1.8s ease-in-out infinite; }

@keyframes pulse-danger {
    0%, 100% { box-shadow: 0 4px 12px rgba(225, 75, 52, .25), 0 0 0 0 rgba(225, 75, 52, .35); }
    50%      { box-shadow: 0 6px 18px rgba(225, 75, 52, .45), 0 0 0 8px rgba(225, 75, 52, 0); }
}
@keyframes pulse-positive {
    0%, 100% { box-shadow: 0 4px 12px rgba(78, 166, 78, .25), 0 0 0 0 rgba(78, 166, 78, .35); }
    50%      { box-shadow: 0 6px 18px rgba(78, 166, 78, .45), 0 0 0 8px rgba(78, 166, 78, 0); }
}

/* ----- Card del giorno ----- */
.day-card {
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius);
    padding: 1rem 1rem .85rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.day-card.is-selected {
    border-color: var(--pro-green);
    box-shadow: 0 6px 20px rgba(55, 170, 50, .15), 0 1px 3px rgba(55, 170, 50, .1);
}
.day-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.day-card__name {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--pro-petrol-dark);
    line-height: 1.1;
}
.day-card__date {
    color: var(--pro-text-muted);
    font-size: .85rem;
    text-transform: capitalize;
}
.day-card__badge {
    display: none;
    align-items: center;
    gap: .25rem;
    background: var(--pro-green-50);
    color: var(--pro-green-dark);
    border: 1px solid #c4e2c1;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.day-card.is-selected .day-card__badge { display: inline-flex; }
.day-card__badge i { font-size: .9rem; }

/* ----- Radio-card delle versioni ----- */
.versions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.version {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "pill name check"
        "pill desc check"
        "pill kcal check"
        "pill ingr check";
    gap: .15rem .65rem;
    align-items: start;
    padding: .65rem .8rem .65rem .8rem;
    border: 1.5px solid var(--pro-dividers);
    border-radius: 10px;
    cursor: pointer;
    background: var(--white);
    transition: border-color .12s, background-color .12s, transform .08s;
}
.version:hover:not(.is-disabled) { border-color: var(--pro-petrol-100); background: #fafdfb; }
.version.is-selected { border-color: var(--pro-green); background: var(--pro-green-50); }
.version.is-disabled { opacity: .55; cursor: not-allowed; }
.version__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.version__pill { grid-area: pill; align-self: center; }
.version__name { grid-area: name; font-weight: 700; color: var(--pro-text); line-height: 1.2; }
.version__kcal { grid-area: kcal;
                 display: inline-block; width: max-content;
                 background: var(--pro-petrol-50);
                 color: var(--pro-petrol-dark);
                 border: 1px solid var(--pro-petrol-100);
                 border-radius: 999px;
                 font-size: .72rem; font-weight: 700;
                 padding: .1rem .45rem;
                 margin-top: .15rem; }
.version__desc { grid-area: desc; color: var(--pro-text-muted); font-size: .85rem; }
.version__ingr { grid-area: ingr; font-size: .8rem; margin-top: .2rem; }
.version__ingr summary { color: var(--pro-petrol-dark); cursor: pointer; user-select: none; }
.version__ingr ul { margin: .25rem 0 0; padding-left: 1.1rem; color: var(--pro-text-muted); }
.version__check {
    grid-area: check;
    color: var(--pro-green);
    font-size: 1.3rem;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .12s, transform .15s ease;
    align-self: center;
}
.version.is-selected .version__check { opacity: 1; transform: scale(1); }

.version--skip { background: var(--pro-cararra); }
.version--skip.is-selected { background: #eef0e3; border-color: var(--pro-carbongrey); }
.version--skip.is-selected .version__check { color: var(--pro-carbongrey); }
.version--skip .version__pill {
    background: #fff; color: var(--pro-text-muted); border: 1px solid var(--pro-dividers);
    border-radius: 999px; padding: .2em .6em;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    display: inline-flex; align-items: center; gap: .3rem;
}

/* ----- Azioni in fondo ----- */
.order-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    box-shadow: var(--shadow-sm);
    position: sticky;
    bottom: calc(var(--app-footer-height, 56px) + .5rem + env(safe-area-inset-bottom, 0px));
    z-index: 5;
}
.order-actions__sum { color: var(--pro-text-muted); font-size: .95rem; }
.order-actions__sum strong { color: var(--pro-petrol-dark); font-size: 1.1rem; }

/* ----- Responsive ----- */
@media (max-width: 575.98px) {
    /* In colonna la barra arrivava a occupare un quarto dello schermo: resta in riga,
       con l'icona più piccola e le cifre compatte. */
    .countdown-bar { align-items: center; padding: .7rem .8rem; gap: .7rem; }
    .countdown-bar__icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.15rem; border-radius: 10px; }
    .countdown-bar__label { font-size: .68rem; letter-spacing: .05em; margin-bottom: .3rem; }
    .countdown-bar__time { gap: .25rem; flex-wrap: nowrap; }
    .countdown-bar__status { display: none; }   /* lo stato è già scritto nell'etichetta */
    .cd-cell { min-width: 0; flex: 1 1 0; padding: .25rem .3rem; border-radius: 8px; }
    .cd-cell span { font-size: 1.15rem; }
    .cd-cell small { font-size: .55rem; letter-spacing: .04em; }
    .cd-sep { font-size: 1rem; }
    .order-actions { flex-direction: column; align-items: stretch; }
    .order-actions__sum { text-align: center; }
}

/* =========================================================
   Maschera autenticazione (Login / Register / Pending)
   ========================================================= */
/* Sfondo chiaro: fa risaltare la card, che ha il pannello verde del marchio.
   Sopra la base scorrono tre aloni di colore sfocati (vedi .auth-bg). */
.auth-body {
    background: linear-gradient(168deg, #eff3ec 0%, var(--pro-cararra) 52%, #e4ebe2 100%);
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

/* --- Sfondo animato del login --- */
.auth-bg {
    position: fixed; inset: 0;
    overflow: hidden;           /* gli aloni non devono generare scroll */
    pointer-events: none;
    z-index: 0;
}
.auth-bg__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;     /* la deriva resta sulla GPU */
}
.auth-bg__blob--1 {
    width: 46vmax; height: 46vmax; top: -14%; left: -10%;
    background: radial-gradient(circle, rgba(0,123,72,.42), rgba(0,123,72,0) 70%);
    animation: derivaAlone1 30s ease-in-out infinite;
}
.auth-bg__blob--2 {
    width: 40vmax; height: 40vmax; bottom: -18%; right: -12%;
    background: radial-gradient(circle, rgba(187,207,0,.46), rgba(187,207,0,0) 70%);
    animation: derivaAlone2 36s ease-in-out infinite;
}
.auth-bg__blob--3 {
    width: 34vmax; height: 34vmax; top: 38%; left: 52%;
    background: radial-gradient(circle, rgba(55,170,90,.30), rgba(55,170,90,0) 70%);
    animation: derivaAlone3 44s ease-in-out infinite;
}
/* Griglia tenue, dissolta ai bordi: dà profondità senza diventare un motivo invadente */
.auth-bg::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,60,35,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,60,35,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 25%, transparent 76%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 25%, transparent 76%);
}

@keyframes derivaAlone1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}
@keyframes derivaAlone2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-7vw, -4vh, 0) scale(1.15); }
}
@keyframes derivaAlone3 {
    0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1); }
    50%      { transform: translate3d(-58%, -42%, 0) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
    .auth-bg__blob { animation: none; }
}
/* Su schermi piccoli la sfocatura ampia costa: aloni più contenuti */
@media (max-width: 767.98px) {
    .auth-bg__blob { filter: blur(60px); }
    .auth-bg::after { background-size: 34px 34px; }
}
.auth-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 1.5rem;
}
.auth-footer { color: var(--pro-text-muted) !important; }

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 30, 18, .35);
    padding: 2.25rem 1.75rem;
}
.auth-card--wide { max-width: 880px; padding: 2.25rem 1.75rem; }
.auth-card__brand { text-align: center; margin-bottom: 1.5rem; }
.auth-card__brand h1 { margin: .25rem 0 .35rem; font-size: 1.5rem; }
.auth-card__brand p { color: var(--pro-text-muted); margin-bottom: 0; }

.auth-split {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 1.25rem;
}
.auth-col {
    background: var(--pro-cararra);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius);
    padding: 1.25rem 1.15rem;
    display: flex;
    flex-direction: column;
}
.auth-col__title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    color: var(--pro-petrol-dark);
    margin-bottom: .5rem;
    font-size: 1.05rem;
}
.auth-col__title i { font-size: 1.2rem; }
.auth-col__desc { color: var(--pro-text-muted); font-size: .92rem; }

.auth-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--pro-carbongrey);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.auth-divider span {
    background: var(--white);
    padding: .25rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--pro-dividers);
}
.auth-divider::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: var(--pro-dividers);
}

/* Bottone "Accedi con Microsoft" */
.btn-microsoft {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #d2d2d2 !important;
    font-weight: 600;
    padding: .65rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    transition: background-color .15s, box-shadow .15s;
}
.btn-microsoft:hover, .btn-microsoft:focus {
    background: #f4f4f4 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.btn-microsoft__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Responsive: stack verticale su mobile/tablet */
@media (max-width: 767.98px) {
    .auth-card { padding: 1.5rem 1.15rem; border-radius: var(--radius); }
    .auth-card--wide { max-width: 500px; }
    .auth-split {
        grid-template-columns: 1fr;
    }
    .auth-divider {
        height: 1px;
        background: var(--pro-dividers);
        margin: .5rem 0;
    }
    .auth-divider::before {
        display: none;
    }
    .auth-divider span {
        position: relative;
        top: -.85rem;
    }
}

/* =========================================================
   Install banner PWA
   ========================================================= */
/* Install banner PWA */
.install-banner {
    position: fixed;
    /* sopra al footer fisso */
    bottom: calc(var(--app-footer-height, 56px) + 1rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: var(--pro-petrol-dark);
    color: #fff;
    padding: .75rem 1rem;
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    display: none;
    align-items: center; gap: .75rem;
    z-index: 2000;
}
.install-banner.is-visible { display: inline-flex; }
.install-banner button { background: #fff; color: var(--pro-petrol-dark); border: 0; padding: .35rem .8rem; border-radius: 999px; font-weight: 700; }

/* =========================================================
   "I miei ordini" — card riepilogo settimana + storico
   ========================================================= */
.orders-section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pro-text-muted);
    margin-bottom: .75rem;
}

.order-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: .85rem 1rem;
}
.order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--pro-dividers);
}
.order-card__week {
    font-weight: 700;
    color: var(--pro-petrol-dark);
    text-transform: capitalize;
}
.order-card__count {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    background: var(--pro-petrol-50);
    color: var(--pro-petrol-dark);
    border: 1px solid var(--pro-petrol-100);
    border-radius: 999px;
    padding: .12rem .55rem;
    white-space: nowrap;
}
.order-card__days { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.order-card__consegna {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pro-text-muted);
    margin: .55rem 0 .2rem;
}
.order-card__consegna:first-child { margin-top: 0; }
.order-card__day {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    padding: .18rem 0;
}
.order-card__dayname {
    flex: 0 0 4.75rem;
    font-weight: 600;
    color: var(--pro-text);
    font-size: .82rem;
}
.order-card__dish { flex: 1 1 auto; font-size: .9rem; color: var(--pro-text); }
.order-card__dish .badge { font-size: .62rem; }
.order-card__allergeni { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: .3rem; vertical-align: middle; }
.order-card__empty { color: var(--pro-text-muted); font-size: .85rem; padding: .3rem 0; }
.order-card__foot {
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--pro-dividers);
    font-size: .72rem;
    color: var(--pro-text-muted);
}

/* Storico collassabile (elemento nativo <details>) */
.history-toggle > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pro-text-muted);
    padding: .45rem 0;
    user-select: none;
}
.history-toggle > summary::-webkit-details-marker { display: none; }
.history-toggle > summary:hover { color: var(--pro-petrol-dark); }
.history-toggle .hc-caret { transition: transform .15s ease; }
.history-toggle[open] .hc-caret { transform: rotate(90deg); }

/* ==================== Home (Home/Index) ==================== */
.home-hero {
    position: relative; overflow: hidden;
    background: var(--pro-petrol-dark);
    background-image: radial-gradient(120% 120% at 88% -25%, rgba(187,207,0,.28), transparent 55%),
                      radial-gradient(90% 90% at -10% 120%, rgba(55,170,50,.25), transparent 60%);
    color: #fff; border-radius: 22px; padding: 2.2rem 2rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    box-shadow: 0 18px 40px rgba(0,95,55,.22);
    margin-bottom: 1.6rem;
}
.home-hero__text { max-width: 540px; }
.home-hero__hi { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; opacity: .85; font-weight: 700; }
.home-hero__title { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: .2rem 0 .5rem; }
.home-hero__title span { color: var(--pro-olivgreen); }
.home-hero__sub { opacity: .92; margin-bottom: 1.2rem; }
.home-hero__cta {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; color: var(--pro-petrol-dark); font-weight: 700;
    padding: .7rem 1.3rem; border-radius: 999px; text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s;
}
.home-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.24); color: var(--pro-petrol-dark); }

/* Illustrazione piatto cliccabile */
.home-hero__art { flex: 0 0 auto; display: block; }
.plate-illo { width: 230px; max-width: 46vw; height: auto; display: block; transition: transform .25s ease; filter: drop-shadow(0 14px 24px rgba(0,0,0,.25)); }
.home-hero__art:hover .plate-illo { transform: scale(1.05) rotate(-1.5deg); }
.plate-illo .steam path { animation: steamRise 2.8s ease-in-out infinite; transform-origin: center; }
.plate-illo .steam path:nth-child(2) { animation-delay: .6s; }
.plate-illo .steam path:nth-child(3) { animation-delay: 1.2s; }
@keyframes steamRise { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .7; } 100% { transform: translateY(-8px); opacity: 0; } }

.home-section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--pro-text-muted); font-weight: 800; margin: 1.6rem 0 .8rem; }

.home-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.home-card {
    display: flex; flex-direction: column; background: var(--white);
    border: 1px solid var(--pro-dividers); border-radius: 16px; padding: 1.2rem;
    text-decoration: none; color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-shadow: 0 4px 14px rgba(0,95,55,.05);
}
.home-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,95,55,.14); border-color: #c9dfd2; }
.home-card__icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.55rem; background: var(--pro-petrol-50); color: var(--pro-petrol-dark); margin-bottom: .85rem; }
.home-card__title { font-weight: 700; font-size: 1.05rem; color: var(--pro-text); margin-bottom: .2rem; }
.home-card__desc { font-size: .84rem; color: var(--pro-text-muted); margin: 0; }
.home-card--primary { background: var(--pro-petrol); border-color: var(--pro-petrol); }
.home-card--primary .home-card__title { color: #fff; }
.home-card--primary .home-card__desc { color: rgba(255,255,255,.9); }
.home-card--primary .home-card__icon { background: rgba(255,255,255,.2); color: #fff; }

.steps { display: grid; gap: .7rem; }
.step { display: flex; gap: .9rem; align-items: flex-start; background: var(--white); border: 1px solid var(--pro-dividers); border-radius: 14px; padding: .95rem 1.1rem; box-shadow: 0 3px 10px rgba(0,95,55,.04); }
.step__num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--pro-petrol); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.step__body strong { display: block; color: var(--pro-text); }
.step__body span { font-size: .86rem; color: var(--pro-text-muted); }

/* Modale guida (come ordinare) */
.guida-list { margin: 0; padding-left: 1.35rem; display: grid; gap: .85rem; }
.guida-list li { line-height: 1.45; }
.guida-list li::marker { color: var(--pro-petrol); font-weight: 800; }
.guida-tip {
    margin-top: 1.1rem; padding: .8rem 1rem;
    background: var(--pro-petrol-50); border: 1px solid #c9dfd2; border-radius: 12px;
    font-size: .9rem; color: var(--pro-text);
}

@media (max-width: 575.98px) {
    .home-hero { padding: 1.6rem 1.3rem; }
    .home-hero__title { font-size: 1.55rem; }
    /* Su mobile il piatto va a capo: lo centro (testo e bottone restano a sinistra) */
    .home-hero__art { width: 100%; display: flex; justify-content: center; }
    .plate-illo { max-width: 60vw; }
}

/* ==================== Ordinazione (Ordini/Index) ==================== */
.consegna-block {
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: 16px;
    padding: 1rem 1.1rem 1.2rem;
    margin-bottom: 1.4rem;
    box-shadow: 0 6px 18px rgba(0, 95, 55, .06);
}
.consegna-block__head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding-bottom: .7rem; margin-bottom: .9rem;
    border-bottom: 2px solid var(--pro-petrol-50);
}
.consegna-block__title { font-weight: 700; color: var(--pro-petrol-dark); font-size: 1.1rem; }
.consegna-block__title small { display: block; font-weight: 500; font-size: .8rem; color: var(--pro-text-muted); }
.consegna-block__count {
    font-size: .82rem; color: var(--pro-text-muted); font-weight: 600; white-space: nowrap;
    background: var(--pro-cararra); border-radius: 999px; padding: .3rem .8rem;
}
.consegna-block__count .cb-count { color: var(--pro-petrol-dark); font-weight: 800; }
.consegna-block__sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pro-text-muted); font-weight: 700; margin-bottom: .5rem; }

/* ---- Lista dinamica dei piatti scelti (quantità libera) ---- */
.chosen-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.chosen-empty {
    border: 1.5px dashed #cfd8d0; border-radius: 12px;
    padding: .9rem 1rem; text-align: center; color: var(--pro-text-muted); font-size: .9rem;
    background: var(--pro-cararra);
}
.chosen-chip {
    display: flex; align-items: center; gap: .65rem;
    background: #fff; border: 1px solid #cfe6d8; border-left: 4px solid var(--pro-green);
    border-radius: 12px; padding: .55rem .65rem;
    box-shadow: 0 2px 8px rgba(0, 95, 55, .05);
    animation: chipIn .18s ease;
}
@keyframes chipIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.chosen-chip__num {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: var(--pro-petrol-50); color: var(--pro-petrol-dark);
    font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center;
}
.chosen-chip__main { flex: 1 1 auto; min-width: 0; }
.chosen-chip__nome { font-weight: 700; color: var(--pro-text); line-height: 1.2; }
.chosen-chip__badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.chosen-chip__badges .badge { font-size: .65rem; padding: .25em .5em; }
.badge-kcal { background: var(--pro-petrol-50); color: var(--pro-petrol-dark); border: 1px solid #cfe6d8; font-weight: 700; }
.chosen-chip__ingredienti {
    font-size: .72rem; color: var(--pro-text-muted); margin-top: .3rem;
    line-height: 1.35; overflow-wrap: anywhere;
}
.chosen-chip__remove {
    flex: 0 0 auto; border: 0; background: #fdece8; color: var(--pro-cinnabar-dark);
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
    transition: background .12s;
}
.chosen-chip__remove:hover { background: #f9d5cc; }

/* ==================== Login (pagina di accesso) ==================== */
.login-split {
    width: 100%;
    max-width: 880px;
    background: var(--white);
    border-radius: var(--radius-lg);
    /* Ombra morbida, calibrata sul nuovo sfondo chiaro */
    box-shadow: 0 18px 44px rgba(0, 60, 35, .16), 0 2px 8px rgba(0, 60, 35, .06);
    border: 1px solid rgba(0, 60, 35, .07);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;   /* brand | form */
}

/* --- Pannello brand (sinistra) --- */
.login-brand {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--pro-petrol) 0%, var(--pro-petrol-dark) 55%, #003f25 100%);
    color: #fff;
    padding: 2.4rem 1.9rem 1.8rem;
    /* Colonna centrata: logo, titolo, piatto e nota sullo stesso asse */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
}
.login-brand::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 92% -10%, rgba(187,207,0,.30), transparent 55%),
                radial-gradient(90% 80% at -10% 112%, rgba(55,170,50,.32), transparent 60%);
    pointer-events: none;
}
.login-brand > * { position: relative; z-index: 1; }
.login-brand__logo {
    position: relative;
    width: 76px; height: 76px; border-radius: 20px;
    flex: 0 0 auto;                      /* non si schiaccia nella colonna flex */
    align-self: center;                  /* centrato nel pannello del marchio */
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px; margin-bottom: 1.1rem;
    overflow: hidden;
    /* Ingresso all'apertura della pagina, poi alone che pulsa piano */
    animation: logoIngresso .85s cubic-bezier(.19, 1, .3, 1.2) both,
               logoAlone 4.5s ease-in-out 1.1s infinite;
}
.login-brand__logo img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    animation: logoImmagine 1s ease-out .18s both;
}
/* Riflesso che attraversa il logo ogni tanto */
.login-brand__logo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
    transform: translateX(-140%);
    animation: logoRiflesso 6s ease-in-out 1.6s infinite;
    pointer-events: none;
}
.login-brand__logo:hover { transform: scale(1.06) rotate(-2deg); transition: transform .25s ease; }

@keyframes logoIngresso {
    from { opacity: 0; transform: translateY(-14px) scale(.7) rotate(-12deg); }
    to   { opacity: 1; transform: none; }
}
@keyframes logoImmagine {
    from { opacity: 0; transform: scale(.75); }
    to   { opacity: 1; transform: none; }
}
@keyframes logoAlone {
    0%, 100% { box-shadow: 0 0 0 0 rgba(187, 207, 0, 0), 0 0 0 0 rgba(187, 207, 0, 0); }
    50%      { box-shadow: 0 0 0 8px rgba(187, 207, 0, .10), 0 0 28px 6px rgba(187, 207, 0, .30); }
}
@keyframes logoRiflesso {
    0%, 62%  { transform: translateX(-140%); }
    78%, 100% { transform: translateX(140%); }
}
@media (prefers-reduced-motion: reduce) {
    .login-brand__logo, .login-brand__logo img, .login-brand__logo::after { animation: none; }
}
.login-brand h1 {
    color: var(--pro-olivgreen);
    font-size: 1.6rem; font-weight: 800; line-height: 1.15;
    margin: 0 0 .45rem; letter-spacing: -.01em;
}
.login-brand__tag {
    opacity: .88; font-size: .92rem; line-height: 1.4;
    margin: 0 auto; max-width: 26ch;
}
.login-plate {
    width: 190px; max-width: 68%;
    margin: 1.5rem auto 0;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.28));
}
/* Vapore animato, come il piatto nella home (keyframes steamRise già definiti sopra) */
.login-plate .steam path { animation: steamRise 2.8s ease-in-out infinite; transform-origin: center; }
.login-plate .steam path:nth-child(2) { animation-delay: .6s; }
.login-plate .steam path:nth-child(3) { animation-delay: 1.2s; }
.login-brand__note {
    margin: 1.6rem auto 0; max-width: 34ch;
    font-size: .72rem; line-height: 1.45; opacity: .68;
    border-top: 1px solid rgba(255,255,255,.16); padding-top: .9rem;
}

/* --- Pannello form (destra) --- */
.login-form { padding: 2.6rem 2.2rem; display: flex; flex-direction: column; justify-content: center; }
.login-form__head { margin-bottom: 1.4rem; }
.login-form__head h2 { font-size: 1.5rem; font-weight: 800; color: var(--pro-text); margin: 0 0 .2rem; }
.login-form__head p { color: var(--pro-text-muted); font-size: .9rem; margin: 0; }

.login-field { margin-bottom: 1rem; }
.login-field .form-label { font-size: .8rem; font-weight: 600; color: var(--pro-text-muted); margin-bottom: .3rem; }
.login-field__wrap { position: relative; }
.login-field__icon {
    position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
    color: var(--pro-text-muted); font-size: 1.15rem; pointer-events: none;
}
.login-field .form-control {
    height: 46px; padding-left: 2.7rem; border-radius: 12px; border-color: var(--pro-dividers);
}
.login-field .form-control:focus {
    border-color: var(--pro-petrol);
    box-shadow: 0 0 0 3px rgba(0, 123, 72, .15);
}
.login-remember { margin: .2rem 0 1.1rem; }
.login-submit { height: 48px; border-radius: 12px; font-weight: 700; font-size: 1rem; box-shadow: 0 8px 20px rgba(0,123,72,.22); }
.login-submit:hover { transform: translateY(-1px); }
.login-alt {
    text-align: center; margin: 1.5rem 0 0; padding-top: 1.2rem;
    border-top: 1px solid var(--pro-dividers); font-size: .9rem; color: var(--pro-text-muted);
}

/* Logo istituzionale Pro Senectute in fondo al pannello del form */
.login-ps {
    margin-top: 1.4rem; padding-top: 1.1rem;
    border-top: 1px solid var(--pro-dividers);
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    animation: psEntra .9s ease-out .35s both;
}
.login-ps__eyebrow {
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .14em; color: var(--pro-text-muted);
}
.login-ps__logo {
    max-width: 160px; width: 100%; height: auto; display: block;
    opacity: .95; transition: transform .3s ease, opacity .3s ease;
}
.login-ps:hover .login-ps__logo { transform: scale(1.04); opacity: 1; }
@keyframes psEntra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .login-ps { animation: none; } }

/* --- Responsive --- */

/* Tablet e portatili piccoli: due colonne ma tutto rimpicciolito, altrimenti
   la card occupa quasi tutto lo schermo e sembra sproporzionata. */
@media (min-width: 900px) and (max-width: 1099.98px) {
    .login-split { max-width: 700px; }
    .login-brand { padding: 1.8rem 1.3rem 1.5rem; }
    .login-brand__logo { width: 60px; height: 60px; border-radius: 16px; }
    .login-brand h1 { font-size: 1.24rem; }
    .login-brand__tag { font-size: .84rem; max-width: 24ch; }
    .login-plate { width: 132px; margin-top: 1.1rem; }
    .login-brand__note { display: none; }
    .login-form { padding: 1.9rem 1.6rem; }
    .login-form__head { margin-bottom: 1.1rem; }
    .login-form__head h2 { font-size: 1.28rem; }
    .login-field { margin-bottom: .85rem; }
    .login-field .form-control { height: 44px; }
    .login-submit { height: 46px; }
    .login-alt { margin-top: 1.1rem; padding-top: .9rem; font-size: .85rem; }
    .login-ps { margin-top: 1rem; padding-top: .85rem; }
    .login-ps__logo { max-width: 128px; }
}

/* Schermi bassi (portatili 1366x768 e simili): la card deve stare in pagina
   senza scorrimento. Si comprime il piatto, la nota e il blocco del logo. */
@media (min-width: 900px) and (max-height: 800px) {
    .auth-shell { padding: 1rem .9rem .8rem; }
    .login-brand { padding: 1.6rem 1.4rem 1.3rem; }
    .login-brand__logo { width: 64px; height: 64px; border-radius: 17px; }
    .login-brand h1 { font-size: 1.35rem; }
    .login-plate { width: 116px; margin-top: .9rem; }
    .login-brand__note { display: none; }
    .login-form { padding: 1.7rem 1.7rem; }
    .login-form__head { margin-bottom: 1rem; }
    .login-field { margin-bottom: .8rem; }
    .login-alt { margin-top: 1rem; padding-top: .8rem; }
    .login-ps { margin-top: .8rem; padding-top: .7rem; gap: .3rem; }
    .login-ps__logo { max-width: 116px; }
}

/* Sotto i 900px: colonna singola. Due colonne in meno spazio diventano strette
   e la card finisce per occupare quasi tutta la larghezza dello schermo. */
@media (max-width: 899.98px) {
    .auth-shell { padding: 1.2rem .9rem 1rem; }
    .login-split { grid-template-columns: 1fr; max-width: 420px; }
    .login-brand { padding: 1.5rem 1.3rem 1.3rem; text-align: center; align-items: center; }
    .login-brand__logo { width: 56px; height: 56px; border-radius: 15px; }
    .login-brand h1 { font-size: 1.22rem; margin-bottom: .3rem; }
    .login-brand h1 br { display: none; }
    .login-brand__tag { font-size: .84rem; max-width: 30ch; }
    .login-plate { display: none; }         /* piatto nascosto su mobile per compattezza */
    .login-brand__note { display: none; }   /* la nota lunga si nasconde su schermo piccolo */
    .login-form { padding: 1.5rem 1.3rem; }
    .login-form__head { margin-bottom: 1rem; }
    .login-form__head h2 { font-size: 1.22rem; }
    .login-field { margin-bottom: .8rem; }
    .login-field .form-control { height: 44px; }
    .login-submit { height: 46px; }
    .login-alt { margin-top: 1.1rem; padding-top: .9rem; font-size: .85rem; }
    .login-ps { margin-top: 1rem; padding-top: .8rem; }
    .login-ps__logo { max-width: 124px; }
    /* Il margine di Bootstrap sotto la card basta a far comparire lo scorrimento */
    .auth-shell .auth-footer { margin-top: .9rem !important; }
}
@media (max-width: 359.98px) {
    .login-brand { padding: 1.25rem 1.1rem 1.1rem; }
    .login-form { padding: 1.25rem 1.1rem; }
    .login-brand__logo { width: 50px; height: 50px; }
}

/* ---- Sezione "Aggiungi piatti" ---- */
.add-head { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--pro-petrol-dark); font-size: 1rem; margin: .2rem 0 .6rem; flex-wrap: wrap; }
.add-head i { font-size: 1.15rem; }
.add-head .add-hint { font-weight: 500; font-size: .82rem; color: var(--pro-text-muted); }
.pool-card { position: relative; cursor: pointer; }
/* In hover la card sale sopra la barra sticky "Hai scelto N piatti" (z-index 5),
   così il tooltip dei dettagli resta leggibile e non ci finisce sotto. */
.pool-card:hover,
.pool-card:focus-visible { border-color: var(--pro-green); box-shadow: 0 6px 16px rgba(55,170,50,.14); z-index: 20; }
/* Affordance "Aggiungi" in fondo alla card: fine e mai sovrapposta al testo */
.pool-card__addhint {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .74rem; font-weight: 700; color: var(--pro-petrol-dark);
    margin-top: .5rem; padding: .2rem .6rem;
    border: 1px solid #cfe6d8; border-radius: 999px; background: var(--pro-petrol-50);
    transition: background .12s, color .12s, border-color .12s;
}
.pool-card:hover .pool-card__addhint,
.pool-card:focus-visible .pool-card__addhint { background: var(--pro-green); color: #fff; border-color: var(--pro-green); }

/* Badge classificazione (assegnata dallo chef, non vincolante) */
.badge-classif {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--pro-petrol-50); color: var(--pro-petrol-dark);
    border: 1px solid #c9dfd2; border-radius: 999px;
    font-size: .68rem; font-weight: 700; line-height: 1;
    padding: .2rem .55rem; text-transform: uppercase; letter-spacing: .02em;
}
.badge-classif i { font-size: .78rem; opacity: .9; }
.pool-card__classif { display: flex; flex-wrap: wrap; gap: 4px; margin: .35rem 0 .1rem; }

/* Titolo pagina ordinazione: più grande e in grassetto */
.ordine-title { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; }
/* =========================================================
   Notifiche (toast)
   Desktop: in alto a destra · Mobile: in basso, a tutta larghezza
   ========================================================= */
.toast-stack {
    position: fixed;
    top: calc(var(--app-header-height, 64px) + .75rem);
    right: 1rem;
    z-index: 1080;                 /* sopra le modali di Bootstrap (1055) */
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(380px, calc(100vw - 2rem));
    pointer-events: none;          /* i clic passano, tranne sulle notifiche */
}
.toast-app {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-left: 4px solid var(--pro-petrol);
    border-radius: 14px;
    padding: .85rem 2.2rem .85rem .9rem;
    box-shadow: 0 12px 32px rgba(0, 30, 18, .18);
    overflow: hidden;
    animation: toastIn .28s cubic-bezier(.21, 1.02, .73, 1);
}
.toast-app.is-uscita { animation: toastOut .25s ease forwards; }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(28px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
    from { opacity: 1; transform: none; max-height: 200px; }
    to   { opacity: 0; transform: translateX(28px); max-height: 0; margin-bottom: -.6rem; }
}
.toast-app__icona { flex: 0 0 auto; font-size: 1.3rem; line-height: 1.2; }
.toast-app__testo {
    flex: 1 1 auto; min-width: 0;
    font-size: .92rem; line-height: 1.35; color: var(--pro-text);
    overflow-wrap: anywhere;
}
.toast-app__chiudi {
    position: absolute; top: .35rem; right: .45rem;
    border: 0; background: transparent; color: var(--pro-text-muted);
    font-size: 1.25rem; line-height: 1; padding: .1rem .3rem;
    border-radius: 6px; cursor: pointer; transition: background .12s, color .12s;
}
.toast-app__chiudi:hover { background: var(--pro-cararra); color: var(--pro-text); }
/* Barra che mostra il tempo residuo */
.toast-app__barra {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: currentColor; opacity: .35; transform-origin: left center;
    animation: toastBarra linear forwards;
}
@keyframes toastBarra { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Varianti per tipo */
.toast-app--successo   { border-left-color: var(--pro-green); color: var(--pro-green-dark); }
.toast-app--errore     { border-left-color: var(--pro-cinnabar); color: var(--pro-cinnabar-dark); }
.toast-app--attenzione { border-left-color: #e6b800; color: #8a6b00; }
.toast-app--info       { border-left-color: var(--pro-petrol); color: var(--pro-petrol-dark); }

@media (max-width: 575.98px) {
    .toast-stack {
        top: auto;
        bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
        left: .75rem; right: .75rem;
        width: auto;
    }
    .toast-app { border-radius: 12px; padding: .8rem 2.1rem .8rem .8rem; }
    @keyframes toastIn {
        from { opacity: 0; transform: translateY(24px) scale(.97); }
        to   { opacity: 1; transform: none; }
    }
    @keyframes toastOut {
        from { opacity: 1; transform: none; max-height: 200px; }
        to   { opacity: 0; transform: translateY(24px); max-height: 0; margin-bottom: -.6rem; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .toast-app, .toast-app.is-uscita { animation: none; }
    .toast-app__barra { animation: none; opacity: .2; }
}

/* Avviso chiusure/festività che spostano o toccano una consegna */
.avviso-festivo {
    display: flex; align-items: flex-start; gap: .55rem;
    background: #fff4e0; border: 1px solid #f0d0a0; border-left: 4px solid #d9791f;
    border-radius: 10px; padding: .6rem .8rem; margin-bottom: .9rem;
    font-size: .85rem; color: #8a4b00; line-height: 1.35;
}
.avviso-festivo i { font-size: 1.1rem; flex: 0 0 auto; }

/* Riga informativa sullo stato dell'archivio ingredienti */
.archivio-stato {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    font-size: .85rem; color: var(--pro-text);
}
.archivio-stato i { color: var(--pro-petrol); font-size: 1.05rem; }

/* Campi obbligatori mancanti su un ingrediente inserito a mano */
.is-mancante {
    border-color: var(--pro-cinnabar) !important;
    background: #fff6f4;
    box-shadow: 0 0 0 2px rgba(225, 75, 52, .12);
}
.ingr-avviso {
    margin-top: .4rem; font-size: .78rem; font-weight: 600;
    color: var(--pro-cinnabar-dark); background: #fdece8;
    border: 1px solid #f2b6ab; border-radius: 8px; padding: .35rem .6rem;
}

/* Classificazioni nel form ricetta: spunta + eliminazione con conferma inline */
.classif-item {
    position: relative; display: flex; align-items: center; gap: .25rem;
    padding: .1rem .2rem; border-radius: 8px;
}
.classif-item:hover { background: var(--pro-cararra); }
.classif-item__lab {
    display: flex; align-items: center; gap: .3rem;
    font-size: .875rem; margin: 0; cursor: pointer; flex: 1 1 auto; min-width: 0;
}
.classif-item__lab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classif-item__del {
    flex: 0 0 auto; border: 0; background: transparent; color: var(--pro-text-muted);
    line-height: 1; font-size: .8rem; padding: .1rem .25rem; border-radius: 5px;
    cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.classif-item:hover .classif-item__del,
.classif-item__del:focus-visible { opacity: 1; }
.classif-item__del:hover { background: #fdece8; color: var(--pro-cinnabar-dark); }
.classif-item.is-confirming { background: #fdece8; }
.classif-item__conf {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    gap: .3rem; background: #fdece8; border-radius: 8px; font-size: .75rem; font-weight: 700;
    color: var(--pro-cinnabar-dark);
}
.classif-item__conf button {
    border: 1px solid currentColor; background: #fff; border-radius: 5px;
    font-size: .72rem; font-weight: 700; padding: 0 .35rem; cursor: pointer;
}
.classif-item__conf .cf-si { color: var(--pro-cinnabar-dark); }
.classif-item__conf .cf-no { color: var(--pro-text-muted); }

/* Etichetta "già usato" nei suggerimenti ingredienti */
.badge-usato {
    display: inline-block; font-size: .62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; background: var(--pro-petrol-50); color: var(--pro-petrol-dark);
    border: 1px solid #cfe6d8; border-radius: 999px; padding: .05rem .4rem; vertical-align: middle;
}

/* Riga valori per 100 g nel form ricetta (compilata da BLV o a mano) */
.macro-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
    margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--pro-dividers);
}
.macro-row__lab {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--pro-text-muted);
}
.macro-row label {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; color: var(--pro-text-muted); margin: 0;
}
.macro-row input {
    width: 74px; padding: .15rem .35rem; font-size: .8rem;
    border: 1px solid var(--pro-dividers); border-radius: 6px;
}
.macro-row input:focus { outline: none; border-color: var(--pro-petrol); box-shadow: 0 0 0 2px rgba(0,123,72,.12); }

/* Badge di stato del menu nell'elenco "Ordini ricevuti" */
.stato-menu {
    display: inline-flex; align-items: center; white-space: nowrap;
    font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .25rem .7rem;
}
.stato-menu--programmato { background: var(--pro-cararra); color: var(--pro-text-muted); border: 1px solid var(--pro-dividers); }
.stato-menu--aperto      { background: var(--pro-green-50);  color: var(--pro-green-dark);  border: 1px solid #bfe3bd; }
.stato-menu--confermato  { background: #eef4ff;              color: #2f5aa8;                border: 1px solid #ccdcf5; }
.stato-menu--consegna    { background: #fff4e0;              color: #9a5b00;                border: 1px solid #f0d0a0; }
.stato-menu--completato  { background: var(--pro-petrol-50); color: var(--pro-petrol-dark); border: 1px solid #cfe6d8; }

/* Data di produzione accanto a ogni piatto nel menu settimanale */
.pool-slot--prod { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pool-slot--prod > .form-select { flex: 1 1 200px; }
.pool-slot__prod { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }
.pool-slot__prod-lab {
    font-size: .72rem; font-weight: 700; color: var(--pro-text-muted);
    text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.pool-slot__prod input { width: 145px; }
@media (max-width: 575.98px) {
    .pool-slot__prod { width: 100%; }
    .pool-slot__prod input { width: auto; flex: 1; }
}

/* Nota della cucina mostrata al collaboratore nella pagina di ordinazione */
.nota-menu {
    display: flex; align-items: flex-start; gap: .6rem;
    background: #fff8e6; border: 1px solid #f0d9a0; border-left: 4px solid #e6b800;
    border-radius: 12px; padding: .75rem .9rem; margin-bottom: 1rem;
    font-size: .92rem; color: #6b5200;
}
.nota-menu i { font-size: 1.15rem; flex: 0 0 auto; }

/* Badge "visibile ai collaboratori" accanto alle note del menu */
.badge-visibile {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    background: var(--pro-petrol-50); color: var(--pro-petrol-dark);
    border: 1px solid #cfe6d8; border-radius: 999px; padding: .15rem .55rem; margin-left: .4rem;
}

/* Anteprima settimana nel form "Nuovo menu settimanale" */
.settimana-preview:not(:empty) {
    display: block; font-size: .88rem; color: var(--pro-petrol-dark);
    background: var(--pro-petrol-50); border: 1px solid #cfe6d8; border-radius: 10px;
    padding: .45rem .7rem;
}

/* Etichette di stato nelle sezioni di "I miei ordini" */
.badge-stato {
    display: inline-flex; align-items: center;
    font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    border-radius: 999px; padding: .25rem .7rem;
}
.badge-stato--aperto { background: var(--pro-green-50); color: var(--pro-green-dark); border: 1px solid #bfe3bd; }
.badge-stato--arrivo { background: var(--pro-petrol-50); color: var(--pro-petrol-dark); border: 1px solid #cfe6d8; }
.orders-section-title__hint {
    font-size: .8rem; font-weight: 500; text-transform: none; letter-spacing: 0;
    color: var(--pro-text-muted); margin-left: .5rem;
}

/* Bottone elimina nella card di "I miei ordini" */
.order-card__delete { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--pro-dividers); }
.order-card__delete .btn { width: 100%; }

/* Riga sede per consegna (1ª / 2ª) */
.sede-riga { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sede-riga__tag {
    flex: 0 0 auto; min-width: 190px;
    font-size: .8rem; font-weight: 700; color: var(--pro-petrol-dark);
    background: var(--pro-petrol-50); border: 1px solid #cfe6d8; border-radius: 999px;
    padding: .3rem .7rem;
}
.sede-riga .form-select { flex: 1 1 220px; }
.sede-riga[hidden] { display: none; }
@media (max-width: 575.98px) {
    .sede-riga__tag { min-width: 0; width: 100%; }
}

/* Riga "Settimana del …": in evidenza; il resto va sotto in piccolo */
.ordine-week { font-size: 1.2rem; font-weight: 800; color: var(--pro-text); margin: .15rem 0 .1rem; }
.ordine-week-sub { font-size: .82rem; margin: 0; }

/* Dettaglio ingredienti + allergeni al passaggio del mouse sulla card piatto */
.pool-card__detail {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    z-index: 30;
    background: var(--pro-text); color: #fff;
    border-radius: 10px; padding: .6rem .7rem;
    font-size: .78rem; line-height: 1.4;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
    pointer-events: none;
}
.pool-card__detail .pcd-k { font-weight: 700; color: var(--pro-olivgreen); }
.pool-card__detail .pcd-row + .pcd-row { margin-top: .35rem; }
.pool-card:hover .pool-card__detail,
/* focus-visible e non focus-within: col clic del mouse la scheda prende il fuoco
   e il riquadro resterebbe aperto anche dopo aver spostato il puntatore.
   Da tastiera invece il dettaglio serve, e :focus-visible lo mostra. */
.pool-card:focus-visible .pool-card__detail,
.pool-card:has(:focus-visible) .pool-card__detail { display: block; }

/* ==================== Statistiche (StatisticheChef/Index) ==================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.kpi { background: var(--white); border: 1px solid var(--pro-dividers); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 4px 14px rgba(0,95,55,.05); }
.kpi__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pro-text-muted); font-weight: 700; }
.kpi__value { font-size: 1.9rem; font-weight: 800; color: var(--pro-petrol-dark); line-height: 1.1; }
.kpi__value.trend-up { color: var(--pro-green-dark); }
.kpi__value.trend-down { color: var(--pro-cinnabar-dark); }
.kpi__foot { font-size: .78rem; color: var(--pro-text-muted); }
.chart-card { background: var(--white); border: 1px solid var(--pro-dividers); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 6px 18px rgba(0,95,55,.06); height: 100%; }
.chart-card h2 { font-size: 1rem; font-weight: 700; color: var(--pro-petrol-dark); margin-bottom: .8rem; }
.chart-wrap { position: relative; height: 300px; }
.chart-wrap.sm { height: 260px; }

/* ==================== Informativa privacy (Home/Privacy) ==================== */
.privacy { max-width: 62rem; margin: 0 auto; padding-bottom: 2rem; }
.privacy__head { border-bottom: 1px solid var(--pro-dividers); padding-bottom: 1rem; margin-bottom: 1.4rem; }
.privacy__head h1 { font-size: 1.6rem; font-weight: 800; color: var(--pro-petrol-dark); margin: 0; line-height: 1.2; }
.privacy__head h1 i { color: var(--pro-petrol); }
.privacy__meta { font-size: .82rem; color: var(--pro-text-muted); margin: .35rem 0 0; }
.privacy__intro { background: var(--white); border: 1px solid var(--pro-dividers); border-left: 4px solid var(--pro-petrol); border-radius: 12px; padding: 1rem 1.1rem; font-size: .95rem; line-height: 1.65; }
.privacy__sez { margin-top: 1.8rem; }
.privacy__sez h2 { font-size: 1.02rem; font-weight: 700; color: var(--pro-petrol-dark); margin-bottom: .6rem; }
.privacy__sez p, .privacy__sez li { font-size: .93rem; line-height: 1.65; }
.privacy__sez ul { padding-left: 1.15rem; margin-bottom: .8rem; }
.privacy__sez li { margin-bottom: .38rem; }
.privacy__nota { color: var(--pro-text-muted); font-size: .87rem !important; border-left: 3px solid var(--pro-dividers); padding-left: .8rem; }
.privacy__todo { background: #fff3cd; border-bottom: 1px dashed #b8901f; color: #7a5c00; padding: 0 .25rem; border-radius: 3px; font-weight: 600; }
.privacy__avviso { display: flex; gap: .7rem; align-items: flex-start; margin-top: 2.2rem; background: #fff8e6; border: 1px solid #f0d99a; border-radius: 12px; padding: .95rem 1.1rem; font-size: .87rem; line-height: 1.55; color: #6b5410; }
.privacy__avviso i { font-size: 1.35rem; flex-shrink: 0; color: #b8901f; }
@media (max-width: 575.98px) {
    .privacy__head h1 { font-size: 1.3rem; }
    .privacy__intro { padding: .85rem .9rem; }
}

/* ==================== Diagnostica posta ==================== */
.esito-ok { border-left: 4px solid var(--pro-petrol); }
.esito-ko { border-left: 4px solid var(--pro-cinnabar); }
.errore-posta {
    background: #2b2b2b; color: #f1f1f1; border-radius: 8px; padding: .8rem .9rem;
    font-size: .78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
    max-height: 320px; overflow: auto; margin: 0;
}

/* ==================== Guida introduttiva (riflettore) ==================== */
body.guida-aperta { overflow: hidden; }

.guida {
    position: fixed; inset: 0; z-index: 2000;
    opacity: 0; visibility: hidden;
    transition: opacity .32s ease, visibility .32s;
}
.guida--visibile { opacity: 1; visibility: visible; }

/* Il foro è un rettangolo trasparente con un'ombra enorme attorno:
   è l'ombra a fare da velo scuro sul resto della pagina. */
.guida__foro {
    position: absolute; border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(6, 32, 20, .72),
                0 0 0 2px rgba(187, 207, 0, .85),
                0 0 26px 6px rgba(187, 207, 0, .35);
    transition: left .45s cubic-bezier(.4, 0, .2, 1), top .45s cubic-bezier(.4, 0, .2, 1),
                width .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.guida__foro::after {
    content: ""; position: absolute; inset: -3px; border-radius: 16px;
    border: 2px solid rgba(187, 207, 0, .55);
    animation: guidaPulsa 2s ease-out infinite;
}
.guida__foro--nascosto {
    /* Nessun bersaglio: resta solo il velo, centrato e senza cornice */
    left: 50%; top: 50%; width: 0; height: 0;
    box-shadow: 0 0 0 9999px rgba(6, 32, 20, .78);
}
.guida__foro--nascosto::after { display: none; }

@keyframes guidaPulsa {
    0%   { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.09); opacity: 0; }
}

.guida__scheda {
    position: absolute; width: 340px; max-width: calc(100vw - 24px);
    background: var(--white); border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 40, 25, .38);
}
.guida__scheda--centro {
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 420px;
}
.guida__scheda--basso {
    left: 12px; right: 12px; bottom: 12px; top: auto;
    width: auto; max-width: none;
}
.guida__scheda--entra { animation: guidaEntra .34s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes guidaEntra {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.guida__scheda--centro.guida__scheda--entra { animation: guidaEntraCentro .34s cubic-bezier(.2,.8,.3,1) both; }
@keyframes guidaEntraCentro {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.guida__barra { height: 4px; background: var(--pro-dividers); }
.guida__barra-avanz {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--pro-petrol), var(--pro-olivgreen));
    transition: width .4s ease;
}
.guida__corpo { padding: 1.15rem 1.25rem .9rem; }
.guida__icona {
    width: 42px; height: 42px; border-radius: 12px; margin-bottom: .7rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--pro-petrol), var(--pro-petrol-dark));
    color: #fff; font-size: 1.35rem;
}
.guida__titolo {
    font-size: 1.08rem; font-weight: 800; color: var(--pro-petrol-dark);
    margin: 0 0 .35rem; line-height: 1.25;
}
.guida__testo { font-size: .9rem; line-height: 1.55; color: var(--pro-text); margin: 0; }
.guida__piede {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .7rem 1.25rem 1rem; flex-wrap: wrap;
}
.guida__salta {
    background: none; border: 0; padding: 0;
    font-size: .8rem; color: var(--pro-text-muted); text-decoration: underline;
}
.guida__salta:hover { color: var(--pro-text); }
.guida__nav { display: flex; align-items: center; gap: .45rem; }
.guida__conta { font-size: .75rem; color: var(--pro-text-muted); margin-right: .2rem; }

@media (max-width: 575.98px) {
    .guida__corpo { padding: 1rem 1.05rem .8rem; }
    .guida__piede { padding: .6rem 1.05rem .9rem; }
    .guida__titolo { font-size: 1rem; }
    .guida__scheda--centro { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
    .guida__foro, .guida__scheda--entra, .guida__barra-avanz { transition: none; animation: none; }
    .guida__foro::after { animation: none; }
}

/* Link "Rivedi la guida" in fondo alla home */
.rivedi-guida {
    display: inline-flex; align-items: center; gap: .4rem;
    background: none; border: 0; padding: 0;
    color: var(--pro-petrol-dark); font-size: .87rem; font-weight: 600;
}
.rivedi-guida:hover { text-decoration: underline; }

/* Il bottone della guida in barra: accanto a "Scrivi alla cucina" e "Esci", che sono
   entrambi in contorno grigio, deve staccarsi. Pillola piena nel verde del brand, con
   la stessa sfumatura dell'avatar utente — resta di famiglia invece di introdurre un
   colore nuovo. Il lime è stato scartato: sopra ci sta solo testo scuro, e il risultato
   era un cartellino da saldi. */
.btn-guida {
    background: linear-gradient(135deg, var(--pro-petrol), var(--pro-petrol-dark));
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 95, 55, .22);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-guida:hover,
.btn-guida:focus-visible {
    color: #fff;
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(0, 95, 55, .3);
    transform: translateY(-1px);
}
.btn-guida:active {
    color: #fff;
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 95, 55, .25);
}
/* Esci: è l'ultima cosa che si preme e non deve competere con la Guida. Resta in tono
   neutro e vira al rosso del brand solo quando ci passi sopra, così l'intenzione si
   capisce un attimo prima di cliccare. */
.btn-esci {
    background: transparent;
    border: 1px solid var(--pro-dividers);
    border-radius: 999px;
    color: var(--pro-text-muted);
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-esci:hover,
.btn-esci:focus-visible {
    background: var(--pro-cinnabar-50);
    border-color: var(--pro-cinnabar);
    color: var(--pro-cinnabar-dark);
}
.btn-esci:active {
    background: var(--pro-cinnabar-50);
    border-color: var(--pro-cinnabar-dark);
    color: var(--pro-cinnabar-dark);
}

/* La barra utente parla per pillole: targhetta, Guida ed Esci lo sono già, e i bottoni
   in contorno che restano si allineano invece di fare angoli a metà riga. */
.app-user-area .btn-outline-secondary { border-radius: 999px; }

/* Chi ha chiesto meno animazioni non deve vedere il bottone muoversi */
@media (prefers-reduced-motion: reduce) {
    .btn-guida, .btn-esci { transition: none; }
    .btn-guida:hover, .btn-guida:focus-visible, .btn-guida:active { transform: none; }
}

/* ==================== Aggiunta piatto: animazione e tocco ==================== */

/* Piatto di portata che vola dalla scheda del menu alla lista (e viceversa) */
.piattino-volante {
    position: fixed; z-index: 3000; pointer-events: none;
    filter: drop-shadow(0 10px 16px rgba(0, 60, 35, .32));
}
.piattino-volante svg { width: 100%; height: 100%; display: block; }

/* Sbuffi di vapore sul piatto appena servito */
.sbuffo {
    position: fixed; width: 13px; height: 13px; border-radius: 50%;
    background: rgba(0, 95, 55, .30); filter: blur(3px);
    z-index: 3001; pointer-events: none;
}

/* La riga resta invisibile finché il piatto non è "atterrato" */
.chosen-chip--in-arrivo { opacity: 0; }
.chosen-chip--nuovo { animation: chipEntra .42s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes chipEntra {
    from { opacity: 0; transform: translateY(-8px) scale(.94); }
    60%  { transform: translateY(0) scale(1.03); }
    to   { opacity: 1; transform: none; }
}
.conta-pulsa { animation: contaPulsa .5s ease; display: inline-block; }
@keyframes contaPulsa {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Tocco: il dettaglio si apre solo su richiesta, non al passaggio simulato */
/* Dettaglio del piatto: apertura esplicita.
   Non è dentro @media (hover: none) di proposito — parecchi portatili con schermo
   touch dichiarano comunque di avere un puntatore, e lì la regola non si attiverebbe.
   Il discriminante lo mette il JS sul body, in base a come è avvenuta l'interazione. */

/* Da tablet in su il dettaglio resta un riquadro a comparsa. */
@media (min-width: 768px) {
    /* Dopo un tocco lo stato :hover resta appiccicato: va disinnescato,
       altrimenti il dettaglio comparirebbe ad ogni tap involontario. */
    body.tocco-attivo .pool-card:hover .pool-card__detail,
    body.tocco-attivo .pool-card:focus-visible .pool-card__detail { display: none; }

    /* Scheda aperta col dito: il dettaglio si vede. Le varianti servono a superare
       la specificità delle regole qui sopra e di quella con :hover. */
    .pool-card--aperta .pool-card__detail,
    .pool-card--aperta:hover .pool-card__detail,
    .pool-card--aperta:focus-within .pool-card__detail,
    body.tocco-attivo .pool-card--aperta .pool-card__detail,
    body.tocco-attivo .pool-card--aperta:hover .pool-card__detail { display: block; }
    .pool-card--aperta { z-index: 25; }
}

/* Su schermo stretto ingredienti e allergeni sono SEMPRE visibili sotto la scheda:
   un riquadro che appare e scompare al tocco è solo un fastidio. Da riquadro
   sovrapposto scuro diventa un pannello chiaro integrato nella scheda. */
@media (max-width: 767.98px) {
    /* Con il dettaglio sempre aperto due colonne strette diventano illeggibili:
       sotto i 480 px di larghezza utile la griglia passa a una colonna sola. */
    .pool-cat__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

    /* Qui il dettaglio è dentro la scheda, non un riquadro sovrapposto: la scheda
       non deve più alzarsi sopra la barra del totale. Con lo stato :hover che il
       tocco lascia appiccicato, scorrendo la barra le finiva sotto. */
    .pool-card:hover,
    .pool-card:focus-visible { z-index: auto; }
    .order-actions { z-index: 30; }

    .pool-card__detail {
        display: block;
        position: static;
        margin-top: .5rem;
        padding: .45rem .55rem;
        background: var(--pro-cararra);
        color: var(--pro-text);
        border: 1px solid var(--pro-dividers);
        border-radius: 8px;
        box-shadow: none;
        font-size: .72rem; line-height: 1.45;
        pointer-events: auto;
    }
    .pool-card__detail .pcd-k { color: var(--pro-petrol-dark); }

    /* Nel markup il pulsante precede il dettaglio: qui va spostato in fondo,
       così si legge prima cosa contiene il piatto e poi si decide.
       Resta una pastiglia compatta allineata a destra: a tutta larghezza
       pesava troppo rispetto alla scheda. */
    .pool-card { display: flex; flex-direction: column; }
    .pool-card__addhint {
        order: 10;
        align-self: flex-end;
        width: auto; min-height: 34px;
        margin-top: .6rem; padding: .3rem .85rem;
        font-size: .8rem; gap: .35rem;
        background: var(--pro-green); color: #fff; border-color: var(--pro-green);
        box-shadow: 0 3px 9px rgba(55, 170, 50, .3);
    }
    .pool-card__addhint i { font-size: 1rem; }
    .pool-card__addhint:active {
        transform: scale(.95);
        box-shadow: 0 1px 4px rgba(55, 170, 50, .35);
    }
}
.pool-card__addhint { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .chosen-chip--nuovo, .conta-pulsa { animation: none; }
    .chosen-chip--in-arrivo { opacity: 1; }
}

/* ==================== I miei ordini: giorno di consegna e numerazione ==================== */
/* La data completa della consegna, con l'iniziale del giorno maiuscola */
.order-card__data { text-transform: capitalize; color: var(--pro-petrol-dark); font-weight: 700; }
.badge-slittata {
    background: rgba(225, 75, 52, .12); color: var(--pro-cinnabar);
    font-size: .6rem; font-weight: 700; text-transform: none; letter-spacing: 0;
    padding: .2em .5em; border-radius: 6px;
}
/* Pastiglia numerata al posto della vecchia dicitura "Slot N" */
.order-card__num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .18rem;
    min-width: 2.5rem; height: 1.45rem; padding: 0 .42rem;
    border-radius: 999px;
    background: var(--pro-petrol-50); color: var(--pro-petrol-dark);
    font-weight: 800; font-size: .74rem; line-height: 1;
}
.order-card__num i { font-size: .9rem; opacity: .85; }

/* Avviso "ordini chiusi" nella pagina di composizione (il conto alla rovescia è in home) */
.avviso-chiusi {
    display: flex; align-items: center; gap: .6rem;
    background: #f1f3f5; border: 1px solid var(--pro-dividers); border-left: 4px solid #6c757d;
    color: var(--pro-text); border-radius: 12px;
    padding: .7rem .9rem; margin-bottom: 1rem; font-size: .9rem;
}
.avviso-chiusi i { font-size: 1.3rem; color: #6c757d; flex-shrink: 0; }

/* Nella home il conto alla rovescia sta sotto l'intestazione, non a tutta pagina */
.countdown-bar { margin-top: .25rem; }

/* ==================== Requisiti password in tempo reale (registrazione) ==================== */
.pwd-regole {
    list-style: none; margin: .6rem 0 1rem; padding: .7rem .8rem;
    background: var(--pro-cararra); border: 1px solid var(--pro-dividers); border-radius: 10px;
    display: flex; flex-direction: column; gap: .3rem;
}
.pwd-regola {
    display: flex; align-items: center; gap: .45rem;
    font-size: .81rem; line-height: 1.3; color: var(--pro-text-muted);
    transition: color .15s ease;
}
.pwd-regola__icona { font-size: 1.05rem; flex-shrink: 0; transition: color .15s ease; }
.pwd-regola.is-ok  { color: var(--pro-green-dark); }
.pwd-regola.is-ok .pwd-regola__icona { color: var(--pro-green); }
.pwd-regola.is-ko  { color: var(--pro-cinnabar); }
.pwd-regola.is-ko .pwd-regola__icona { color: var(--pro-cinnabar); }

/* ==================== Account in attesa di approvazione (dopo il login) ==================== */
.attesa-info {
    text-align: left;
    background: var(--pro-cararra);
    border: 1px solid var(--pro-dividers);
    border-radius: 12px;
    padding: .8rem .9rem;
    margin: 0 0 1rem;
    display: flex; flex-direction: column; gap: .6rem;
}
.attesa-info__riga { display: flex; align-items: flex-start; gap: .6rem; font-size: .86rem; line-height: 1.45; }
.attesa-info__riga i { font-size: 1.2rem; color: var(--pro-petrol); flex-shrink: 0; margin-top: .05rem; }

/* Variante "in attesa di apertura" dell'avviso nella pagina di ordinazione */
.avviso-chiusi--attesa {
    background: #eef4ff; border-color: #ccdcf5; border-left-color: #2f5aa8; color: #22406f;
}
.avviso-chiusi--attesa i { color: #2f5aa8; }

/* Riga "resta connesso" + "password dimenticata" nella schermata di accesso */
.login-riga-opzioni {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap; margin: .2rem 0 1.1rem;
}
.login-riga-opzioni .login-remember { margin: 0; }
.login-dimenticata { font-size: .84rem; font-weight: 600; color: var(--pro-petrol-dark); }
.login-dimenticata:hover { text-decoration: underline; }

/* =========================================================
   Profilo personale
   ========================================================= */
.profilo-testata {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.profilo-testata__avatar {
    flex: 0 0 auto;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pro-petrol), var(--pro-petrol-dark));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem; font-weight: 800;
}
.profilo-testata__nome {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pro-petrol-dark);
    margin: 0 0 .2rem;
}
.profilo-testata__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .9rem;
    font-size: .85rem;
    color: var(--pro-text-muted);
}

@media (max-width: 575.98px) {
    .profilo-testata__avatar { width: 46px; height: 46px; font-size: 1.1rem; }
    .profilo-testata__nome { font-size: 1.2rem; }
}

/* Data unica di produzione per tutta la consegna */
.pool-strumenti {
    display: grid;
    gap: .4rem;
    padding: .55rem .6rem;
    margin-bottom: .6rem;
    background: var(--pro-cararra);
    border: 1px solid var(--pro-dividers);
    border-radius: 10px;
}
.pool-strumenti__riga { display: flex; align-items: center; gap: .4rem; }
.pool-strumenti__riga > .form-control { flex: 1 1 auto; min-width: 0; }
.pool-strumenti__icona { flex: 0 0 auto; color: var(--pro-petrol); font-size: 1.05rem; }

/* Scelta del piatto con ricerca, dentro ogni slot del pool */
.piatto-cerca { position: relative; flex: 1 1 240px; min-width: 0; }
.piatto-cerca__campo { padding-right: 1.9rem; }

/* Il piatto scelto: ha l'aspetto di un campo ma è testo, così un nome lungo va a capo
   invece di essere tagliato a metà come farebbe un input. */
.piatto-cerca__scelto {
    display: block;
    width: 100%;
    text-align: left;
    padding: .25rem 1.9rem .25rem .5rem;
    font-size: .875rem;
    line-height: 1.35;
    background: var(--white);
    border: 1px solid var(--pro-dividers);
    border-radius: .375rem;
    color: var(--pro-text);
}
.piatto-cerca__scelto:hover { border-color: var(--pro-petrol); }
.piatto-cerca__scelto:focus-visible { outline: 2px solid var(--pro-petrol); outline-offset: 1px; }
.piatto-cerca__svuota {
    position: absolute;
    top: 50%; right: .35rem;
    transform: translateY(-50%);
    display: none;
    background: none; border: 0; padding: 0 .15rem;
    color: var(--pro-text-muted); line-height: 1;
}
.piatto-cerca--pieno .piatto-cerca__svuota { display: block; }
.piatto-cerca__svuota:hover { color: var(--pro-cinnabar); }
.piatto-cerca__lista {
    position: absolute;
    z-index: 1500;
    top: calc(100% + 2px);
    left: 0; right: 0;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0, 95, 55, .12);
}
/* I nomi lunghi devono leggersi per intero anche nell'elenco, non su una riga tagliata */
.piatto-cerca__lista .list-group-item { white-space: normal; text-align: left; line-height: 1.35; }

/* Giorni di conservazione accanto al nome: informazione di servizio, non deve rubare
   l'occhio al nome del piatto. Non va mai a capo da sola. */
.piatto-cerca__gg {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--pro-petrol-50);
    border: 1px solid var(--pro-petrol-100);
    color: var(--pro-petrol-dark);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.piatto-cerca__gg:empty { display: none; }
.piatto-cerca__lista .active .piatto-cerca__gg {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}
/* Evidenziazione da tastiera: distinta dall'elemento già scelto, che usa .active */
.piatto-cerca__lista .is-evidenziata { background: var(--pro-petrol-50); }

/* Colonna del pool per una consegna che non si fa: resta leggibile ma spenta */
.pool-col--annullata { opacity: .75; }