/* ---------------------------------------------------------------------------------------------
   00_context_menu.css
   --------------------------------------------------------------------------------------------- */

/* Menu contestuale personalizzato (js/00_context_menu.js), al posto di quello nativo del
   browser: stesso linguaggio visivo del riquadro dei suggerimenti dell'autocomplete (sfondo
   bianco, bordo sottile, angoli leggermente arrotondati -- ".ui-autocomplete, .ui-front" in
   css/40_lists.css), ma con una propria classe (semantica diversa, azioni non risultati di
   ricerca) e uno z-index più alto: deve poter comparire sopra a qualunque altra cosa, incluso
   l'autocomplete stesso o una modale aperta. */
.context-menu {
    position: fixed;
    z-index: 200000;
    margin: 0;
    padding: 4px 0;
    min-width: 180px;
    list-style: none;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 0.1875em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    font-size: 14px;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;
}

/* * { font-size: 16pt } (01_html.css) si applica direttamente ad OGNI elemento, non solo per
   ereditarietà: senza ripeterlo qui anche per le due <span> dentro ogni voce (icona ed etichetta,
   vedi js/00_context_menu.js), tornerebbero al corpo 16pt di default invece dei 14px pensati per
   questo menu, indipendentemente da quanto impostato sopra su .context-menu-item stesso. */
.context-menu-item, .context-menu-item * {
    font-size: 14px;
}

/* :focus-visible oltre a :hover: le voci si raggiungono ora anche con le frecce da tastiera
   (roving focus, js/00_context_menu.js) -- stesso riscontro visivo di :hover invece del solo
   anello blu generico (css/00_a11y.css), per restare coerente con l'evidenziazione a cui questo
   menu è già abituato. */
.context-menu-item:hover,
.context-menu-item:focus-visible {
    background-color: var(--brand);
    color: #fff;
    outline: none;
}

/* Icona SVG di ogni voce: dimensione fissa e "stroke: currentColor" già impostato inline
   (js/00_context_menu.js), così segue da solo il colore del testo -- anche al passaggio del
   mouse o da disabilitata, senza bisogno di un colore separato da gestire qui. */
.context-menu-icon {
    display: flex;
    flex: 0 0 16px;
}

.context-menu-icon svg {
    width: 16px;
    height: 16px;
}

/* Riga divisoria fra gruppi di voci correlate (es. Annulla/Ripeti | Taglia/Copia/Incolla |
   Seleziona tutto nel menu dei campi di testo, js/00_context_menu.js): un <li> vuoto invece di un
   <hr>, per restare dentro alla stessa lista senza spezzarne la semantica. */
.context-menu-separator {
    margin: 4px 0;
    border-top: 1px solid #e6e6e6;
}

/* Es. "Taglia"/"Incolla" su un campo readonly: la voce resta visibile (coerenza con le altre
   dello stesso menu) ma non selezionabile, invece di sparire e spostare le altre. */
.context-menu-item-disabled {
    color: #bbb;
    cursor: default;
}

.context-menu-item-disabled:hover {
    background-color: transparent;
    color: #bbb;
}

/* ---------------------------------------------------------------------------------------------
   icons.css
   --------------------------------------------------------------------------------------------- */

/* Icone (img/icons/*.svg, inserite dentro l'elemento class="icon-xxx" stesso da js/icons.js):
   sostituisce il vecchio font icone del sito (fonts/osteriadelpane.*, rimosso). Stesso selettore
   "inizia con"/"contiene, separata da spazio" del vecchio ::before (fonts/osteriadelpane.css) e le
   stesse proprietà di piazzamento sull'elemento icona stesso (prima erano sul suo ::before, unico
   ad avere dimensione: l'<i> vuoto di per sé non ne aveva alcuna) -- ogni regola già in uso nel
   sito che imposta font-size/color su quell'elemento (es. ".admin-row-btn i", css/admin.css;
   ".footer .social a i", css/site.css) continua quindi a dimensionare/colorare l'icona come prima,
   invariata. "font-variant"/"text-transform"/l'antialiasing del vecchio ::before non hanno un
   corrispondente qui: erano difese pensate per un carattere di un font (una trasformazione del
   testo di un antenato che avrebbe alterato il glyph mostrato, l'hinting del font), non hanno più
   senso per un vero SVG. */
[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 .2em;
    text-align: center;
    line-height: 1em;
}

/* fill: currentColor, non uno fisso nell'SVG stesso (.tools/build_icons.py lo lascia assente
   apposta): eredita così il "color" dell'elemento icona esattamente come prima faceva il testo del
   glyph, senza bisogno di gestirlo qui per ogni singolo colore/stato (:hover, .admin-row-btn-xxx,
   ...) già usato nel sito. Dimensione in "%" del genitore (già 1em, qui sopra), non di nuovo in
   "em" qui: "* { font-size: 16pt }" (root.css) si applica ad OGNI elemento, quindi anche a questo
   stesso <svg> -- un secondo "1em" risolverebbe contro il SUO PROPRIO font-size così impostato
   (16pt fissi), non contro quello, spesso diverso, del genitore <i> che la riga sopra usa davvero
   per dimensionarsi (es. ".subpage-title > a i", ".mobile-menu i", 32px/29px/...): risultato,
   ogni icona della stessa identica dimensione fissa (16pt) ovunque nel sito, a prescindere dal
   contesto. */
[class^="icon-"] svg, [class*=" icon-"] svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    /* Il vecchio font-icona non aveva figli da colpire: un click ovunque nel glifo risolveva
       sempre e.target sull'elemento icona (l'<i>) stesso. Questo <svg> iniettato, invece, è
       proprio ciò che riceve il click per davvero -- senza pointer-events: none, e.target/
       currentTarget diventa l'<svg> (o un suo <path>) invece dell'<i> che porta i data-* che il
       resto del sito si aspetta di leggerci sopra (es. .holiday-edit in closures.php, che
       altrimenti chiama atob(undefined) e lancia "String contains an invalid character").
       pointer-events: none è ereditato dai figli (i <path> generati), non serve ripeterlo lì. */
    pointer-events: none;
    vertical-align: -0.125em;
}

/* ---------------------------------------------------------------------------------------------
   00_root.css
   --------------------------------------------------------------------------------------------- */

