/*
 * Foglio di stile "Material" del POS — recuperato dal sistema legacy
 * (legacy/pos.assodoro.com/public_html/index.html), mai portato nella
 * riscrittura TypeScript. La riscrittura aveva ricostruito i componenti da
 * zero come placeholder minimi (colore piatto + bordo + border-radius, MAI
 * sostituiti) perdendo elevazione, stati hover/focus, transizioni e la
 * scala tipografica reale.
 *
 * Le variabili --md-* e --btn-* sono generate dinamicamente da
 * `ThemeProvider` (vedi packages/design-system/src/theme/ThemeProvider.tsx)
 * a partire da GET /settings/theme: questo file le consuma cosi' come sono,
 * senza duplicare la logica del tema dinamico.
 *
 * Copiato quasi verbatim dal legacy: stesse classi, stessi selettori. Le
 * uniche modifiche sono la rimozione del blocco :root (le variabili non
 * sono piu' statiche, arrivano dal tema) e il font su <body> (vedi sotto).
 */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    /* Reset dei <button> nativi: senza questo, un testo senza colore proprio
       dentro un bottone (es. .card-name in .product-card) eredita il nero di
       default del browser invece del colore del tema -- bug reale trovato
       verificando dal vivo (rgb(0,0,0) contro sfondo scuro). Le classi
       specifiche vincono comunque per specificita', quindi qui non si
       rompe nulla di gia' stilizzato. */
    button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; text-align: center; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; }

    /* I <button> tornano a centrare il proprio contenuto, che e' il
       comportamento nativo: il reset qui sopra lo aveva sostituito con
       `inherit`, quindi ogni bottone piu' largo della propria etichetta la
       mostrava incollata a sinistra (misurato: "Procedi al Pagamento" sfalsato
       di 41px in un bottone da 307px). Le poche eccezioni sono i bottoni usati
       come SCHEDA, dove il testo e' un blocco su piu' righe e va a bandiera. */
    .product-card { text-align: left; }

    /* var(--x, fallback): `ThemeProvider` mette queste variabili su un div
       DENTRO <body> (avvolge tutto l'albero React), non su <body> stesso o
       su :root — una custom property CSS è visibile solo ai discendenti di
       dove e' dichiarata, mai ai suoi antenati. Senza il fallback qui,
       `body` non la vede mai: `font-family` falliva silenziosamente e
       ripiegava sul default del browser (un serif). Verificato dal vivo:
       il titolo appariva in Times New Roman nonostante la stessa variabile
       risultasse correttamente risolta appena un livello piu' sotto. I
       fallback sono i valori statici gia' usati dal legacy prima del tema
       dinamico, non un colore a caso. */
    body { font-family: var(--assodoro-font, 'Montserrat', system-ui, sans-serif); background: var(--md-bg, #100c0b); color: var(--md-on-surface, #f0e8e5); min-height: 100vh; }
    #root { min-height: 100vh; }

    /* Auth */
    .auth-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--md-bg); padding:1.5rem; }
    .auth-wrap { display:flex; flex-direction:column; align-items:center; gap:1.5rem; width:100%; max-width:380px; }
    .auth-brand { display:flex; flex-direction:column; align-items:center; gap:.6rem; }
    .auth-brand-logo { max-height:64px; max-width:220px; object-fit:contain; }
    .auth-brand-icon { width:56px; height:56px; background:var(--md-primary); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:800; color:var(--md-on-primary); }
    .auth-brand-name { font-size:1.3rem; font-weight:700; color:var(--md-on-surface); }
    .auth-card { background:var(--md-surface); border-radius:20px; padding:2rem; width:100%; display:flex; flex-direction:column; gap:.9rem; box-shadow:0 8px 40px rgba(0,0,0,.4); }
    .auth-card-title { font-size:.9rem; color:var(--md-outline); margin-bottom:.1rem; }
    .auth-field input { width:100%; background:var(--md-surface-variant); border:1.5px solid var(--md-surface-variant); border-radius:10px; padding:.75rem 1rem; color:var(--md-on-surface); font-size:.95rem; outline:none; font-family:inherit; transition:border-color .15s; box-sizing:border-box; }
    .auth-field input:focus { border-color:var(--md-primary); }
    .auth-pw-eye { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:.95rem; opacity:.5; padding:.2rem; line-height:1; }
    .auth-pw-eye:hover { opacity:1; }
    .auth-footer { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 .25rem; }
    .auth-api-status { display:flex; align-items:center; gap:.4rem; font-size:.7rem; color:var(--md-outline); opacity:.7; }
    .auth-api-dot { width:7px; height:7px; border-radius:50%; background:var(--md-outline); flex-shrink:0; }
    .auth-api-dot.ok { background:#4CAF50; box-shadow:0 0 5px rgba(76,175,80,.6); }
    .auth-api-dot.err { background:#F44336; box-shadow:0 0 5px rgba(244,67,54,.5); }
    .auth-api-dot.checking { background:var(--md-outline); animation:pulse .9s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }
    .auth-version { font-size:.7rem; color:var(--md-outline); opacity:.4; }
    /* Fix autofill Chrome/Safari — sovrascrive il giallo */
    .auth-field input:-webkit-autofill,
    .auth-field input:-webkit-autofill:hover,
    .auth-field input:-webkit-autofill:focus,
    .auth-field input:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 60px var(--md-surface-variant) inset !important;
      -webkit-text-fill-color: var(--md-on-surface) !important;
      caret-color: var(--md-on-surface);
      border-color: var(--md-primary) !important;
    }
    /* Fix autofill Firefox */
    .auth-field input:autofill { background: var(--md-surface-variant) !important; color: var(--md-on-surface) !important; }

    /* Fields */
    .field { display: flex; flex-direction: column; gap: .4rem; }
    .field label { font-size: .85rem; color: var(--md-outline); }
    .field input, .field select, .field textarea {
      background: var(--md-surface-variant); border: 1px solid var(--md-outline);
      border-radius: 8px; padding: .75rem 1rem; color: var(--md-on-surface); font-size: 1rem; font-family: inherit;
    }
    .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--md-primary); }
    /* Fix autofill Chrome/Safari per tutti gli input */
    input:-webkit-autofill, input:-webkit-autofill:hover,
    input:-webkit-autofill:focus, input:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 80px var(--md-surface-variant) inset !important;
      -webkit-text-fill-color: var(--md-on-surface) !important;
      transition: background-color 9999s ease-in-out 0s;
    }
    .field textarea { resize: vertical; min-height: 70px; }

    /* Buttons */
    .btn { border: var(--btn-border-width,0px) solid var(--btn-border-color,transparent); border-radius: var(--btn-radius,50px); padding: .7rem 1.6rem; font-weight: 700; font-size: .95rem; cursor: pointer; transition: opacity .15s; }
    .btn:disabled { opacity: .4; cursor: default; }
    .btn-primary   { background: var(--md-primary); color: var(--md-on-primary); }
    .btn-secondary { background: var(--md-surface-variant); color: var(--md-on-surface); border: 1px solid var(--md-outline); }
    .btn-danger    { background: rgba(255,107,107,.15); color: var(--md-error); border: 1px solid var(--md-error); border-radius: 8px; }
    .btn-sm        { padding: .4rem 1rem; font-size: .85rem; }
    .btn-icon      { background: none; border: none; cursor: pointer; padding: .4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--md-on-surface); font-size: 1.1rem; }
    .btn-icon:hover { background: var(--md-surface-variant); }
    .btn-text { background: none; border: none; color: var(--md-primary); cursor: pointer; font-size: .9rem; }

    /* ── App shell ── */
    .app-shell { display: flex; height: 100vh; overflow: hidden; }
    .app-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
    .screen-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

    /* ── Sidebar verticale ── */
    .sidebar { width: 64px; background: var(--md-surface); border-right: 1px solid var(--md-surface-variant); display: flex; flex-direction: column; align-items: center; padding: .75rem 0; gap: .25rem; flex-shrink: 0; z-index: 200; }
    .sb-avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--md-primary); color: var(--md-on-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; margin-bottom: .5rem; cursor: default; user-select: none; }
    .sb-divider { width: 32px; height: 1px; background: var(--md-surface-variant); margin: .35rem 0; }
    .sb-spacer { flex: 1; }
    .sb-item { position: relative; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: none; color: var(--md-outline); transition: all .18s; flex-shrink: 0; }
    .sb-item:hover { background: var(--md-surface-variant); color: var(--md-on-surface); }
    .sb-item.active { background: rgba(157,32,35,.18); color: var(--md-primary); }
    .sb-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
    .sb-tooltip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #221817; color: var(--md-on-surface); font-size: .78rem; white-space: nowrap; padding: .35rem .65rem; border-radius: 7px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 300; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
    .sb-item:hover .sb-tooltip { opacity: 1; }
    .sb-logout { color: var(--md-outline); margin-top: .1rem; }
    .sb-logout:hover { background: rgba(255,107,107,.1); color: var(--md-error); }

    /* POS layout */
    .pos-layout { display: grid; grid-template-columns: 1fr 340px; height: 100%; overflow: hidden; }
    @media (max-width: 860px) { .pos-layout { grid-template-columns: 1fr; } }
    .products-panel { padding: 1rem; overflow-y: auto; height: 100%; }
    .search-bar { display: flex; align-items: center; gap: .5rem; background: var(--md-surface-variant); border-radius: 50px; padding: .5rem 1rem; margin-bottom: .75rem; }
    .search-bar input { flex: 1; background: none; border: none; color: var(--md-on-surface); font-size: 1rem; outline: none; }
    .categories { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .75rem; scrollbar-width: none; }
    .cat-chip { background: var(--md-surface-variant); border: 1px solid var(--md-outline); border-radius: 50px; padding: .35rem .9rem; font-size: .82rem; white-space: nowrap; cursor: pointer; transition: all .15s; }
    .cat-chip.active { background: var(--md-primary); color: var(--md-on-primary); border-color: var(--md-primary); }
    .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
    .product-card { background: var(--md-surface); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .12s; border: 2px solid transparent; }
    .product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.35); border-color: var(--md-primary); }
    .prod-img { width: 100%; height: 100px; object-fit: cover; background: var(--md-surface-variant); display: block; }
    .prod-img-ph { width: 100%; height: 100px; background: var(--md-surface-variant); display: flex; align-items: center; justify-content: center; color: var(--md-outline); }
    .product-card .card-body { padding: .75rem; }
    .card-name  { font-weight: 500; font-size: .92rem; margin-bottom: .2rem; }
    .card-price { color: var(--md-primary); font-weight: 700; font-size: 1.05rem; }
    .card-cat   { font-size: .72rem; color: var(--md-outline); margin-top: .15rem; }
    .card-ing   { font-size: .72rem; color: var(--md-outline); margin-top: .1rem; }

    /* Order panel */
    .order-panel { background: var(--md-surface); border-left: 1px solid var(--md-surface-variant); display: flex; flex-direction: column; height: 100%; overflow: hidden; width: 340px; flex-shrink: 0; }
    .op-header { padding: .85rem 1rem; border-bottom: 1px solid var(--md-surface-variant); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .op-header-title { font-weight: 700; font-size: 1rem; }
    .op-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

    /* Customer section */
    .op-section { padding: .7rem 1rem; border-bottom: 1px solid var(--md-surface-variant); flex-shrink: 0; }
    .op-section-label { font-size: .75rem; color: var(--md-outline); margin-bottom: .5rem; display: flex; align-items: center; gap: .25rem; }
    .op-section-label .req { color: var(--md-error); }
    .customer-selected { display: flex; align-items: center; justify-content: space-between; background: var(--md-surface-variant); border-radius: 10px; padding: .6rem .9rem; }
    .customer-selected-info { display: flex; flex-direction: column; }
    .customer-name { font-weight: 600; font-size: .9rem; }
    .customer-phone { font-size: .75rem; color: var(--md-outline); }
    .customer-search-wrap { position: relative; }
    .customer-search-input { width: 100%; background: var(--md-surface-variant); border: 1px solid var(--md-outline); border-radius: 10px; padding: .6rem .9rem .6rem 2.2rem; color: var(--md-on-surface); font-size: .88rem; outline: none; font-family: inherit; }
    .customer-search-input:focus { border-color: var(--md-primary); }
    .customer-search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); opacity: .5; font-size: .9rem; pointer-events: none; }
    .customer-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--md-surface-variant); border: 1px solid var(--md-outline); border-radius: 10px; z-index: 50; max-height: 220px; overflow-y: auto; }
    .customer-option { padding: .6rem .9rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.06); }
    .customer-option:last-child { border-bottom: none; }
    .customer-option:hover { background: rgba(255,255,255,.05); }
    .customer-option-name { font-size: .88rem; font-weight: 500; }
    .customer-option-sub { font-size: .75rem; color: var(--md-outline); }
    .customer-create-btn { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; cursor: pointer; color: var(--md-primary); font-size: .88rem; font-weight: 500; border-top: 1px solid var(--md-outline); }
    .customer-create-btn:hover { background: rgba(157,32,35,.07); }
    .err-hint { font-size: .75rem; color: var(--md-error); margin-top: .3rem; }

    /* Cart items */
    .cart-items { flex: 1; overflow-y: auto; padding: .5rem .75rem; display: flex; flex-direction: column; gap: .4rem; min-height: 0; }
    .cart-item { background: var(--md-surface-variant); border-radius: 10px; padding: .6rem .8rem; }
    .cart-item-top { display: flex; align-items: center; gap: .5rem; }
    .ci-name { flex: 1; font-size: .86rem; font-weight: 500; line-height: 1.2; }
    .ci-price-unit { font-size: .75rem; color: var(--md-outline); }
    .qty-ctrl { display: flex; align-items: center; gap: .3rem; }
    .qty-btn { background: var(--md-surface); border: 1px solid var(--md-outline); color: var(--md-on-surface); border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .qty-val { min-width: 20px; text-align: center; font-size: .88rem; font-weight: 600; }
    .ci-price { font-weight: 700; color: var(--md-primary); font-size: .88rem; min-width: 50px; text-align: right; }
    .ci-del { background: none; border: none; cursor: pointer; color: var(--md-error); opacity: .7; font-size: 1rem; padding: .15rem; flex-shrink: 0; }
    .ci-del:hover { opacity: 1; }
    .ci-mods { margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .2rem; }
    .ci-mod { display: inline-flex; align-items: center; gap: .15rem; font-size: .7rem; border-radius: 4px; padding: .1rem .35rem; }
    .ci-mod.added   { background: rgba(157,32,35,.12); color: var(--md-primary); }
    .ci-mod.removed { background: rgba(255,107,107,.12); color: var(--md-error); }
    .ci-note-row { margin-top: .35rem; }
    .ci-note-text { font-size: .75rem; color: #FFD966; background: rgba(255,217,102,.08); border-radius: 4px; padding: .2rem .5rem; display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
    .ci-note-edit { font-size: .7rem; text-decoration: underline; cursor: pointer; color: var(--md-outline); }
    .ci-note-input { width: 100%; background: var(--md-surface); border: 1px solid var(--md-outline); border-radius: 6px; padding: .35rem .6rem; font-size: .78rem; color: var(--md-on-surface); outline: none; font-family: inherit; margin-top: .2rem; }
    .ci-add-note { font-size: .75rem; color: var(--md-outline); cursor: pointer; margin-top: .2rem; display: inline-block; }
    .ci-add-note:hover { color: var(--md-primary); }

    /* Order note & slots */
    .op-note-section { padding: .6rem 1rem; border-top: 1px solid var(--md-surface-variant); flex-shrink: 0; }
    .op-note-label { font-size: .75rem; color: var(--md-outline); margin-bottom: .4rem; }
    .op-note-ta { width: 100%; background: var(--md-surface-variant); border: 1px solid var(--md-outline); border-radius: 8px; padding: .6rem .8rem; font-size: .82rem; color: var(--md-on-surface); resize: none; outline: none; font-family: inherit; }
    .op-note-ta:focus { border-color: var(--md-primary); }
    .op-slots-section { padding: .6rem 1rem; border-top: 1px solid var(--md-surface-variant); flex-shrink: 0; }
    .op-slots-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
    .op-slots-label { font-size: .75rem; color: var(--md-outline); }
    .op-slots-count { font-size: .72rem; background: var(--md-surface-variant); padding: .15rem .55rem; border-radius: 50px; color: var(--md-outline); }
    .slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; max-height: 200px; overflow-y: auto; }
    .slot-btn { background: var(--md-surface-variant); border: 1px solid transparent; border-radius: 10px; padding: .45rem .3rem; text-align: center; cursor: pointer; transition: all .15s; }
    .slot-btn:hover:not(:disabled) { border-color: var(--md-primary); }
    .slot-btn.selected { background: var(--md-primary); border-color: var(--md-primary); }
    .slot-btn:disabled { opacity: .35; cursor: not-allowed; }
    .slot-time { font-size: .88rem; font-weight: 700; color: var(--md-on-surface); }
    .slot-btn.selected .slot-time { color: var(--md-on-primary); }
    .slot-info { font-size: .65rem; color: var(--md-outline); margin-top: .1rem; }
    /* Il colore era `rgba(95,21,0,.7)`, cioe' il testo-su-primario del tema di
       fabbrica scritto a mano. Col tema reale il primario e' #7f2022 e quel
       marrone scuro finiva su fondo rosso scuro: contrasto misurato 1,23:1,
       la capienza dello slot selezionato era di fatto invisibile. Ora eredita
       il colore giusto dal tema, come fa gia' l'ora subito sopra. */
    .slot-btn.selected .slot-info { color: var(--md-on-primary); opacity: .75; }
    .slots-empty { font-size: .82rem; color: var(--md-outline); text-align: center; padding: 1rem 0; opacity: .7; }

    /* Order footer */
    .op-footer { padding: .85rem 1rem; border-top: 1px solid var(--md-surface-variant); flex-shrink: 0; display: flex; flex-direction: column; gap: .6rem; }
    .totals-row { display: flex; justify-content: space-between; font-size: .82rem; color: var(--md-outline); }
    .totals-row.total { font-size: 1.1rem; font-weight: 700; color: var(--md-on-surface); margin-bottom: .1rem; }
    .totals-sub { font-size: .72rem; color: var(--md-outline); text-align: center; }
    .payment-methods { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .35rem; }
    .pay-btn { border: 1px solid var(--md-outline); background: var(--md-surface-variant); color: var(--md-on-surface); border-radius: 8px; padding: .5rem .3rem; font-size: .78rem; cursor: pointer; transition: all .15s; text-align: center; }
    .pay-btn.active { border-color: var(--md-primary); color: var(--md-primary); background: rgba(157,32,35,.1); }
    .btn-checkout { background: var(--md-primary); color: var(--md-on-primary); border: none; border-radius: 50px; padding: .85rem; font-size: .95rem; font-weight: 700; cursor: pointer; width: 100%; }
    .btn-checkout:disabled { opacity: .35; cursor: default; }

    /* Ingredient customizer modal */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: flex-end; justify-content: center; z-index: 300; }
    @media (min-width: 600px) { .modal-overlay { align-items: center; } }
    .modal { background: var(--md-surface); border-radius: 16px 16px 0 0; width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; }
    @media (min-width: 600px) { .modal { border-radius: 16px; } }
    .modal-head { padding: 1.25rem 1.5rem .75rem; border-bottom: 1px solid var(--md-surface-variant); display: flex; align-items: center; justify-content: space-between; }
    .modal-title { font-weight: 700; font-size: 1.1rem; }
    .modal-price { color: var(--md-primary); font-weight: 700; font-size: 1.1rem; }
    .modal-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
    .ing-section-title { font-size: .82rem; color: var(--md-outline); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
    .ing-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 10px; background: var(--md-surface-variant); margin-bottom: .4rem; }
    .ing-row.added-extra { background: rgba(157,32,35,.08); border: 1px solid rgba(157,32,35,.3); }
    .ing-row-name { flex: 1; font-size: .9rem; }
    .ing-row-price { font-size: .8rem; color: var(--md-outline); white-space: nowrap; }
    .ing-row-price.has-price { color: var(--md-primary); }
    .ing-toggle { width: 40px; height: 22px; border-radius: 50px; border: 2px solid var(--md-outline); background: transparent; cursor: pointer; position: relative; transition: all .2s; flex-shrink: 0; }
    .ing-toggle.on  { background: var(--md-primary); border-color: var(--md-primary); }
    .ing-toggle.off { background: rgba(255,107,107,.2); border-color: var(--md-error); }
    .ing-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--md-outline); transition: all .2s; }
    .ing-toggle.on::after  { background: var(--md-on-primary); transform: translateX(18px); }
    .ing-toggle.off::after { background: var(--md-error); transform: translateX(0); }
    .ing-add-row { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: 10px; cursor: pointer; transition: background .15s; }
    .ing-add-row:hover { background: var(--md-surface-variant); }
    .ing-add-check { width: 18px; height: 18px; accent-color: var(--md-primary); cursor: pointer; flex-shrink: 0; }
    .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--md-surface-variant); display: flex; gap: .75rem; }
    .modal-qty-row { display: flex; align-items: center; gap: .75rem; }

    /* Admin screens */
    .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; }
    .admin-header h2 { font-size: 1.25rem; }
    .admin-table { width: 100%; border-collapse: collapse; background: var(--md-surface); border-radius: 12px; overflow: hidden; }
    .admin-table th { background: var(--md-surface-variant); padding: .7rem 1rem; text-align: left; font-size: .82rem; color: var(--md-outline); font-weight: 500; }
    .admin-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--md-surface-variant); font-size: .88rem; vertical-align: middle; }
    .admin-table tr:last-child td { border-bottom: none; }
    .admin-table tr:hover td { background: rgba(255,255,255,.015); }
    .td-actions { display: flex; gap: .4rem; }
    .price-tag { color: var(--md-primary); font-weight: 700; }
    .inactive-row td { opacity: .4; }

    /* Edit modal */
    .edit-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 400; padding: 1rem; }
    .edit-modal { background: var(--md-surface); border-radius: 16px; padding: 1.75rem; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 1rem; max-height: 90vh; overflow-y: auto; }
    .edit-modal-title { font-size: 1.15rem; font-weight: 700; color: var(--md-primary); }
    .customer-modal { background: var(--md-surface); border-radius: 16px; width: min(440px, calc(100vw - 2rem)); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
    .customer-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem .9rem; border-bottom: 1px solid var(--md-surface-variant); flex-shrink: 0; }
    .customer-modal-head-title { font-size: 1.05rem; font-weight: 700; color: var(--md-primary); }
    .customer-modal-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; overflow-y: auto; flex: 1; }
    .customer-modal-foot { padding: .85rem 1.25rem; border-top: 1px solid var(--md-surface-variant); display: flex; gap: .65rem; justify-content: flex-end; flex-shrink: 0; }
    .modal-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: .5rem; }
    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

    /* Upload image */
    .upload-area { border: 2px dashed var(--md-outline); border-radius: 10px; padding: 1.5rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; position: relative; }
    .upload-area:hover, .upload-area.drag-over { border-color: var(--md-primary); background: rgba(157,32,35,.05); }
    .upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
    .upload-preview { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin-top: .75rem; display: block; }
    .upload-hint { font-size: .82rem; color: var(--md-outline); margin-top: .4rem; }

    /* Ingredients in product form */
    .ing-picker { border: 1px solid var(--md-outline); border-radius: 10px; overflow: hidden; }
    .ing-picker-head { background: var(--md-surface-variant); padding: .6rem 1rem; font-size: .82rem; color: var(--md-outline); font-weight: 500; display: flex; justify-content: space-between; }
    .ing-picker-body { padding: .5rem; display: flex; flex-direction: column; gap: .25rem; max-height: 200px; overflow-y: auto; }
    .ing-pick-row { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: 8px; cursor: pointer; }
    .ing-pick-row:hover { background: var(--md-surface-variant); }
    .ing-pick-name { flex: 1; font-size: .88rem; }
    .ing-pick-price { font-size: .8rem; color: var(--md-outline); }
    .ing-pick-price.pos { color: var(--md-primary); }
    .ing-pick-badge { font-size: .75rem; padding: .15rem .5rem; border-radius: 50px; }
    .badge-base { background: rgba(107,255,107,.15); color: var(--md-success); }
    .badge-opt  { background: rgba(157,32,35,.15); color: var(--md-primary); }

    /* Settings */
    .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    @media (max-width: 600px) { .settings-grid { grid-template-columns: 1fr; } }
    .settings-section { background: var(--md-surface); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
    .settings-section h3 { font-size: .95rem; color: var(--md-primary); }
    .toggle { display: flex; align-items: center; gap: .75rem; cursor: pointer; font-size: .9rem; }
    .toggle input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--md-primary); cursor: pointer; }

    /* Timeslots screen */
    .slots-screen { display: flex; flex: 1; min-height: 0; overflow: hidden; position: relative; }
    .slots-main { flex: 1; overflow-y: auto; padding: 1.5rem; margin-right: 300px; }
    .slots-date-nav { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
    .slots-date-btn { background: var(--md-surface-variant); border: none; color: var(--md-on-surface); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
    .slots-date-label { font-weight: 700; font-size: 1.05rem; flex: 1; }
    .slots-refresh-btn { background: none; border: 1px solid var(--md-outline); color: var(--md-outline); border-radius: 8px; padding: .3rem .7rem; cursor: pointer; font-size: .78rem; }
    .slots-refresh-btn:hover { border-color: var(--md-primary); color: var(--md-primary); }
    .slots-profile-section { margin-bottom: 1.5rem; }
    .slots-profile-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--md-surface-variant); }
    .slots-profile-name { font-size: .88rem; font-weight: 600; color: var(--md-primary); display: flex; align-items: center; gap: .5rem; }
    .slots-profile-cats { font-size: .72rem; color: var(--md-outline); }
    .slot-grid-2d { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
    @media (min-width:1200px) { .slot-grid-2d { grid-template-columns: repeat(6, 1fr); } }
    .slot-tile { border-radius: 10px; padding: .5rem .4rem; text-align: center; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
    .slot-tile.available { background: rgba(107,255,107,.07); border-color: rgba(107,255,107,.2); }
    .slot-tile.full       { background: rgba(255,107,107,.07); border-color: rgba(255,107,107,.2); }
    /* Niente `opacity: .6` sull'intera tessera: smorzava anche i testi, e la
       riga della capienza (grigia) scendeva a 1,8:1 di contrasto — illeggibile
       proprio sullo stato che deve avvisare. Lo stato "bloccato" resta
       riconoscibile dal fondo e dal bordo ambra, e ora si legge. */
    .slot-tile.blocked    { background: rgba(255,217,102,.09); border-color: rgba(255,217,102,.35); cursor: not-allowed; }
    .slot-tile.blocked .slot-tile-cap { color: #FFD966; opacity: .85; }
    .slot-tile.past       { opacity: .3; cursor: default; }
    .slot-tile:hover:not(.blocked):not(.past) { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.3); }
    .slot-tile-time { font-size: .88rem; font-weight: 700; }
    .slot-tile.available .slot-tile-time { color: var(--md-on-surface); }
    .slot-tile.full .slot-tile-time      { color: var(--md-error); }
    .slot-tile.blocked .slot-tile-time   { color: #FFD966; }
    .slot-tile-cap { font-size: .68rem; margin-top: .15rem; color: var(--md-outline); }
    .slot-tile.available .slot-tile-cap  { color: #6BFF6B; }
    .slot-tile.full .slot-tile-cap       { color: var(--md-error); }

    /* Sidebar profili (pannello destro) */
    .profiles-panel { width: 300px; min-width: 300px; background: var(--md-surface); border-left: 1px solid var(--md-surface-variant); display: flex; flex-direction: column; overflow: hidden; position: absolute; right: 0; top: 0; bottom: 0; }
    .profiles-panel-head { padding: .85rem 1rem; border-bottom: 1px solid var(--md-surface-variant); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .profiles-panel-title { font-weight: 700; font-size: .92rem; }
    .profiles-list { flex: 1; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
    .profile-item { background: var(--md-surface-variant); border-radius: 12px; padding: .85rem 1rem; cursor: pointer; border: 1.5px solid transparent; transition: all .15s; }
    .profile-item:hover { border-color: var(--md-outline); }
    .profile-item.editing { border-color: var(--md-primary); }
    .profile-item-name { font-weight: 600; font-size: .9rem; color: var(--md-primary); margin-bottom: .35rem; display: flex; align-items: center; justify-content: space-between; }
    .profile-item-meta { font-size: .75rem; color: var(--md-outline); line-height: 1.6; }
    .profile-item-cats { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
    .profile-cat-tag { background: rgba(157,32,35,.1); color: var(--md-primary); border-radius: 4px; padding: .1rem .45rem; font-size: .68rem; }

    /* Profile edit form inline */
    .profile-edit-form { background: var(--md-surface); border: 1px solid var(--md-primary); border-radius: 12px; padding: 1rem; margin-top: .25rem; display: flex; flex-direction: column; gap: .65rem; overflow: hidden; box-sizing: border-box; width: 100%; }
    .pef-title { font-size: .85rem; font-weight: 700; color: var(--md-primary); }
    .pef-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; min-width: 0; }
    .pef-row > * { min-width: 0; }
    .pef-field input { min-width: 0; width: 100%; box-sizing: border-box; }
    .pef-field { display: flex; flex-direction: column; gap: .25rem; }
    .pef-field label { font-size: .72rem; color: var(--md-outline); }
    .pef-field input { background: var(--md-surface-variant); border: 1px solid var(--md-outline); border-radius: 7px; padding: .45rem .65rem; color: var(--md-on-surface); font-size: .82rem; outline: none; font-family: inherit; }
    .pef-field input:focus { border-color: var(--md-primary); }
    .pef-days { display: grid; grid-template-columns: repeat(7,1fr); gap: .2rem; }
    .pef-day { border: 1px solid var(--md-outline); background: none; border-radius: 5px; padding: .25rem .1rem; font-size: .68rem; cursor: pointer; color: var(--md-outline); }
    .pef-day.on { background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary); }
    .pef-cats-grid { display: flex; flex-wrap: wrap; gap: .3rem; }
    .pef-cat-chip { border: 1px solid var(--md-outline); background: none; border-radius: 50px; padding: .2rem .6rem; font-size: .72rem; cursor: pointer; color: var(--md-outline); transition: all .12s; }
    .pef-cat-chip.on { background: rgba(157,32,35,.15); border-color: var(--md-primary); color: var(--md-primary); }
    .pef-actions { display: flex; gap: .5rem; justify-content: flex-end; }

    /* Slot detail modal */
    .slot-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 400; }
    .slot-detail-modal { background: var(--md-surface); border-radius: 14px; padding: 1.5rem; width: 320px; }
    .slot-detail-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
    .slot-detail-row { display: flex; justify-content: space-between; font-size: .88rem; padding: .35rem 0; border-bottom: 1px solid var(--md-surface-variant); }
    .slot-detail-row:last-of-type { border-bottom: none; }

    /* Admin screens */
    .admin-screen { flex: 1; min-height: 0; overflow-y: auto; padding: 1.5rem; box-sizing: border-box; }
    .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; }
    .admin-header h2 { font-size: 1.2rem; font-weight: 700; }
    .admin-table { width: 100%; border-collapse: collapse; }
    .admin-table th { text-align: left; padding: .6rem .75rem; font-size: .78rem; color: var(--md-outline); font-weight: 500; border-bottom: 1px solid var(--md-surface-variant); }
    .admin-table td { padding: .6rem .75rem; font-size: .88rem; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
    .admin-table tr:hover td { background: rgba(255,255,255,.02); }

    /* Customers */
    .customers-screen { flex: 1; min-height: 0; overflow-y: auto; padding: 1.5rem; }
    .orders-screen { height: 100%; overflow-y: auto; padding: 1.5rem; }
    /* Timeslots old */
    .slots-admin { padding: 1.5rem; }

    /* ── Checkout multistep modal ── */
    .checkout-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 1rem; }
    .checkout-modal { background: var(--md-surface); border-radius: 20px; width: 100%; max-width: 480px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
    .checkout-header { padding: 1.25rem 1.5rem .9rem; border-bottom: 1px solid var(--md-surface-variant); display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
    .checkout-back-btn { background: none; border: none; color: var(--md-outline); cursor: pointer; font-size: 1.2rem; padding: .25rem .45rem; line-height: 1; border-radius: 6px; }
    .checkout-back-btn:hover { color: var(--md-on-surface); background: var(--md-surface-variant); }
    .checkout-title { font-weight: 700; font-size: 1.05rem; flex: 1; }
    .checkout-steps { display: flex; align-items: center; gap: .35rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--md-surface-variant); flex-shrink: 0; }
    .checkout-step-item { display: flex; align-items: center; gap: .35rem; }
    .step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; transition: all .2s; }
    .step-dot.done    { background: var(--md-primary); color: var(--md-on-primary); }
    .step-dot.current { background: var(--md-surface-variant); color: var(--md-on-surface); border: 2px solid var(--md-primary); }
    .step-dot.future  { background: var(--md-surface-variant); color: var(--md-outline); }
    .step-lbl { font-size: .72rem; color: var(--md-outline); white-space: nowrap; }
    .step-lbl.current { color: var(--md-on-surface); font-weight: 600; }
    .step-connector { flex: 1; height: 2px; background: var(--md-surface-variant); min-width: 20px; transition: background .2s; }
    .step-connector.done { background: var(--md-primary); }
    .checkout-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
    .co-item-row { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .88rem; }
    .co-item-row:last-child { border: none; }
    .co-item-name { flex: 1; }
    .co-item-qty { color: var(--md-outline); font-size: .78rem; min-width: 28px; text-align: center; }
    .co-item-price { font-weight: 600; color: var(--md-primary); min-width: 68px; text-align: right; }
    .co-item-mods { font-size: .72rem; color: var(--md-outline); display: block; padding-left: .5rem; }
    .co-info-box { background: var(--md-surface-variant); border-radius: 10px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .4rem; margin-top: .9rem; }
    .co-info-row { display: flex; justify-content: space-between; font-size: .85rem; }
    .co-info-label { color: var(--md-outline); }
    .co-info-val { font-weight: 500; }
    .co-total-box { background: rgba(157,32,35,.07); border: 1px solid rgba(157,32,35,.2); border-radius: 12px; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; margin-top: .85rem; }
    .co-total-amount { font-size: 1.5rem; font-weight: 800; color: var(--md-primary); }
    .co-total-vat { font-size: .68rem; color: var(--md-outline); }
    .payment-opt { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 12px; border: 2px solid transparent; cursor: pointer; transition: all .18s; background: var(--md-surface-variant); margin-bottom: .5rem; }
    .payment-opt:hover { border-color: var(--md-outline); }
    .payment-opt.sel-cash { border-color: #4CAF50; background: rgba(76,175,80,.07); }
    .payment-opt.sel-card { border-color: #2196F3; background: rgba(33,150,243,.07); }
    .payment-opt.sel-cod  { border-color: #FF9800; background: rgba(255,152,0,.07); }
    .pay-ico { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .pay-ico.cash { background: rgba(76,175,80,.15); color: #4CAF50; }
    .pay-ico.card { background: rgba(33,150,243,.15); color: #2196F3; }
    .pay-ico.cod  { background: rgba(255,152,0,.15); color: #FF9800; }
    .pay-opt-name { font-weight: 600; font-size: .92rem; }
    .pay-opt-desc { font-size: .76rem; color: var(--md-outline); margin-top: .1rem; }
    .pay-opt-radio { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--md-outline); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .18s; }
    .payment-opt.sel-cash .pay-opt-radio { border-color: #4CAF50; background: #4CAF50; }
    .payment-opt.sel-card .pay-opt-radio { border-color: #2196F3; background: #2196F3; }
    .payment-opt.sel-cod  .pay-opt-radio  { border-color: #FF9800; background: #FF9800; }
    .pay-opt-rdot { width: 8px; height: 8px; border-radius: 50%; background: white; opacity: 0; transition: opacity .18s; }
    .payment-opt.sel-cash .pay-opt-rdot,
    .payment-opt.sel-card .pay-opt-rdot,
    .payment-opt.sel-cod  .pay-opt-rdot { opacity: 1; }
    .card-only-note { font-size: .78rem; color: #2196F3; background: rgba(33,150,243,.07); border: 1px solid rgba(33,150,243,.2); border-radius: 8px; padding: .55rem .85rem; margin-top: .5rem; display: flex; align-items: center; gap: .4rem; }
    .co-pay-total { display: flex; justify-content: space-between; align-items: center; background: var(--md-surface-variant); border-radius: 10px; padding: .85rem 1rem; margin-top: .85rem; }
    .co-pay-total-lbl { font-size: .85rem; color: var(--md-outline); }
    .co-pay-total-amt { font-size: 1.2rem; font-weight: 800; color: var(--md-primary); }
    .checkout-actions { padding: 1rem 1.5rem; border-top: 1px solid var(--md-surface-variant); display: flex; flex-direction: column; gap: .55rem; flex-shrink: 0; }
    .co-btn-row { display: flex; gap: .55rem; }
    .co-btn { flex: 1; border: none; border-radius: 50px; padding: .85rem .75rem; font-size: .9rem; font-weight: 700; cursor: pointer; transition: opacity .15s; display: flex; align-items: center; justify-content: center; gap: .45rem; }
    .co-btn:disabled { opacity: .3; cursor: default; }
    .co-btn.primary { background: var(--md-primary); color: var(--md-on-primary); }
    .co-btn.outline { background: var(--md-surface-variant); color: var(--md-on-surface); border: 1px solid var(--md-outline); }
    .co-btn.preconto { background: rgba(157,32,35,.1); border: 1px solid var(--md-primary); color: var(--md-primary); }
    .oc-body { padding: 2rem 1.5rem 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
    .oc-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(76,175,80,.15); display: flex; align-items: center; justify-content: center; color: #4CAF50; margin-bottom: .4rem; }
    .oc-order-num { font-size: 1.3rem; font-weight: 800; }
    .oc-total { font-size: 1.1rem; color: var(--md-primary); font-weight: 700; }
    .oc-meta { font-size: .84rem; color: var(--md-outline); }
    .oc-actions { display: flex; gap: .55rem; padding: 0 1.5rem 1.5rem; }

    .order-row { background: var(--md-surface); border-radius: 12px; padding: .9rem 1.25rem; margin-bottom: .65rem; display: flex; align-items: center; gap: 1rem; }
    .status-chip { border-radius: 50px; padding: .18rem .7rem; font-size: .78rem; font-weight: 500; }
    .status-processing    { background: rgba(255,217,102,.15); color: var(--md-warning); }
    .status-kds-production{ background: rgba(107,255,107,.15); color: var(--md-success); }
    .status-kds-ready     { background: rgba(158,202,255,.15); color: #9ECAFF; }
    .status-completed     { background: rgba(100,100,100,.15); color: var(--md-outline); }
    .status-cancelled     { background: rgba(255,107,107,.15); color: var(--md-error); }
    .status-pending       { background: rgba(157,32,35,.15); color: var(--md-primary); }

    /* Utils */
    .loading { text-align: center; padding: 3rem; opacity: .5; }
    .empty   { text-align: center; padding: 2.5rem; opacity: .45; }
    .error-msg   { background: rgba(255,107,107,.15); color: var(--md-error);   padding: .7rem 1rem; border-radius: 8px; font-size: .88rem; margin-bottom: .75rem; }
    .success-msg { background: rgba(107,255,107,.15); color: var(--md-success); padding: .7rem 1rem; border-radius: 8px; font-size: .88rem; margin-bottom: .75rem; }
    .divider { border: none; border-top: 1px solid var(--md-surface-variant); }
    code { background: var(--md-surface-variant); padding: .1rem .4rem; border-radius: 4px; font-size: .8rem; }
    .thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--md-surface-variant); flex-shrink: 0; }
    .thumb-ph { width: 44px; height: 44px; border-radius: 8px; background: var(--md-surface-variant); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }

    /* ── Griglia prodotti variabile ── */
    .products-grid.grid-sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .products-grid.grid-md { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .products-grid.grid-lg { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

    /* ── Admin search/sort bar ── */
    .admin-search-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .admin-search-input { flex: 1; min-width: 160px; background: var(--md-surface-variant); border: 1px solid var(--md-outline); border-radius: 50px; padding: .45rem 1rem; color: var(--md-on-surface); font-size: .88rem; outline: none; font-family: inherit; }
    .admin-search-input:focus { border-color: var(--md-primary); }
    .sort-btn { background: var(--md-surface-variant); border: 1px solid var(--md-outline); border-radius: 50px; padding: .4rem .85rem; font-size: .78rem; cursor: pointer; color: var(--md-outline); white-space: nowrap; transition: all .15s; }
    .sort-btn.active { background: rgba(157,32,35,.15); border-color: var(--md-primary); color: var(--md-primary); }

    /* ── Orders cards ── */
    .orders-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }
    .orders-left { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .orders-filters { display: flex; gap: .4rem; padding: .75rem 1rem; border-bottom: 1px solid var(--md-surface-variant); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
    .orders-filter-btn { background: var(--md-surface-variant); border: none; border-radius: 50px; padding: .35rem .85rem; font-size: .8rem; cursor: pointer; color: var(--md-outline); white-space: nowrap; transition: all .15s; }
    .orders-filter-btn.active { background: var(--md-primary); color: var(--md-on-primary); }
    .orders-grid { flex: 1; overflow-y: auto; padding: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .85rem; align-content: start; }
    .order-card { background: var(--md-surface); border-radius: 16px; padding: 1.1rem 1.2rem; cursor: pointer; border: 2px solid transparent; transition: all .15s; }
    .order-card:hover { border-color: var(--md-outline); }
    .order-card.selected { border-color: var(--md-primary); background: rgba(157,32,35,.05); }
    .oc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .6rem; }
    .oc-num { font-size: 1.2rem; font-weight: 800; }
    .oc-meta { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--md-outline); margin-bottom: .4rem; }
    .oc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: .65rem; padding-top: .55rem; border-top: 1px solid rgba(255,255,255,.06); }
    .oc-total { font-weight: 700; color: var(--md-primary); font-size: 1.05rem; }
    .oc-pay-chip { font-size: .7rem; padding: .2rem .55rem; border-radius: 50px; }
    .oc-pay-chip.cash { background: rgba(76,175,80,.12); color: #4CAF50; }
    .oc-pay-chip.card { background: rgba(33,150,243,.12); color: #2196F3; }
    .oc-pay-chip.cod  { background: rgba(255,152,0,.12);  color: #FF9800; }
    .oc-pay-chip.online { background: rgba(156,39,176,.12); color: #9C27B0; }

    /* Detail panel */
    .orders-detail { width: 300px; background: var(--md-surface); border-left: 1px solid var(--md-surface-variant); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
    .od-head { padding: .85rem 1rem; border-bottom: 1px solid var(--md-surface-variant); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
    .od-head-title { font-weight: 700; font-size: .95rem; }
    .od-body { flex: 1; overflow-y: auto; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .65rem; }
    .od-row { display: flex; flex-direction: column; gap: .15rem; }
    .od-row-label { font-size: .72rem; color: var(--md-outline); }
    .od-row-val { font-size: .88rem; font-weight: 500; }
    .od-items-list { display: flex; flex-direction: column; gap: .3rem; margin-top: .25rem; }
    .od-item { display: flex; justify-content: space-between; font-size: .82rem; padding: .2rem 0; border-bottom: 1px solid rgba(255,255,255,.04); }
    .od-item:last-child { border: none; }
    .od-total-row { display: flex; justify-content: space-between; font-weight: 700; padding-top: .5rem; border-top: 1px solid var(--md-surface-variant); font-size: .95rem; }
    .od-total-row span:last-child { color: var(--md-primary); }
    .od-actions { padding: .85rem 1rem; border-top: 1px solid var(--md-surface-variant); display: flex; flex-direction: column; gap: .45rem; flex-shrink: 0; }

    /* ── Theme settings ── */
    .theme-section { background: var(--md-surface); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
    .theme-section h3 { font-size: .95rem; color: var(--md-primary); margin: 0; }
    .color-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
    .color-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .12s; flex-shrink: 0; }
    .color-swatch:hover { transform: scale(1.15); }
    .color-swatch.selected { border-color: var(--md-on-surface); transform: scale(1.15); }
    .color-picker-wrap { display: flex; align-items: center; gap: .5rem; }
    .color-picker-wrap input[type=color] { width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer; padding: 2px; background: none; }
    .cpw { display: flex; align-items: center; gap: .4rem; }
    .cpw-swatch { width: 28px; height: 28px; border-radius: 7px; border: 2px solid rgba(255,255,255,.15); cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden; }
    .cpw-swatch input[type=color] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; cursor: pointer; border: none; padding: 0; }
    .cpw-hex { background: var(--md-surface-variant); border: 1px solid var(--md-outline); border-radius: 8px; padding: .3rem .55rem; color: var(--md-on-surface); font-size: .78rem; font-family: 'Courier New', monospace; width: 88px; outline: none; letter-spacing: .05em; }
    .cpw-hex:focus { border-color: var(--md-primary); }
    .font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
    .font-option { border: 2px solid var(--md-outline); border-radius: 10px; padding: .65rem .85rem; cursor: pointer; transition: all .15s; }
    .font-option:hover { border-color: var(--md-primary); }
    .font-option.selected { border-color: var(--md-primary); background: rgba(157,32,35,.1); }
    .font-option-name { font-size: .72rem; color: var(--md-outline); }
    .font-option-preview { font-size: 1rem; margin-top: .2rem; }
    /* ── Settings tab bar ─────────────────────────────────────────── */
    .settings-tabs { display: flex; gap: .25rem; margin-top: .75rem; border-bottom: 1px solid var(--md-surface-variant); padding-bottom: 0; }
    .stab { background: none; border: none; color: var(--md-on-surface); opacity: .55; cursor: pointer; font-size: .88rem; font-weight: 500; padding: .55rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 6px 6px 0 0; transition: all .15s; font-family: inherit; }
    .stab:hover { opacity: .85; background: rgba(255,255,255,.04); }
    .stab.active { opacity: 1; color: var(--md-primary); border-bottom-color: var(--md-primary); }
    .settings-footer { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.25rem; border-top: 1px solid var(--md-surface-variant); flex-shrink: 0; background: var(--md-surface); }
    /* ── Theme Factory ─────────────────────────────────────────────── */
    .tf-layout { display: flex; flex-direction: column; gap: 1.25rem; max-width: 960px; }
    .tf-block { background: var(--md-surface); border: 1px solid var(--md-surface-variant); border-radius: 14px; padding: 1.25rem 1.4rem; }
    .tf-block-title { font-size: .95rem; font-weight: 700; color: var(--md-primary); margin-bottom: .2rem; }
    .tf-block-sub { font-size: .78rem; color: var(--md-outline); margin-bottom: 1rem; }
    .tf-presets-groups { display: flex; flex-direction: column; gap: .85rem; }
    .tf-preset-group-label { font-size: .72rem; color: var(--md-outline); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .45rem; }
    .tf-preset-row { display: flex; flex-wrap: wrap; gap: .5rem; }
    .tf-preset-btn { background: none; border: 1px solid var(--md-surface-variant); border-radius: 10px; cursor: pointer; padding: .4rem; transition: all .15s; display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 78px; }
    .tf-preset-btn:hover { border-color: var(--md-primary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
    .tf-preset-swatch { width: 56px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
    .tf-preset-label { font-size: .63rem; color: var(--md-on-surface); text-align: center; line-height: 1.2; opacity: .8; }
    .tf-colors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 1rem; margin-top: .75rem; }
    .tf-color-group { display: flex; flex-direction: column; gap: .5rem; }
    .tf-color-group-title { font-size: .7rem; color: var(--md-outline); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .1rem; padding-bottom: .3rem; border-bottom: 1px solid var(--md-surface-variant); }
    .tf-color-field { display: flex; align-items: center; gap: .55rem; background: var(--md-surface-variant); border-radius: 9px; padding: .4rem .6rem; border: 1px solid transparent; transition: border-color .15s; }
    .tf-color-field:focus-within { border-color: var(--md-primary); }
    .tf-color-swatch { width: 26px; height: 26px; border-radius: 6px; cursor: pointer; position: relative; flex-shrink: 0; border: 2px solid rgba(255,255,255,.15); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
    .tf-color-swatch input[type=color] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
    .tf-color-info { flex: 1; min-width: 0; }
    .tf-color-label { font-size: .67rem; color: var(--md-outline); margin-bottom: .1rem; }
    .tf-color-hex { width: 100%; background: none; border: none; color: var(--md-on-surface); font-family: monospace; font-size: .82rem; outline: none; }
    .tf-fonts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: .55rem; margin-top: .75rem; }
    .tf-font-btn { background: var(--md-surface-variant); border: 2px solid transparent; border-radius: 10px; cursor: pointer; padding: .7rem .5rem .5rem; text-align: center; transition: all .15s; }
    .tf-font-btn:hover { border-color: var(--md-outline); }
    .tf-font-btn.selected { border-color: var(--md-primary); background: rgba(157,32,35,.07); }
    .tf-font-preview { font-size: 1.05rem; color: var(--md-on-surface); }
    .tf-font-name { font-size: .63rem; color: var(--md-outline); margin-top: .3rem; }
    .tf-btns-layout { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; margin-top: .75rem; }
    .tf-sliders { display: flex; flex-direction: column; gap: .9rem; }
    .tf-slider-row label { font-size: .77rem; color: var(--md-outline); display: block; margin-bottom: .3rem; }
    .tf-slider-wrap { display: flex; align-items: center; gap: .6rem; }
    .tf-slider-wrap input[type=range] { flex: 1; accent-color: var(--md-primary); }
    .tf-slider-val { font-size: .77rem; font-family: monospace; color: var(--md-primary); min-width: 36px; text-align: right; font-weight: 600; }
    .tf-btn-preview { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; padding: .85rem 1rem; background: var(--md-bg); border-radius: 10px; border: 1px dashed var(--md-surface-variant); }
    .tf-logos-grid { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
    .tf-logo-field { display: flex; align-items: center; gap: 1rem; background: var(--md-surface-variant); border-radius: 12px; padding: .75rem 1rem; }
    .tf-logo-preview { width: 72px; height: 52px; border-radius: 8px; border: 1px dashed var(--md-outline); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: var(--md-bg); }
    .tf-logo-empty { font-size: 1.5rem; color: var(--md-outline); opacity: .35; }
    .tf-logo-info { flex: 1; min-width: 0; }
    .tf-logo-info label { font-size: .83rem; font-weight: 600; display: block; margin-bottom: .1rem; color: var(--md-on-surface); }
    .tf-logo-hint { font-size: .69rem; color: var(--md-outline); margin-bottom: .35rem; }
    .tf-logo-info input { width: 100%; background: var(--md-surface); border: 1px solid var(--md-outline); border-radius: 8px; padding: .42rem .7rem; color: var(--md-on-surface); font-size: .8rem; outline: none; font-family: inherit; transition: border-color .15s; }
    .tf-logo-info input:focus { border-color: var(--md-primary); }
    .tf-css-editor { width: 100%; background: #0D1117; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .8rem 1rem; color: #79C0FF; font-family: 'Courier New', monospace; font-size: .82rem; resize: vertical; line-height: 1.65; outline: none; }
    .tf-css-editor:focus { border-color: var(--md-primary); }
    /* LogoUploadField */
    .tf-logos-grid { display:flex; flex-direction:column; gap:.75rem; margin-top:.75rem; }
    .luf-field { display:flex; gap:.85rem; align-items:stretch; background:var(--md-surface-variant); border-radius:14px; padding:.85rem 1rem; }
    .luf-preview { width:84px; min-height:60px; border-radius:10px; border:2px dashed var(--md-outline); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; background:var(--md-bg); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
    .luf-preview:hover { border-color:var(--md-primary); }
    .luf-drag { border-color:var(--md-primary) !important; box-shadow:0 0 0 4px rgba(157,32,35,.2); background:rgba(157,32,35,.06) !important; }
    .luf-img { width:100%; height:100%; object-fit:contain; padding:4px; }
    .luf-empty-inner { display:flex; flex-direction:column; align-items:center; padding:.4rem; }
    .luf-spin-wrap { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
    .luf-spinner { width:22px; height:22px; border:2.5px solid var(--md-outline); border-top-color:var(--md-primary); border-radius:50%; animation:spin .7s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .luf-body { flex:1; display:flex; flex-direction:column; gap:.35rem; min-width:0; }
    .luf-label { font-size:.85rem; font-weight:600; color:var(--md-on-surface); }
    .luf-hint { font-size:.7rem; color:var(--md-outline); }
    .luf-btns { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.2rem; }
    .luf-btn { background:var(--md-surface); border:1px solid var(--md-outline); border-radius:20px; padding:.28rem .7rem; font-size:.75rem; cursor:pointer; color:var(--md-on-surface); font-family:inherit; transition:all .15s; }
    .luf-btn:hover:not(:disabled) { border-color:var(--md-primary); color:var(--md-primary); }
    .luf-btn-on { background:rgba(157,32,35,.12); border-color:var(--md-primary); color:var(--md-primary); }
    .luf-btn-del { color:var(--md-error,#CF6679); border-color:transparent; }
    .luf-btn-del:hover { background:rgba(207,102,121,.1); border-color:var(--md-error,#CF6679); }
    .luf-url { width:100%; background:var(--md-surface); border:1px solid var(--md-primary); border-radius:8px; padding:.38rem .65rem; color:var(--md-on-surface); font-size:.8rem; outline:none; font-family:inherit; margin-top:.15rem; }
    .luf-err { font-size:.72rem; color:var(--md-error,#CF6679); margin-top:.15rem; }

/* Titolo di pagina accessibile ma non mostrato a video: il layout legacy
   non prevede un titolo visibile nelle schermate operative (il contesto
   arriva dalla sidebar), ma resta necessario un <h1> per la navigazione
   da screen reader. Pattern standard "visually hidden". */
.sr-only-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ============================================================
   Icone (sostituiscono le emoji del legacy)
   ------------------------------------------------------------
   Le emoji erano glifi di testo: si allineavano da sole alla riga
   e prendevano la dimensione del font. Un <svg> inline no, quindi
   qui gli si ridanno gli stessi due comportamenti. `currentColor`
   nell'SVG fa il resto: l'icona segue il colore del testo e quindi
   il tema scelto in Impostazioni, cosa che l'emoji non faceva.
   ============================================================ */
.eq-ico {
  flex: none;
  vertical-align: -0.18em;
}

/* Etichetta con icona a sinistra: usa il flusso flex invece di uno
   spazio, cosi' il testo non va a capo sotto l'icona. */
.eq-ico-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

/* Lo stato di attesa: il legacy usava la clessidra, qui gira. */
.eq-ico-spin { animation: eq-ico-spin 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes eq-ico-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .eq-ico-spin { animation: none; } }