:root
{
    --brand: #FF192E;
    --separator: #FF3B4D;
}

@media screen and (max-width: 450px)
{
    :root
    {
        --headerSize:45px;
    }
}

@media screen and (min-width: 451px)
{
    :root
    {
        --headerSize:90px;
    }
}

/* ---------------------------------------------------------------------------------------------
   00_a11y.css
   --------------------------------------------------------------------------------------------- */

/* Testo presente per gli screen reader ma tolto dal flusso visivo -- es. le intestazioni di
   sezione aggiunte solo per l'accessibilità in vari punti del sito pubblico/amministrazione.
   "clip"/clip-path invece di semplicemente display:none o visibility:hidden: quei due tolgono
   l'elemento anche dall'albero di accessibilità (esattamente l'opposto di quanto voluto qui),
   mentre questo pattern (lo standard de facto per questo scopo) lo rende invisibile solo dal
   punto di vista del rendering, largo/alto 1px con l'overflow tagliato. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Link "Salta al contenuto principale" (.private/templates/index.php, primo elemento del
   <body>): stessa tecnica di .sr-only qui sopra ma solo fino a quando non riceve il focus (Tab
   dalla barra degli indirizzi) -- da quel momento torna a comparire, in cima a tutto (z-index),
   per chi naviga da tastiera. Chi non usa la tastiera non lo vede mai, esattamente come uno
   screen reader lo annuncia comunque a prescindere dalla sua visibilità (vedi .sr-only). */
.skip-link {
    position: absolute;
    top: -999px;
    left: 0;
    z-index: 100001;
    padding: 0.8em 1.2em;
    background-color: var(--brand);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* Indicatore di focus uniforme per l'intero sito (pubblico e amministrazione): :focus-visible
   invece di :focus, così compare solo quando il focus arriva davvero da tastiera (Tab) -- un
   click del mouse su un bottone/link non lo mostra, come ci si aspetta dai browser moderni che
   lo supportano tutti. Selettore molto ampio apposta: senza, ogni singolo widget del sito
   (custom o nativo) dovrebbe definirsi il proprio outline visibile una voce alla volta, con
   ottime probabilità di dimenticarsene qualcuno -- unica eccezione .switch-label più sotto (uno
   pseudo-bottone che replica visivamente lo stato di una vera casella nascosta: l'anello andrebbe
   sull'elemento sbagliato). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
}

/* Sopra a un bottone pieno rosso (bottone-rosso, context-menu-item:hover, ecc.) l'anello blu di
   sopra si vede comunque bene, ma un contorno bianco addizionale lo stacca meglio ancora dal
   rosso di sfondo -- stesso principio del bordo bianco già usato altrove (bottone-bianco,
   99_footer.css) per separare un elemento rosso dal proprio sfondo. */
.bottone-rosso:focus-visible,
.bottone-bianco:focus-visible {
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #fff;
}

/* Rispetta la preferenza di sistema "riduci le animazioni" (macOS/Windows/Android/iOS, letta dal
   browser): anima ancora ciò che è essenziale a comprendere un cambio di stato (es. l'apertura di
   un <dialog>), ma toglie transizioni/animazioni puramente decorative e lo scorrimento "smooth"
   (html sopra, 01_html.css) che altrimenti anima OGNI salto d'ancora della pagina, skip-link
   incluso -- fastidioso o disorientante per chi soffre di disturbi vestibolari, la ragione stessa
   per cui questa preferenza esiste. "*" con !important: più affidabile che inseguire ogni singola
   regola di animazione/transizione sparsa nel resto del sito (slider, modali, dropdown...) una
   per una, con lo stesso rischio di dimenticanza del selettore del focus qui sopra. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------------------------
   01_html.css
   --------------------------------------------------------------------------------------------- */

* {
    padding: 0;
    margin: 0;
    font-size: 16pt;
    font-family: 'Inter', sans-serif;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

html {
    scroll-behavior: smooth;
}

h1 {
    font-size: 48pt;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

sup {
    font-size: 60%;
}

/* ---------------------------------------------------------------------------------------------
   02_generic.css
   --------------------------------------------------------------------------------------------- */

.hidden {
    display: none;
}

.float_clear {
    clear: both;
}

.font_thin {
    font-weight: lighter;
}

.font_bold {
    font-weight: bold;
}

.font_italic {
    font-style: italic;
}

.font_red {
    color: var(--brand);
}

.text-center {
    text-align: center;
}

.underline {
    text-decoration: underline !important;
}

.no_margin {
    margin: 0;
}

.no_margin_left {
    margin-left: 0 !important;
}

.no_margin_bottom {
    margin-bottom: 0 !important;
}

.only_desktop {
}

.only_mobile {
}

@media screen and (max-width: 450px) {
    .only_desktop {
        display: none !important;
    }

    .mobile_white_text {
        color: #fff !important;
    }
}

@media screen and (min-width: 451px) {
    .only_mobile {
        display: none !important;
    }
}

/* ===== STAMPA =====
   Assente del tutto finora (un controllo SEO/performance esterno lo segnalava: nessuna regola
   @media print da nessuna parte, quindi una pagina stampata usciva con l'intero layout da
   schermo -- header, hamburger, dialog, icone social). Solo qui sotto, non nei due file dedicati
   al sito pubblico/pannello (css/site.css/admin.css): ogni selettore qui esiste solo nel markup
   del sito pubblico (templates/index.php), mai in quello del pannello (templates/admin-area.php,
   nomi di classe/id diversi) -- stare in questo file condiviso non lo rende quindi meno mirato. */
@media print {
    /* .only_mobile è "nascosta oltre 450px" solo tramite l'@media SCREEN qui sopra: durante la
       stampa quella query non si applica mai (screen esclude esplicitamente print), quindi senza
       questa regola la versione mobile di ogni intestazione (es. l'<h2> di .subpage-title)
       finirebbe stampata ACCANTO a quella desktop (mai nascosta a sua volta, stesso motivo)
       invece che una sola delle due. .only_desktop non ha bisogno del contrario: resta visibile
       di suo (il bare ".only_desktop {}" qui sopra non le toglie nulla), niente da forzare.
    */
    .only_mobile {
        display: none !important;
    }

    /* Navigazione/controlli interattivi: un link non è cliccabile su carta, un menu a scomparsa
       non ha senso da chiuso per sempre -- niente di tutto questo aiuta chi ha stampato la pagina
       (tipicamente per portare con sé un menu o la carta dei vini). Le due icone di navigazione
       rapida dentro .subpage-title (non l'intero blocco: il suo <h1>/<h2> resta, è il vero titolo
       della pagina) sono l'unica eccezione mirata invece di nascondere il blocco per intero. */
    .skip-link,
    #mobile-menu-toggle,
    #mobile-menu,
    .header_phone,
    .subpage-title a,
    .footer .link_utils,
    .footer .social,
    .footer_social,
    #privacy-dialog,
    #cookie-dialog,
    #terms-dialog,
    .admin_alert,
    .reserve-button {
        display: none !important;
    }
}

.overflow_text {
    overflow-x: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------------------------
   03_common.css
   --------------------------------------------------------------------------------------------- */

/*
      text-shadow: 1px 1px 0px #fff, 1px 0px 0px #fff, 1px -1px 0px #fff, 0px 1px 0px #fff, 0px 0px 0px #fff, 0px -1px 0px #fff, -1px 1px 0px #fff, -1px 0px 0px #fff, -1px -1px 0px #fff;
*/

.modal-input, .editable-input {
    -webkit-touch-callout: revert; /* iOS Safari */
    -webkit-user-select: revert; /* Safari */
    -khtml-user-select: revert; /* Konqueror HTML */
    -moz-user-select: revert; /* Old versions of Firefox */
    -ms-user-select: revert; /* Internet Explorer/Edge */
    user-select: revert; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.subpage-title {
    background-color: var(--brand);
    color: #fff;
}

.subpage-title > a {
    font-size: 48pt;
    padding-top: .5em;
}

.subpage-title > a i {
    font-size: 48pt;
    color: #fff;
}

.subpage-title > a:first-of-type {
    float: left;
    margin-left: .1em;
}

.subpage-title > a:last-of-type {
    float: right;
    margin-right: .1em;
}

.bottone-rosso {
    background-color: var(--brand);
    color: #fff;
    border: 1px solid #fff;
}

.bottone-bianco {
    color: var(--brand);
    border: 1px solid var(--brand);
    outline: 1px solid #fff;
}

.no-widths {
    width: revert !important;
    margin-left: revert !important;
    left: revert !important;
}

.link-disabled {
    opacity: 0;
    cursor: default;
}

[class^="bottone-"], [class^="bottone-"]:hover, [class^="bottone-"]:active, [class^="bottone-"]:visited,
[class*=" bottone-"], [class*=" bottone-"]:hover, [class*=" bottone-"]:active, [class*=" bottone-"]:visited {
    display: block;
    position: relative;
    overflow-x: hidden;

    left: 50%;

    padding: 20px 20px;
    margin-top: 1em;

    font-size: 24pt;
    font-weight: bold;

    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;

    white-space: nowrap;

    border-radius: 25px;

    -webkit-transition: top 250ms ease-out;
    -moz-transition: top 250ms ease-out;
    -o-transition: top 250ms ease-out;
    transition: top 250ms ease-out;
}


[class^="bottone-"] i, [class*=" bottone-"] i {
    font-size: 24pt;
}

[class^="bottone-"]:hover, [class*=" bottone-"]:hover {
    top: -4px;
}

.bump-left > div {
    background-color: #fff;
    border-radius: 100% 0 0 100% / 50% 100% 0 50%;
}

.bump-right > div {
    border-radius: 0 100% 100% 0 / 100% 50% 50% 0;
}

[class^="bump-"], [class*=" bump-"] {
    background: var(--brand);
    float: left;
    width: 10% !important;
    min-height: 100%;
    display: flex;
}

[class^="bump-"] > div, [class*=" bump-"] > div {
    background-color: #fff;
    width: 100%;
}

/* ===== MOBILE  ===== */
@media screen and (max-width: 450px) {
    .red-band {
        display: none;
    }

    [class^="bottone-"], [class*=" bottone-"] {
        width: 75%;
        margin-left: calc(-40% - 10px);
    }
}

/* ===== DESKTOP ===== */
@media screen and (min-width: 451px) {
    .red-band {
        display: block;
        width: 100%;
        height: 3em;
        background-color: var(--brand);
    }

    [class^="bottone-"], [class*=" bottone-"] {
        width: 50%;
        margin-left: calc(-25% - 10px);
        margin-bottom: 1em;
    }
}

.admin_alert div {
    margin-top: 1em;
    text-align: center;
    color: var(--brand);
}

.admin_alert div a {
    color: var(--brand);
}

/* ---------------------------------------------------------------------------------------------
   04_errors.css
   --------------------------------------------------------------------------------------------- */

.error-404 {
    display: flex;
    height: 100vh;
    color: var(--brand);
}

.error-404 > div {
    position: relative;
    width: 100%;
}

.error-404 > div > div {
    text-align: center;
}

.error-404 > div > div > a > i {
    color: var(--brand);
    font-size: 24pt;
}

.error-404 > div > div:first-of-type {
    height: 40%;
    background: url("/img/error_404.png") no-repeat center center;
    background-size: contain;
}

.error-404 > div > div:nth-of-type(2) {
    font-weight: bold;
}

/* ---------------------------------------------------------------------------------------------
   40_lists.css
   --------------------------------------------------------------------------------------------- */

.ui-autocomplete, .ui-front {
    z-index: 100000 !important;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 0.1875em;
}

.work_in_progress {
    /*display: flex;*/
    width: 100%;
    height: 50vh;
    color: var(--brand);
    text-align: center;
}

.work_in_progress > div {
    position: relative;
    top: 25%;
    width: 100%;
    height: fit-content;
}

.work_in_progress > div:first-of-type {
    padding-bottom: 1em;
}

.work_in_progress > div:first-of-type > i {
    font-size: 72pt;
}

.lists {
    font-size: 22pt;
}

.category_tab {
    color: var(--brand);
}

.category_tab > div:first-of-type {
    font-size: 24pt;
    font-weight: bold;
    width: fit-content;
    float: left;
    margin-top: .8em;
    margin-left: 5%;
    margin-bottom: .5em;
}

.category_tab > a {
    font-size: 24pt;
    margin-top: .8em;
}

.food_div > a, .wine_div > div > a {
    font-size: 18pt;
}

.category_tab > a, .food_div > a, .wine_div > div > a {
    float: right;
}

.category_tab > a i, .food_div > a i, .wine_div > div > a i {
    color: var(--brand);
}

.category_tab > a:first-of-type, .food_div > a:first-of-type, .wine_div > div > a:first-of-type {
    margin-right: 5%;
}

.category_close {
    font-size: 24pt;
    margin-bottom: .8em;
}

/* Sotto ogni pagina menu (food.php): tre righe allineate a sinistra (stesso margine 5% degli altri
   elementi della pagina, es. il titolo categoria) -- pane e "il coperto non si paga" con la propria
   icona a sinistra del testo, la frase finale senza icona -- tutte allo stesso corpo, più grande
   del vecchio 12pt di questo blocco (era un unico paragrafo di solo testo). float/width/margin qui
   sotto sono !important non per gusto ma per necessità: la prima riga è il primo <div> figlio di
   .category_closure (che porta anche la classe .category_tab, condivisa col titolo di categoria),
   quindi viene raggiunta anche da ".category_tab > div:first-of-type" (float: left; width:
   fit-content; margin-left: 5%; pensata per il vecchio titolo affiancato al link di modifica,
   specificità (0,2,1) che vince su questa sola regola se non forzata) -- applicato qui a ogni riga,
   non solo alla prima, così il layout non dipende da quale riga capita di essere la prima nel
   markup. width: auto, non 100%: il margine (5% per lato, sotto) va già a sottrarsi da sé alla
   larghezza disponibile quando è "auto" (comportamento normale di un box a blocco) -- imposto
   invece "100%" larghezza e margine si sommerebbero, sporgendo di quel 5%+5% oltre il bordo destro
   della pagina: sintomo, uno scroll orizzontale (più evidente su mobile, dove il margine del
   5% pesa proporzionalmente di più). */
.category_closure_row {
    display: flex;
    align-items: center;
    gap: .6em;
    float: none !important;
    width: auto !important;
    color: #000;
    font-size: 18pt;
    font-weight: normal !important;
    margin: .5em 5% !important;
}

/* "* { font-size: 16pt }" (01_html.css) si applica direttamente a ogni elemento, non solo per
   ereditarietà (stesso motivo già documentato per .context-menu-item più sopra in questo file):
   senza ripeterlo anche per lo <span> del testo dentro ogni riga, tornerebbe al 16pt di default
   invece del 18pt impostato su .category_closure_row, indipendentemente da quest'ultimo. */
.category_closure_row * {
    font-size: 18pt;
}

.category_closure_icon {
    width: 2.2em;
    height: 2.2em;
    flex-shrink: 0;
}

.category_warning > div > a {
    display: flex;
    align-items: center;
    gap: .6em;
    color: var(--brand);
    font-size: 18pt;
}

/* Stesso motivo di ".category_closure_row *" più sopra in questo file: senza, l'icona (dimensionata
   in em, .category_closure_icon) userebbe il 16pt di "* { font-size: 16pt }" invece del 18pt
   impostato qui sopra, risultando più piccola di quelle nel blocco pane/coperto. */
.category_warning > div > a * {
    font-size: 18pt;
}

.food_div, .wine_div {
    color: var(--brand);
}

/* Distacco prima di un blocco enologo/vuoto ripetuto (wine.php): era uno style="margin-top: 0.9em"
   inline lì, tolto per poter fare a meno di 'unsafe-inline' in style-src sul sito pubblico (vedi il
   commento sul relativo header in .private/index.php). */
.wine_div_spaced {
    margin-top: 0.9em;
}

/* Solo .food_div, non .wine_div (struttura interna diversa, un livello di nidificazione in più --
   vedi i selettori ".wine_div > div > div:..." più sotto, mai toccati qui): grid invece di float,
   a tre colonne di larghezza FISSA (non "auto"/a misura di contenuto) -- descrizione, icone
   allergeni (.food-allergen-icons, .private/pages/food.php, sempre presente in markup anche
   vuota: serve a mantenere l'ordine delle colonne quando un piatto non ne ha), prezzo. Larghezza
   fissa (non intrinseca) è essenziale qui: ogni riga (".food_div") è un proprio contenitore grid a
   sé, non un'unica tabella condivisa -- con colonne "auto" ciascuna si dimensionerebbe sul proprio
   contenuto (quante icone ha QUEL piatto, quante cifre ha QUEL prezzo) invece che sulle altre
   righe, ed è esattamente il problema riportato: prezzo/icone a un'altezza diversa da riga a riga
   invece di restare allineati in colonna. float su first-of-type/last-of-type qui sotto diventa
   semplicemente inerte sui figli di un contenitore grid (nessun effetto, non un conflitto).
   margin: 0 5% qui (non più sui singoli figli, vedi margin-left/right azzerati più sotto) per lo
   stesso inset laterale di sempre applicato una sola volta al contenitore. */
.food_div {
    display: grid;
    grid-template-columns: 1fr 6em 4.5em;
    column-gap: .3em;
    align-items: center;
    margin: 0 5%;
}

.food_div > div, .wine_div > div {
    font-size: 18pt;
}

.food_div > div:first-of-type, .wine_div > div > div:first-of-type {
    float: left;
    margin-left: 5%;
    color: #000;
}

/* min-width: 0 (un elemento grid ha "min-width: auto" di default, cioè non può restringersi sotto
   la dimensione minima del proprio contenuto): la prima colonna (1fr) deve poter andare a capo al
   proprio interno anche quando il contenuto (descrizione del piatto + il numero/l'icona del
   surgelato in apice, quando "Numeri in apice" è attivo) risultasse più largo del previsto --
   senza, quel contenuto spingerebbe la colonna oltre gli "1fr" assegnati invece di restringersi,
   allargando l'intera riga (e con lei .food_div/.lists) oltre il bordo dello schermo -- sintomo
   tipico: la colonna prezzo spinta fuori a destra, comparsa di uno scroll orizzontale. */
.food_div > div:first-of-type {
    margin-left: 0;
    min-width: 0;
}

.wine_div > div > div:first-of-type {
    /*font-weight: bold;*/
}

.wine_div > div > div:first-of-type > span {
    font-weight: normal;
}

.wine_div > div:last-of-type {
    margin-left: 5%;
    margin-right: 5%;
    font-size: 12pt;
    font-weight: 600;
    color: #000;
}

.wine_div > div:last-of-type span {
    font-size: 12pt;
    font-weight: normal;
}

.wine_div > div:last-of-type span:before, .wine_div > div:last-of-type span:after {
    content: revert;
}

.wine_div > div:last-of-type span.ndash::before {
    content: '- ';
}

/* .food-price, non ":last-of-type" (a differenza di .wine_div, che non ha un'opzione "Mostra i
   prezzi" e quindi il proprio ultimo figlio è sempre e solo il prezzo): con quell'opzione spenta
   food.php non scrive proprio questo <div> (vedi il commento lì), e ":last-of-type" finirebbe per
   colpire invece .food-allergen-icons, l'ultimo figlio rimasto in quel caso -- ne prenderebbe lo
   stile, simbolo "€" compreso, al posto suo. */
.food_div > .food-price, .wine_div > div > div:last-of-type {
    float: right;
    margin-right: 5%;
    color: #000;
}

/* Colonna a larghezza fissa (4.5em, vedi il commento su ".food_div" più sopra): il testo si
   allinea a destra al suo interno, così un prezzo a due cifre e uno a quattro finiscono comunque
   allo stesso margine destro invece che a un'altezza diversa in base a quante cifre ha ciascuno. */
.food_div > .food-price {
    margin-right: 0;
    text-align: right;
}

.food_div > .food-price::before, .wine_div > div > div:last-of-type::before {
    content: '\20AC';
}

.food_div > .food-price.no-content::before, .wine_div > div > div:last-of-type.no-content::before {
    content: '-';
}

.wine_div > div span:before {
    content: ' (';
}

.wine_div > div span:after {
    content: ')';
}

.descr_ac.bottom-border {
    border-bottom: 1px solid #d9d9d9;
}

/* .active va sulla riga stessa (<li class="descr_ac ...">), non su un suo discendente: la resa
   "ricca" dell'autocomplete (js/admin-authed.js, attachAutocomplete con options.renderItem) scrive
   direttamente le classi sull'elemento <li>, non annidandolo in un <div> come faceva il vecchio
   widget jQuery UI (mai stato realmente incluso in questo sito, vedi il commento in admin-authed.js). */
.descr_ac.active {
    background-color: var(--brand) !important;
}

/* Elenco dei suggerimenti dell'autocomplete (attachAutocomplete): il riquadro (sfondo, bordo,
   angoli arrotondati, z-index) resta quello già pensato per il vecchio widget jQuery UI
   (".ui-autocomplete, .ui-front" più sopra in questo file); qui solo la meccanica di
   posizionamento/scorrimento, che quel widget avrebbe altrimenti portato con sé dal proprio CSS
   (mai incluso in questo sito). */
.admin-autocomplete-list {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.admin-autocomplete-list li {
    cursor: pointer;
}

/* Voce "semplice" (cantina/varietà/volume in wine.php): solo testo, a differenza della resa
   "ricca" (.descr_ac) usata per piatto/vino/piatto da preventivo. */
.admin-autocomplete-item {
    padding: 6px 10px;
    font-size: 12pt;
}

.admin-autocomplete-item.active {
    background-color: var(--brand);
    color: #fff;
}

/* Padding sulla riga intera (non sui singoli <div> a float dentro): il testo toccava i bordi
   dell'elenco, poco leggibile -- box-sizing: border-box perché il min-height applicato via JS
   (attachAutocomplete, per uniformare l'altezza di ogni voce, vedi il commento lì) resti la vera
   altezza fuori-tutto della riga invece di sommarcisi sopra. A destra spazio in più (non solo
   estetico): riservato al cestino di appendHistoryDeleteButton qui sotto, sempre (anche sulle
   voci senza cestino, così le righe restano allineate fra loro invece di avere un rientro diverso
   a seconda che compaia o no). */
.descr_ac {
    position: relative;
    box-sizing: border-box;
    padding: 10px 34px 10px 14px;
}

.descr_ac > div:first-of-type > div:first-of-type {
    font-weight: bold;
}

.descr_ac > div > div:first-of-type {
    float: left;
}

/* Seconda/terza riga del lato sinistro (cantina+varietà unite, cantina -- vedi le chiamate a
   renderItem in js/admin-authed.js): stessa dimensione di sempre, ma un peso in più (era il solo
   Inter Regular, 400) perché a video un testo sottile a 12pt risultava troppo simile a un grigio
   chiaro invece che leggibile come il resto -- specie con la voce sopra già in grassetto a fare
   da confronto. */
.descr_ac > div:nth-last-of-type(2) > div:first-of-type, .descr_ac > div:nth-last-of-type(4) > div:first-of-type {
    font-size: 12pt;
    font-weight: 500;
}

/* Riga in più (icone allergeni/surgelato) di una voce piatto nell'autocomplete (allergenSummaryHtml(),
   js/admin-authed.js): clear, non float, quindi va schiarita esplicitamente dal float:left del
   blocco descrizione/categoria qui sopra -- altrimenti affiancherebbe quel testo invece di andare
   a capo sotto di esso, essendo un div normale (fuori dal flusso dei float, come qualunque
   elemento non fluttuante che li segue). */
.descr_ac_allergens {
    clear: left;
    margin-top: 4px;
}

.descr_ac > div > div:last-of-type {
    float: right;
    font-size: 12pt;
    color: #d9d9d9;
}

/* Cestino su una voce "storica" (item.deleted) del suggerimento (appendHistoryDeleteButton,
   js/admin-authed.js): in overlay nello spazio riservato a destra (vedi il padding di .descr_ac
   qui sopra), centrato in verticale sull'intera altezza della riga invece che ancorato in alto --
   quest'ultimo lo faceva finire sopra al testo della prima riga (volume/categoria) su una voce con
   più righe di un'altra, specie dopo l'uniformazione dell'altezza min-height qui sotto.
   */
.descr_ac-delete {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #999;
    cursor: pointer;
    font-size: 11pt;
}

.descr_ac-delete:hover {
    background: rgba(255, 25, 46, .12);
    color: var(--brand);
}

/* .descr_ac.active (selezionata via tastiera): sfondo rosso pieno, vedi qui sopra -- il cestino
   normale (grigio) sparirebbe contro quello sfondo, va schiarito.*/
.descr_ac.active .descr_ac-delete {
    color: #fff;
}

/* Stato "armato" dopo il primo click (appendHistoryDeleteButton, js/admin-authed.js): rosso pieno
   invece del solo hover leggero, a segnalare chiaramente che un secondo click elimina per sempre
   -- stessa icona, cambia solo il colore, niente conferma in una modale a sé (vedi il commento lì
   sul perché). Il "color: #fff" qui coincide con quello di ".descr_ac.active .descr_ac-delete" qui
   sopra (voce selezionata via tastiera), quindi resta leggibile in entrambi i casi indipendentemente
   da quale delle due regole vinca sul colore -- solo "background" è nuovo, e non ha concorrenza. */
.descr_ac-delete.descr_ac-delete-armed {
    background: var(--brand);
    color: #fff;
}

.descr_ac.active .descr_ac-delete:hover {
    background: rgba(255, 255, 255, .25);
}

/* ---------------------------------------------------------------------------------------------
   65_modal.css (solo la base: le sole estensioni ad uso amministrazione -- ".modal-content
   .admin-row-btn"/".quote-send-details-table" -- vivono invece in admin.css, appese in coda a
   60_amministrazione.css: hanno bisogno di caricare dopo quel file, vedi il commento lì)
   --------------------------------------------------------------------------------------------- */

/* ==========================================================================
   Modale personalizzata (sostituisce SweetAlert2, non più usata nel sito)
   ========================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    box-sizing: border-box;
    animation: modal-fade-in 0.15s ease-out;
}

.modal-overlay.modal-closing {
    animation: modal-fade-out 0.15s ease-in forwards;
}

.modal-box {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    width: 420px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    animation: modal-pop-in 0.15s ease-out;
}

.modal-overlay.modal-closing .modal-box {
    animation: modal-pop-out 0.15s ease-in forwards;
}

.modal-body {
    padding: 28px 28px 24px;
    text-align: center;
}

.modal-icon {
    width: 56px;
    height: 56px;
    margin: 24px auto 0;
    border-radius: 50%;
    border: 3px solid #999;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
}

.modal-icon-success { border-color: #4caf50; color: #4caf50; }
.modal-icon-error   { border-color: var(--brand, #e53935); color: var(--brand, #e53935); }
.modal-icon-warning { border-color: #f0ad4e; color: #f0ad4e; }
.modal-icon-question{ border-color: #999; color: #999; }

.modal-title {
    margin: 16px 0 0;
    font-size: 16pt;
    color: #333;
}

.modal-content {
    margin-top: 10px;
    font-size: 11pt;
    color: #444;
    line-height: 1.5;
}

.modal-content:empty {
    display: none;
}

.modal-content p:first-child {
    margin-top: 0;
}

.modal-content p:last-child {
    margin-bottom: 0;
}

.modal-content label {
    display: block;
    margin-top: 14px;
    text-align: left;
}

.modal-content label:first-child {
    margin-top: 0;
}

/* .switch/.switch-label (css/manage.css) è una coppia di <label> pensata per stare affiancata
   sulla stessa riga (il toggle vero e proprio, testo nascosto, più l'etichetta visibile che lo
   segue): la regola generica qui sopra le forzerebbe entrambe a display: block, spezzando lo
   switch su due righe. */
.modal-content .switch-label,
.modal-content .switch-label + label {
    display: inline-block;
}

/* Riga di uno switch dentro una modale (es. il timer in Messaggi): allineata a sinistra invece
   che centrata come il resto di .modal-body, con l'etichetta di testo più piccola del corpo del
   messaggio (è un'opzione secondaria, non ha bisogno dello stesso peso visivo). */
.modal-switch-row {
    text-align: left;
}

.modal-switch-row .switch-label + label {
    font-size: 10pt;
}

.modal-input,
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="tel"],
.modal-content input[type="date"],
.modal-content input[type="time"],
.modal-content input[type="datetime-local"],
.modal-content select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin: 8px 0;
    font-size: 12pt;
    font-family: inherit;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}

.modal-input:focus,
.modal-content input:focus,
.modal-content select:focus {
    /* outline: none va sempre accompagnato da un indicatore di focus altrettanto visibile
       (qui il box-shadow, non solo il cambio di colore del bordo, difficile da notare da solo
       per chi ha una vista ridotta) -- altrimenti chi naviga da tastiera perde ogni riscontro
       visivo di dove si trovi il focus dentro alla modale. */
    outline: none;
    border-color: var(--brand, #FF192E);
    box-shadow: 0 0 0 3px rgba(255, 25, 46, 0.35);
}

/* Es. "Messaggio" nel popup "Invia preventivo via email" (.private/pages/admin-area/quotes.php, #swal-body): resize
   nativo del browser lasciato per l'altezza (utile con testi lunghi), tolto per la larghezza (di
   default "both" -- allargarla sfonderebbe il layout della modale, sempre a larghezza fissa al
   100% del proprio contenitore). min-height/line-height in em, non px, per restare validi anche
   trascinando la maniglia di ridimensionamento verso l'alto: senza non ci sarebbe alcun limite a
   quanto la si potrebbe rimpicciolire. */
.modal-content textarea {
    resize: vertical;
    line-height: 1.4;
    min-height: calc(3 * 1.4em + 22px); /* 3 righe + lo stesso padding/bordo di .modal-input sopra */
}

/* Coppia di campi data + ora separati (es. "Mostra da"/"Fino a" in Messaggi), affiancati invece
   che impilati: .modal-input impone width: 100% (vedi sopra), va perciò sovrascritta qui sotto con
   un selettore più specifico di quello generico .modal-content input[type="date"/"time"]. */
.modal-date-time-row {
    display: flex;
    gap: 8px;
}

.modal-content .modal-date-time-row input[type="date"],
.modal-content .modal-date-time-row input[type="time"] {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
}

/* Campo prezzo (menu.php: nuovo/modifica piatto) col simbolo dell'euro accostato invece che sulla
   riga sotto: stessa tecnica di .modal-date-time-row qui sopra, un selettore più specifico di
   .modal-content input[type="number"] per sovrascriverne il width: 100%. */
.modal-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-content .modal-price-row input[type="number"] {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
}

.modal-price-suffix {
    flex: 0 0 auto;
    font-weight: bold;
    color: #444;
}

.modal-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 11pt;
    color: #444;
    cursor: pointer;
}

.modal-checkbox-row input {
    width: 16px;
    height: 16px;
    /* .modal-content label (più specifica: un selettore in più) sovrascrive il display:flex e il
       gap di .modal-checkbox-row con display:block, quindi il gap fra checkbox ed etichetta non
       ha alcun effetto: lo spazio va garantito qui con un margine esplicito sulla checkbox. */
    margin: 0 8px 0 0;
    accent-color: var(--brand, #FF192E);
}

/* Lista di pasti selezionabili (aperture straordinarie): stessa classe di base, ma su un <div>
   (non un <label>), quindi qui il display:flex NON viene sovrascritto da ".modal-content label"
   -- checkbox ed etichetta restano sulla stessa riga senza bisogno del margine di riserva sopra.
   Allineati a sinistra (non centrati, non è una singola riga isolata ma un elenco) e con meno
   margine verticale fra una riga e l'altra. */
.modal-meal-row {
    justify-content: flex-start;
    margin-top: 4px;
}

/* Griglia di allergeni/surgelato (modifica piatto/voce di preventivo, js/admin-authed.js:
   allergenCheckboxesHtml()): 15 checkbox (14 allergeni di legge + surgelato) in due colonne
   invece di una fila sola per riga come sopra -- troppe per restare leggibili una sotto l'altra
   dentro una finestra di dimensioni contenute. */
.modal-allergen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    margin-top: 6px;
}

@media screen and (max-width: 480px) {
    .modal-allergen-grid {
        grid-template-columns: 1fr;
    }
}

/* ".modal-content .modal-allergen-row" (due classi), non ".modal-allergen-row" da solo: serve
   specificità pari o maggiore di ".modal-content label" (una classe + un elemento) per riportare
   la riga a display:flex -- da sola perderebbe il confronto e resterebbe display:block. flex, non
   il block di sempre, per poter restringere lo <span> del nome (sotto) fino a fargli mostrare
   un'ellissi invece di andare a capo o allargare la colonna. */
.modal-content .modal-allergen-row {
    display: flex;
    align-items: center;
    /* flex-start, non il justify-content: center di base (.modal-checkbox-row): centrerebbe il
       gruppo checkbox+icona+nome anziché lasciare il nome libero di restringersi/tagliarsi
       sul lato destro della colonna. gap: 0: la spaziatura fra i tre elementi resta affidata ai
       margini già presenti su checkbox (.modal-checkbox-row input) e icona (.modal-allergen-icon)
       qui sotto, altrimenti il gap di base (8px) si sommerebbe a quei margini invece di
       sostituirli, ora che la riga è tornata flex. */
    justify-content: flex-start;
    gap: 0;
    margin-top: 4px;
}

/* Non uno degli allergeni di legge: sulle due colonne intere della griglia qui sopra, non una
   singola come le altre 14, sia per lo spazio (il nome è più lungo) sia per distinguerlo
   visivamente dall'elenco numerato. */
.modal-allergen-row-frozen {
    grid-column: 1 / -1;
}

.modal-allergen-icon {
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0;
    flex-shrink: 0;
}

/* flex-shrink: 0 sulla checkbox stessa: da sola (dimensione fissa in px) non si comprimerebbe
   comunque, ma lo rende esplicito invece di affidarsi al comportamento di default dell'algoritmo
   flex. Il nome dell'allergene invece SI restringe apposta (min-width: 0 sblocca l'ellissi sotto,
   altrimenti un elemento flex non si restringe mai sotto la dimensione del proprio contenuto) --
   title sullo <span> stesso (js/admin-authed.js) resta il modo di leggerlo per intero al passaggio
   del mouse quando viene tagliato. */
.modal-allergen-row input {
    flex-shrink: 0;
}

.modal-allergen-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Breve etichetta sopra la griglia di allergeni (o altre sezioni future dentro una modale),
   distinta dal testo normale del corpo -- stesso grigio già usato per le didascalie in
   .private/pages/admin-area/quotes.php ("Includi dopo il preventivo:"). */
.modal-section-label {
    margin-top: 14px;
    margin-bottom: 0;
    font-size: 10pt;
    color: #666;
}

.modal-validation {
    margin-top: 12px;
    padding: 8px 12px;
    background-color: #f6c9c9;
    color: #7a1414;
    border-radius: 4px;
    font-size: 10pt;
    text-align: left;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.modal-btn {
    padding: 10px 22px;
    font-size: 11pt;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}

.modal-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.modal-btn-confirm {
    background-color: var(--brand, #FF192E);
    color: #fff;
}

.modal-btn-cancel {
    background-color: #f1f1f1;
    color: #555;
}

.modal-btn-deny {
    background-color: #6c757d;
    color: #fff;
}

.modal-footer {
    border-top: 1px solid #eee;
    padding: 12px 28px;
    font-size: 9.5pt;
    color: #888;
    text-align: center;
}

.modal-close-x {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 4px;
}

.modal-close-x:hover {
    color: #666;
}

.modal-timer-bar {
    height: 4px;
    background-color: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.modal-timer-bar-inner {
    height: 100%;
    width: 100%;
    background-color: var(--brand, #FF192E);
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modal-pop-in {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes modal-pop-out {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.92); opacity: 0; }
}

/* ------------------------------------------------------------------ TOAST */

.modal-toast-layer {
    position: fixed;
    z-index: 10000;
    inset: 0;
    pointer-events: none;
}

.modal-toast {
    position: absolute;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    padding: 14px 36px 14px 16px;
    max-width: 360px;
    box-sizing: border-box;
    animation: modal-toast-in 0.2s ease-out;
}

.modal-toast-layer.modal-closing .modal-toast {
    animation: modal-fade-out 0.15s ease-in forwards;
}

.modal-toast .modal-icon {
    width: 32px;
    height: 32px;
    margin: 0;
    font-size: 15px;
    flex: 0 0 auto;
}

.modal-toast .modal-body {
    padding: 0;
    text-align: left;
}

.modal-toast .modal-title {
    font-size: 11pt;
    margin: 0;
}

.modal-toast .modal-content {
    font-size: 10pt;
    margin-top: 4px;
}

.modal-toast .modal-close-x {
    top: 6px;
    right: 6px;
}

.modal-toast .modal-timer-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 0 6px 6px;
}

.modal-toast-top-end {
    top: 16px;
    right: 16px;
}

.modal-toast-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes modal-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 480px) {
    .modal-toast {
        max-width: calc(100vw - 32px);
    }

    .modal-toast-top-end {
        left: 16px;
        right: 16px;
        transform: none;
        max-width: none;
    }
}

/* ---------------------------------------------------------------------------------------------
   manage.css
   --------------------------------------------------------------------------------------------- */

.action_buttons button {

    border-radius:6px;
    display:inline-block;
    cursor:pointer;
    font-family: 'Inter', sans-serif;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;

    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    background-color:#ededed;
    border:1px solid #dcdcdc;
    color:#777777;
    text-shadow:0px 1px 0px #ffffff;
}

.action_buttons button i {
    font-size: 32pt;
}
.action_buttons button.small-icon i {
    font-size: revert;
}

.action_buttons button:hover {
    background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
    background-color:#dfdfdf;
}

.action_buttons button:active {
    position:relative;
    top:1px;
}

.action_buttons button.green {
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
    background-color:#77d42a;
    border:1px solid #268a16;
    color:#306108;
    text-shadow:0px 1px 0px #aade7c;
}

.action_buttons button.green:hover {
    background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
    background-color:#5cb811;
}

.action_buttons button.red {
    box-shadow:inset 0px 1px 0px 0px #f29c93;
    background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
    background-color:#fe1a00;
    border:1px solid #d83526;
    color:#ffffff;
    text-shadow:0px 1px 0px #b23e35;
}

.action_buttons button.red:hover {
    background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
    background-color:#ce0100;
}

.action_buttons button.disabledbtn {
    cursor: revert;
    color: #fff;
    text-shadow:0px -1px 0px #aaa;
}

.action_buttons button.disabledbtn:hover {
    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    background-color:#ededed;
}

.action_buttons button.disabledbtn:active {
    position:revert;
    top:revert;
}

.switch {
    height: 0;
    width: 0;
    visibility: hidden;
}

.switch-label {
    cursor: pointer;
    text-indent: -9999px;
    /* text-align: left esplicito, non affidato al default: un antenato con text-align: right
       (es. .admin-reservation-reminder, manage.php, per allineare l'interruttore a destra della
       cella) altrimenti lo eredita, e un text-indent negativo su testo allineato a destra non
       spinge il testo "Toggle" fuori dal bordo SINISTRO come qui serve -- lo spinge invece verso
       il bordo destro, dove torna visibile (parzialmente, tagliato da overflow:hidden qui sotto)
       invece di restare nascosto fuori schermo. */
    text-align: left;
    width: 60px;
    height: 30px;
    background: grey;
    /* inline-block, non block: un'etichetta di testo visibile (una seconda <label for> per lo
       stesso checkbox, non solo questo testo nascosto) può seguirla sulla stessa riga -- vedi
       manage.php e wine.php. Dove serve comunque andare a capo dopo (manage.php), c'è già un
       <br> esplicito, quindi non c'è nulla che dipenda dal vecchio "block". */
    display: inline-block;
    border-radius: 100px;
    position: relative;
    vertical-align: middle;
    /* Il "pin" interno (.switch-label:after) si allarga apposta fino a 130px quando lo switch è
       premuto (:active, vedi sotto), un piccolo effetto "elastico" da tenere premuto: senza
       overflow:hidden qui però quell'allargamento sconfina fuori dai bordi arrotondati dello
       switch invece di restarne contenuto, sovrapponendosi a quel che segue sulla stessa riga
       (es. l'etichetta di testo accanto). */
    overflow: hidden;
}

/* La stessa etichetta di testo di cui sopra, per non doverne ripetere lo spaziamento ovunque il
   componente "switch" viene riusato. */
.switch-label + label {
    margin-left: 10px;
    vertical-align: middle;
}

/* Etichetta di uno switch online/offline (es. #wine-visibility-switch) quando lo stato è
   "offline": il testo stesso diventa l'avviso (rosso, in grassetto), al posto di un banner
   separato sotto la toolbar. */
.admin-visibility-label-offline {
    color: var(--brand);
    font-weight: bold;
}

.switch-label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 10px;
    transition: 0.3s;
}

.switch:checked + .switch-label {
    background: #bada55;
}

.switch:checked + .switch-label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.switch-label:active:after {
    width: 130px;
}

/* ---------------------------------------------------------------------------------------------
   00_day_names.css
   --------------------------------------------------------------------------------------------- */

/* Intestazioni dei giorni della settimana (calendario di prenotazione pubblico, calendario
   prenotazioni/tabella "Prenota ora" del dettaglio menu/tabella "Giorni e pasti di apertura" di
   Impostazioni, in amministrazione): ognuno di questi quattro punti stampa tutt'e tre le varianti
   -- .day-full ("Lunedì"), .day-short ("Lun"), .day-initial ("L") -- e qui si decide quale
   mostrare di default (la per esteso, la più leggibile). Ogni punto ha poi una propria regola
   @container (css/site.css per il calendario pubblico, css/admin.css per gli altri tre) che passa
   alla breve o all'iniziale quando lo spazio DAVVERO disponibile a quel punto specifico scende
   sotto una soglia propria -- non un'unica soglia qui, ognuno dei quattro ha colonne/contesto
   diversi (7 celle di un calendario mensile non è la stessa cosa di 7 colonne di una tabella con
   già una colonna "Pasto" a sinistra). Tre <span> veri invece di un solo elemento con
   content: attr() sull'alternativa attiva: il testo resta sempre presente per davvero nel DOM (e
   quindi per uno screen reader) esattamente come appare visivamente, senza dover contare sul
   supporto -- non universale -- dei contenuti generati via CSS. */
.day-full {
    display: inline;
}

.day-short,
.day-initial {
    display: none;
}