/* ═══════════════════════════════════════════════════════════════════════
   KeideaCMS — lo stile del pannello (dalla 1.2.408)

   Lo stile è quello nato nel Noleggio (classi nol- in noleggio-admin.css,
   che il layout carica su tutte le pagine). Questo file aggiunge:
   1) la cornice: barra laterale, testata, piè di pagina, messaggi;
   2) la "pelle" delle pagine non ancora rifatte: le classi Tailwind più
      usate (schede bianche, pulsanti indaco, tabelle, campi) prendono
      l'aspetto dello stile nuovo senza toccare i template. Le regole sono
      dentro #main-content, con più specificità delle classi di Tailwind
      (che il CDN aggiunge dopo questo file).
   Le pagine rifatte usano direttamente le classi nol- e non ne risentono.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --pan-barra: #0f1b2d;
    --pan-barra-2: #16253b;
    --pan-barra-riga: rgba(255, 255, 255, .07);
    --pan-barra-testo: #c7d2e4;
    --pan-barra-tenue: #7d8ba3;
    --pan-fondo: #f5f6fa;
    --pan-testo: #0f172a;
    --pan-testo-2: #334155;
    --pan-tenue: #64748b;
    --pan-bordo: #e2e8f0;
    --pan-riga: #f1f5f9;
    --pan-scuro: #0f172a;
    --pan-scuro-2: #1e293b;
    --pan-verde: #047857;
    --pan-verde-2: #065f46;
    --pan-verde-chiaro: #ecfdf5;
    --pan-blu-chiaro: #eff6ff;
    --pan-blu-scuro: #1e3a8a;
}

/* I colori dello stile nol- valgono in tutto il pannello, non solo dentro .nol
   (per i pulsanti e le pastiglie nella cornice e nelle pagine rifatte) */
body.pannello {
    --nol-testo: #0f172a;
    --nol-testo-2: #334155;
    --nol-tenue: #64748b;
    --nol-bordo: #e2e8f0;
    --nol-riga: #f1f5f9;
    --nol-fondo: #f8fafc;
    --nol-scuro: #0f172a;
    --nol-scuro-2: #1e293b;
    --nol-verde: #047857;
    --nol-verde-2: #065f46;
    --nol-verde-chiaro: #ecfdf5;
    --nol-verde-medio: #d1fae5;
    --nol-ambra: #b45309;
    --nol-ambra-chiaro: #fffbeb;
    --nol-ambra-medio: #fef3c7;
    --nol-rosso: #b91c1c;
    --nol-rosso-chiaro: #fef2f2;
    --nol-rosso-medio: #fee2e2;
    --nol-grigio-medio: #e2e8f0;
    --nol-blu: #2563eb;
    --nol-blu-chiaro: #eff6ff;
    --nol-blu-medio: #dbeafe;
    --nol-blu-pieno: #bfdbfe;
    --nol-blu-scuro: #1e3a8a;
}

body.pannello {
    background: var(--pan-fondo);
    color: var(--pan-testo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── 1. La barra laterale ─────────────────────────────────────────── */
.pan-barra { background: var(--pan-barra); color: var(--pan-barra-testo); box-shadow: 1px 0 0 rgba(15, 23, 42, .08); }
.pan-barra-testa { border-bottom: 1px solid var(--pan-barra-riga); }
.pan-barra-piede { border-top: 1px solid var(--pan-barra-riga); }
.pan-barra .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.pan-barra-pulsante { color: var(--pan-barra-tenue); border-radius: 8px; }
.pan-barra-pulsante:hover { color: #fff; background: var(--pan-barra-riga); }

.pan-voce { display: flex; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: .9rem; font-weight: 500; color: var(--pan-barra-testo); text-decoration: none; transition: background .15s, color .15s; }
.pan-voce:hover { background: var(--pan-barra-riga); color: #fff; }
.pan-voce .sidebar-icon { color: var(--pan-barra-tenue); transition: color .15s; }
.pan-voce:hover .sidebar-icon { color: #fff; }
.pan-voce.is-attiva { background: var(--pan-barra-2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pan-voce.is-attiva .sidebar-icon { color: #6ee7b7; }
.pan-voce.is-aperta { color: #fff; }
.pan-voce.is-aperta .sidebar-icon { color: #fff; }
.pan-sottovoce { display: flex; align-items: center; padding: 7px 12px 7px 44px; border-radius: 10px; font-size: .86rem; color: var(--pan-barra-tenue); text-decoration: none; transition: background .15s, color .15s; }
.pan-sottovoce:hover { background: var(--pan-barra-riga); color: #fff; }
.pan-sottovoce .sidebar-icon { width: 18px; height: 18px; color: currentColor; opacity: .8; }
.pan-sottovoce.is-attiva { background: var(--pan-barra-2); color: #fff; font-weight: 600; }
.pan-sottovoce.is-attiva .sidebar-icon { color: #6ee7b7; opacity: 1; }
.pan-titoletto { padding: 14px 12px 4px 44px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5b6a83; }
.pan-voce.is-esci { color: #fca5a5; }
.pan-voce.is-esci .sidebar-icon { color: #fca5a5; }
.pan-voce.is-esci:hover { background: rgba(239, 68, 68, .12); color: #fecaca; }
.pan-conteggio { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; background: #ef4444; color: #fff; font-size: .72rem; font-weight: 700; }
.pan-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 9999px; background: linear-gradient(135deg, #4f6bed, #7c3aed); color: #fff; font-size: .85rem; font-weight: 700; }
.pan-utente-nome { display: block; font-size: .88rem; font-weight: 600; color: #e5ebf5; line-height: 1.2; }
.pan-utente-ruolo { display: block; font-size: .72rem; color: var(--pan-barra-tenue); line-height: 1.2; }
.pan-barra select { background: var(--pan-barra-2); border: 1px solid rgba(255, 255, 255, .12); color: #e5ebf5; border-radius: 8px; }
.pan-impersona { border-radius: 12px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35); }
.sidebar-collapsed .pan-titoletto { display: none; }

/* ─── La testata e il piè di pagina ─────────────────────────────────── */
.pan-testata { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--pan-bordo); }
.pan-testata-data { font-size: .85rem; color: var(--pan-tenue); white-space: nowrap; }
.pan-testata-utente { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--pan-bordo); }
.pan-testata-utente .pan-avatar { width: 34px; height: 34px; }
.pan-testata-utente .pan-utente-nome { color: var(--pan-testo); }
.pan-testata-utente .pan-utente-ruolo { color: var(--pan-tenue); }
.pan-piede { border-top: 1px solid var(--pan-bordo); background: transparent; font-size: .82rem; color: var(--pan-tenue); }
.pan-piede a { color: var(--pan-tenue); text-decoration: none; }
.pan-piede a:hover { color: var(--pan-verde); }

/* ─── I messaggi dopo un'azione ─────────────────────────────────────── */
.pan-messaggio { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid; border-radius: 14px; font-size: .9rem; }
.pan-messaggio > svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.pan-messaggio.is-ok { background: var(--pan-verde-chiaro); border-color: #d1fae5; color: var(--pan-verde-2); }
.pan-messaggio.is-errore { background: #fef2f2; border-color: #fee2e2; color: #b91c1c; }
.pan-messaggio.is-attenzione { background: #fffbeb; border-color: #fef3c7; color: #b45309; }
.pan-messaggio.is-info { background: var(--pan-blu-chiaro); border-color: #dbeafe; color: var(--pan-blu-scuro); }

/* ─── 2. La pelle delle pagine non ancora rifatte ───────────────────── */
/* Titoli */
.pannello #main-content h1.text-2xl,
.pannello #main-content h1.text-3xl { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--pan-testo); }

/* Schede bianche */
.pannello #main-content .bg-white.rounded-lg.shadow-sm,
.pannello #main-content .bg-white.rounded-lg.shadow,
.pannello #main-content .bg-white.shadow-sm.rounded-lg,
.pannello #main-content .bg-white.rounded-xl,
.pannello #main-content .bg-white.border.rounded-lg { border-radius: 16px; border-color: var(--pan-bordo); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* Pulsanti principali: scuri come nello stile nuovo */
.pannello #main-content .bg-indigo-600,
.pannello #main-content .bg-blue-600,
.pannello #main-content .bg-indigo-500 { background-color: var(--pan-scuro); }
.pannello #main-content .bg-indigo-600:hover,
.pannello #main-content .bg-blue-600:hover,
.pannello #main-content .bg-indigo-500:hover { background-color: var(--pan-scuro-2); }
.pannello #main-content a.bg-indigo-600,
.pannello #main-content button.bg-indigo-600,
.pannello #main-content a.bg-blue-600,
.pannello #main-content button.bg-blue-600 { border-radius: 10px; }

/* Collegamenti e accenti indaco → verde e blu dello stile nuovo */
.pannello #main-content .text-indigo-600,
.pannello #main-content .text-indigo-700,
.pannello #main-content .text-blue-600 { color: var(--pan-verde); }
.pannello #main-content .hover\:text-indigo-900:hover,
.pannello #main-content .hover\:text-indigo-800:hover,
.pannello #main-content .hover\:text-indigo-700:hover { color: var(--pan-verde-2); }
.pannello #main-content .bg-indigo-50,
.pannello #main-content .bg-indigo-100 { background-color: var(--pan-blu-chiaro); }
.pannello #main-content .text-indigo-800,
.pannello #main-content .text-indigo-900 { color: var(--pan-blu-scuro); }
.pannello #main-content .focus\:ring-indigo-500:focus { --tw-ring-color: rgba(15, 23, 42, .15); }
.pannello #main-content .focus\:border-indigo-500:focus { border-color: var(--pan-testo-2); }

/* Campi */
.pannello #main-content input.border:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.pannello #main-content select.border,
.pannello #main-content textarea.border { border-color: var(--pan-bordo); border-radius: 10px; }
.pannello #main-content input[type="checkbox"],
.pannello #main-content input[type="radio"] { accent-color: var(--pan-verde); }

/* Tabelle */
.pannello #main-content thead.bg-gray-50,
.pannello #main-content thead tr.bg-gray-50 { background: #fff; }
.pannello #main-content th.uppercase { text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 600; color: var(--pan-tenue); }
.pannello #main-content .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.pannello #main-content .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--pan-riga); }
.pannello #main-content tbody tr.hover\:bg-gray-50:hover { background: #f8fafc; }

/* Etichette di stato rotonde */
.pannello #main-content span.rounded-full.text-xs { font-weight: 600; }

/* ─── Dashboard (dalla 1.2.409) ─────────────────────────────────────── */
.pan-rapido { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pan-rapido-voce { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--pan-bordo); border-radius: 12px; font-size: .88rem; font-weight: 600; color: var(--pan-testo); text-decoration: none; transition: border-color .15s, background .15s; }
.pan-rapido-voce:hover { border-color: var(--pan-testo-2); background: #f8fafc; }
.pan-rapido-voce .nol-tenue { font-size: .74rem; font-weight: 500; }
.pan-rapido-voce .sidebar-icon { width: 18px; height: 18px; }
.pan-avatar-grande { width: 52px; height: 52px; font-size: 1.2rem; }
.pan-avatar.is-piccolo { width: 30px; height: 30px; font-size: .75rem; }
.pan-elenco-link { display: grid; gap: 4px; }
.pan-elenco-link a { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .9rem; font-weight: 600; color: var(--pan-testo-2); text-decoration: none; }
.pan-elenco-link a:hover { color: var(--pan-verde); }
.pan-elenco-link .nol-icona { width: 18px; height: 18px; color: var(--pan-tenue); }
.pan-carica { display: flex; justify-content: center; padding-top: 14px; border-top: 1px solid var(--pan-riga); }
.pan-carica[hidden] { display: none; }
.pan-dettaglio { margin-top: 6px; max-width: 42rem; padding: 10px; overflow-x: auto; border-radius: 10px; background: #f8fafc; font-size: .75rem; color: var(--pan-testo-2); white-space: pre-wrap; word-break: break-all; }

/* ─── Elenchi (dalla 1.2.410): paginazione comune, barra della selezione multipla, righe apribili ─── */
.pan-pagine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--pan-riga); }
.pan-pagine-conto { font-size: .85rem; color: var(--pan-tenue); }
.pan-pagine-conto strong { color: var(--pan-testo); }
.pan-pagine-elenco { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pan-pagine-elenco a, .pan-pagine-elenco span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--pan-bordo); border-radius: 10px; background: #fff; font-size: .85rem; font-weight: 600; color: var(--pan-testo-2); text-decoration: none; }
.pan-pagine-elenco a:hover { background: #f8fafc; border-color: var(--pan-testo-2); }
.pan-pagine-elenco .is-attuale { background: var(--pan-scuro); border-color: var(--pan-scuro); color: #fff; }
.pan-pagine-elenco .is-spenta { color: #cbd5e1; }
.pan-selezione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border: 1px solid #bfdbfe; border-radius: 14px; background: var(--pan-blu-chiaro); font-size: .9rem; color: var(--pan-blu-scuro); }
.pan-selezione.hidden { display: none; }
.nol-tabella tr.is-cliccabile { cursor: pointer; }
.nol-kpi-numero { white-space: nowrap; }
.pan-ordina { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.pan-ordina:hover { color: var(--pan-testo); }
.pan-ordina span { font-size: .65rem; color: var(--pan-testo); }
.pan-maniglia { width: 32px; cursor: move; color: #cbd5e1; }
.pan-maniglia:hover { color: var(--pan-tenue); }
.pan-maniglia .nol-icona { width: 16px; height: 16px; }
.pan-selezione.is-dentro { margin: 12px 16px 0; }

/* ─── Contenuti (dalla 1.2.413): ricerca al volo, come appare su Google, blocchi della pagina ─── */
.pan-cerca-elenco { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pan-cerca-elenco .nol-campo.is-largo { flex: 1 1 220px; }
.nol-tabella th.is-centro, .nol-tabella td.is-centro { text-align: center; }
.nol-tabella tr[hidden] { display: none; }
.pan-serp { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--pan-riga); border-radius: 12px; background: #fff; }
.pan-serp-titolo { font-size: 1rem; line-height: 1.3; color: #1a0dab; }
.pan-serp-testo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; line-height: 1.45; color: var(--pan-testo-2); }
.pan-blocchi { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pan-blocchi li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--pan-riga); border-radius: 12px; font-size: .88rem; }
.pan-blocchi li > .min-w-0 { flex: 1; }
.pan-kpi-link { transition: border-color .15s, box-shadow .15s; }
.pan-kpi-link:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.pan-kpi-link.is-scelto { border-color: var(--pan-scuro); box-shadow: 0 0 0 1px var(--pan-scuro); }
.pan-copertina { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--pan-riga); }

/* ─── Pagine con modulo a sinistra ed elenco a destra (Tag, dalla 1.2.416) ─── */
.pan-due-colonne { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1024px) { .pan-due-colonne { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); } .pan-due-colonne.is-una { grid-template-columns: minmax(0, 1fr); } }
.pan-lingue .lang-selector { display: flex; flex-wrap: wrap; gap: 6px; }
.pan-lingue .lang-selector-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--pan-bordo); border-radius: 10px; background: #fff; font-size: .82rem; font-weight: 600; color: var(--pan-testo-2); cursor: pointer; }
.pan-lingue .lang-selector-btn:hover { background: #f8fafc; }
.pan-lingue .lang-selector-btn.active { background: var(--pan-scuro); border-color: var(--pan-scuro); color: #fff; }
.pan-lingue .lang-iso { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 6px; background: var(--pan-riga); font-size: .65rem; font-weight: 700; color: var(--pan-testo-2); }
.pan-lingue .lang-selector-btn.active .lang-iso { background: rgba(255, 255, 255, .2); color: #fff; }
.pan-lingue .lang-panel { display: none; }
.pan-lingue .lang-panel.active { display: block; }
.pan-albero { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pan-albero li { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-left: calc(var(--livello, 0) * 18px); padding: 8px 10px; border: 1px solid var(--pan-riga); border-left: 3px solid var(--pan-bordo); border-radius: 10px; font-size: .88rem; }
.pan-albero li.is-spenta { opacity: .55; }
.nol-btn.is-copiato { border-color: var(--nol-verde-medio); background: var(--nol-verde-chiaro); color: var(--nol-verde-2); }
.pan-una-riga { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Libreria media (dalla 1.2.420) ─── */
.pan-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.pan-media-scheda { position: relative; overflow: hidden; border: 1px solid var(--pan-bordo); border-radius: 16px; background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.pan-media-scheda:hover, .pan-media-scheda:focus-visible { border-color: #cbd5e1; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); outline: none; }
.pan-media-scheda.is-scelta { border-color: var(--pan-verde); box-shadow: 0 0 0 2px var(--pan-verde); }
.pan-media-casella { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--pan-bordo); border-radius: 8px; background: rgba(255, 255, 255, .92); cursor: pointer; }
.pan-media-foto { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f1f5f9; }
.pan-media-foto img { width: 100%; height: 100%; object-fit: cover; }
.pan-media-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--pan-tenue); }
.pan-media-file .nol-icona { width: 36px; height: 36px; }
.pan-media-azioni { position: absolute; right: 8px; bottom: 8px; display: inline-flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.pan-media-scheda:hover .pan-media-azioni, .pan-media-scheda:focus-within .pan-media-azioni { opacity: 1; }
@media (hover: none) { .pan-media-azioni { opacity: 1; } }
.pan-media-dati { padding: 10px 12px 12px; font-size: .85rem; }
.pan-selezione-ferma { position: sticky; top: 72px; z-index: 20; box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
.pan-media-grande { display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--pan-riga); border-radius: 14px; background: #f1f5f9; }
.pan-media-grande img { display: block; max-width: 100%; max-height: 320px; object-fit: contain; }
.pan-media-grande.is-file { flex-direction: column; gap: 8px; height: 180px; font-weight: 700; color: var(--pan-tenue); text-decoration: none; }
.pan-media-grande.is-file .nol-icona { width: 44px; height: 44px; }
.pan-media-scheda:has(.media-bulk-check:checked) { border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }

/* ─── Schede in griglia (Profili, dalla 1.2.421) ─── */
.pan-avatar.is-scuro { background: linear-gradient(135deg, #0f172a, #334155); }
.pan-schede-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pan-scheda { display: flex; flex-direction: column; }
.pan-scheda-testa { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; }
.pan-scheda-testa > .min-w-0 { flex: 1; }
.pan-scheda-numeri { padding: 16px 20px; }
.pan-scheda-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--pan-riga); }
.pan-iso { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pan-riga); font-size: .9rem; font-weight: 800; letter-spacing: .04em; color: var(--pan-testo-2); }
.pan-scheda.is-predefinita { border-color: #fcd34d; box-shadow: 0 0 0 1px #fde68a; }
.pan-scheda.is-predefinita .pan-iso { background: #fef3c7; color: #92400e; }

/* ─── Moduli dentro le tabelle (Redirect, dalla 1.2.423) ─── */
.nol-card-testa { flex-wrap: wrap; }
.nol-input.is-piccolo { padding: 6px 10px; border-radius: 9px; font-size: .85rem; }
.pan-w-56 { width: 14rem; max-width: 100%; }
.pan-w-64 { width: 16rem; max-width: 100%; }
.pan-w-auto { width: auto; }
.pan-larga { max-width: 28rem; }
.pan-stretta { max-width: 20rem; }
.pan-spunta { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--pan-testo-2); white-space: nowrap; }
.pan-piede-destra { display: flex; justify-content: flex-end; border-top: 1px solid var(--pan-riga); }
.pan-nuovo-redirect { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(160px, 220px) auto; align-items: end; gap: 12px; background: #f8fafc; border-top: 1px solid var(--pan-riga); border-bottom: 1px solid var(--pan-riga); }
@media (max-width: 700px) { .pan-nuovo-redirect { grid-template-columns: minmax(0, 1fr); } }

/* ─── Aggiornamenti (dalla 1.2.424) ─── */
.pan-stretto { max-width: 980px; }
.pan-bordo-verde { border-color: #a7f3d0; box-shadow: 0 0 0 1px #d1fae5; }
.pan-versioni { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pan-versioni li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--pan-riga); }
.pan-versioni li:last-child { padding-bottom: 0; border-bottom: 0; }
.pan-piede-azione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--pan-riga); }
.pan-elenco-mono { display: grid; gap: 2px; margin: 0; padding-left: 18px; list-style: disc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.pan-registro { max-height: 420px; overflow: auto; padding: 14px 16px; border-radius: 12px; background: #0f172a; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; line-height: 1.6; }

/* ─── Pagine di accesso (dalla 1.2.425) ─── */
body.pan-accesso { min-height: 100vh; min-height: 100dvh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: radial-gradient(1200px 600px at 10% -10%, rgba(16, 185, 129, .18), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(99, 102, 241, .22), transparent 60%), #0b1220; color: var(--pan-testo); }
.pan-accesso-colonna { width: 100%; max-width: 420px; }
.pan-accesso-marchio { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.pan-accesso-marchio img { max-height: 56px; width: auto; object-fit: contain; }
.pan-accesso-logo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #10b981, #047857); color: #fff; font-size: 1.3rem; font-weight: 800; }
.pan-accesso-nome { font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.pan-accesso-nome span { margin-left: 4px; padding: 2px 7px; border-radius: 6px; background: rgba(16, 185, 129, .18); color: #6ee7b7; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.pan-accesso-scheda { padding: 30px 28px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.pan-accesso-scheda.is-centro { text-align: center; }
.pan-accesso-titolo { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--pan-testo); }
.pan-accesso-sotto { margin: 4px 0 22px; font-size: .9rem; color: var(--pan-tenue); }
.pan-accesso-password { position: relative; }
.pan-accesso-password .nol-input { padding-right: 44px; }
.pan-accesso-occhio { position: absolute; top: 50%; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: var(--pan-tenue); cursor: pointer; }
.pan-accesso-occhio:hover, .pan-accesso-occhio.is-attivo { background: var(--pan-riga); color: var(--pan-testo); }
.pan-accesso-occhio svg { width: 18px; height: 18px; }
.pan-accesso-invia { width: 100%; justify-content: center; padding-top: 12px; padding-bottom: 12px; font-size: .95rem; }
.pan-accesso-codice { text-align: center; font-size: 1.6rem; letter-spacing: .4em; }
.pan-accesso-link { margin: 18px 0 0; text-align: center; font-size: .88rem; }
.pan-accesso-link a { color: var(--pan-tenue); text-decoration: none; }
.pan-accesso-link a:hover { color: var(--pan-verde); }
.pan-accesso-icona { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 9999px; background: var(--pan-riga); color: var(--pan-testo-2); }
.pan-accesso-icona svg { width: 26px; height: 26px; }
.pan-accesso-piede { margin: 22px 0 0; text-align: center; font-size: .75rem; color: #64748b; }
.pan-accesso-piede a { color: #94a3b8; text-decoration: none; }
.pan-accesso .pan-messaggio { margin-bottom: 14px; }

/* ─── Impostazioni a spunta e punti elenco (dalla 1.2.426) ─── */
.pan-scelta { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--pan-bordo); border-radius: 12px; cursor: pointer; font-size: .9rem; }
.pan-scelta:hover { background: #f8fafc; }
.pan-scelta input { margin-top: 3px; }
.pan-scelta:has(input:checked) { border-color: #a7f3d0; background: var(--pan-verde-chiaro); }
.pan-punti { display: grid; gap: 10px; margin: 0; padding-left: 18px; list-style: disc; font-size: .88rem; line-height: 1.5; color: var(--pan-testo-2); }
.pan-collegamento { color: var(--pan-verde); text-decoration: none; }
.pan-collegamento:hover { text-decoration: underline; }

/* ─── Messaggi del ticket nel riepilogo (dalla 1.2.427) ─── */
.pan-messaggi { display: grid; gap: 10px; }
.pan-messaggio-ticket { padding: 10px 12px; border: 1px solid var(--pan-bordo); border-radius: 12px; background: #fff; font-size: .86rem; }
.pan-messaggio-ticket header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: .78rem; }
.pan-messaggio-ticket p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--pan-testo-2); }
.pan-messaggio-ticket.is-staff { background: var(--pan-blu-chiaro); border-color: #dbeafe; }
.pan-messaggio-ticket.is-nota { background: #fffbeb; border-color: #fde68a; }
.pan-barretta { display: block; width: 80px; height: 5px; margin: 4px 0 0 auto; overflow: hidden; border-radius: 9999px; background: var(--pan-riga); }
.pan-barretta > span { display: block; height: 100%; border-radius: inherit; background: var(--pan-verde); }
.pan-barretta.is-ambra > span { background: #d97706; }
.pan-barretta.is-rossa > span { background: #dc2626; }
.nol-pastiglia.is-piccola { padding: 2px 8px; font-size: .72rem; }
.pan-pastiglia-pulsante { border: 1px solid transparent; cursor: pointer; }
.pan-pastiglia-pulsante:hover { filter: brightness(.96); border-color: var(--pan-bordo); }
.pan-iso.is-piccolo { width: 34px; height: 34px; border-radius: 10px; font-size: .75rem; }

/* ─── Campi affiancati nei moduli (dalla 1.2.434) ─── */
.pan-campi-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.pan-campi-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
@media (max-width: 900px) { .pan-campi-3, .pan-campi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pan-campi-3, .pan-campi-4 { grid-template-columns: minmax(0, 1fr); } }
.pan-spunta-in-riga { padding-bottom: 10px; }
.pan-riga-sopra { border-top: 1px solid var(--pan-riga); }
.pan-tratta-nuova { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto minmax(120px, auto); align-items: end; gap: 12px; }
.pan-tratta-nuova .nol-spunta { padding-bottom: 10px; white-space: nowrap; }
@media (max-width: 1100px) { .pan-tratta-nuova { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pan-tratta-nuova { grid-template-columns: minmax(0, 1fr); } }
.pan-campo-importo { width: 120px; margin-left: auto; }
.pan-campo-importo input { width: 100%; min-width: 0; text-align: right; }
.pan-danni { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pan-danni li { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--pan-riga); font-size: .88rem; }
.pan-danni li:last-child { padding-bottom: 0; border-bottom: 0; }
.nol-percorso-card > summary { list-style: none; display: flex; align-items: center; gap: 8px; }
.nol-percorso-card > summary::-webkit-details-marker { display: none; }
.nol-percorso-card > summary .nol-icona { width: 18px; height: 18px; color: var(--pan-tenue); }

/* ─── Banco: consegna e rientro (dalla 1.2.437) ─── */
.pan-banco-breve { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pan-banco-breve > div { min-width: 0; }
.pan-banco-breve .nol-etichetta { display: block; margin-bottom: 2px; }
@media (max-width: 900px) { .pan-banco-breve { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pan-addebiti { margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--pan-riga); }
.pan-addebiti-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
@media (max-width: 700px) { .pan-addebiti-griglia { grid-template-columns: minmax(0, 1fr); } }
.pan-addebito { padding: 12px 14px; border: 1px solid var(--pan-bordo); border-radius: 12px; background: #fff; }
.pan-addebito:has(input[type="checkbox"]:checked) { border-color: #a7f3d0; background: var(--pan-verde-chiaro); }
.pan-campo-importo.is-sinistra { margin-left: 0; }
.pan-elenco-numerato { margin: 0 0 8px; padding-left: 20px; list-style: decimal; font-size: .88rem; color: var(--pan-testo-2); }
.nol-btn.pan-btn-rosso { background: #b91c1c; border-color: #b91c1c; color: #fff; } .nol-btn.pan-btn-rosso:hover { background: #991b1b; }
.pan-guidatore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .pan-guidatore { grid-template-columns: minmax(0, 1fr); } }
.nol-input.pan-proposto { border-color: #a5b4fc; color: #4338ca; }
.pan-nota-cliente { padding: 8px 10px; border-left: 3px solid var(--pan-bordo); background: #f8fafc; border-radius: 6px; color: var(--pan-testo-2); }
.pan-barretta.is-larga { width: 100%; max-width: 160px; margin: 6px 0 0; }
.pan-giorno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pan-giorno .nol-barra-ricerca { width: auto; }
.pan-per-metodo { display: grid; gap: 10px; }
.pan-per-metodo > div { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) minmax(110px, auto); align-items: center; gap: 14px; font-size: .88rem; }
.pan-barretta.is-piena { max-width: none; margin: 0; height: 8px; }
.pan-esempio { margin: 6px 0 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--pan-riga); border-radius: 10px; background: #f8fafc; font-size: .78rem; white-space: pre-wrap; color: var(--pan-testo-2); }
.pan-scheda-link { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.pan-scheda-link:hover { border-color: #cbd5e1; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.pan-scheda-link .pan-collegamento { display: inline-flex; align-items: center; gap: 4px; }
.pan-scheda-link .pan-collegamento .nol-icona { width: 16px; height: 16px; }
.pan-fasce { display: grid; gap: 8px; }
.pan-fascia { display: grid; grid-template-columns: minmax(110px, 1.4fr) minmax(90px, 1fr) auto minmax(90px, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--pan-bordo); border-radius: 12px; background: #f8fafc; }
@media (max-width: 640px) { .pan-fascia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pan-fascia > .nol-tenue { display: none; } }
.pan-vuoto-tratteggiato { padding: 24px 12px; border: 2px dashed var(--pan-bordo); border-radius: 12px; text-align: center; font-size: .88rem; color: var(--pan-tenue); }

/* ─── Configurazione (dalla 1.2.445) ─── */
.pan-config { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1024px) { .pan-config { grid-template-columns: minmax(0, 1fr); } }
.pan-config-sezioni { padding: 14px; }
.pan-config-sezioni .nol-etichetta { display: block; padding: 0 8px 6px; }
.pan-config-sezioni ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pan-config-sezioni a { display: flex; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: .88rem; font-weight: 600; color: var(--pan-testo-2); text-decoration: none; }
.pan-config-sezioni a:hover { background: #f8fafc; }
.pan-config-sezioni a.is-scelta { background: var(--pan-scuro); color: #fff; }
@media (max-width: 1024px) { .pan-config-sezioni ul { display: flex; flex-wrap: wrap; gap: 6px; } .pan-config-sezioni a { border: 1px solid var(--pan-bordo); } }
.pan-config-riga { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: 8px 24px; border-top: 1px solid var(--pan-riga); }
.pan-config-riga:first-of-type { border-top: 0; }
@media (max-width: 700px) { .pan-config-riga { grid-template-columns: minmax(0, 1fr); } }
.pan-colore { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--pan-bordo); border-radius: 10px; background: #fff; cursor: pointer; }
.pan-config-anteprima { height: 64px; border: 1px solid var(--pan-bordo); border-radius: 10px; }
.pan-moduli { display: grid; gap: 12px; }
.pan-modulo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--pan-bordo); border-radius: 14px; }
.pan-modulo.is-attivo { border-color: #a7f3d0; background: var(--pan-verde-chiaro); }

/* ─── Manutenzione (dalla 1.2.446): i suoi componenti nello stile comune ─── */
.pannello .pan-manutenzione .section-card { border: 1px solid var(--pan-bordo); border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.pannello .pan-manutenzione .status-badge { gap: 6px; padding: 6px 12px; font-size: .78rem; text-transform: none; letter-spacing: 0; }
.pannello .pan-manutenzione .status-badge .nol-icona { width: 15px; height: 15px; }
.pannello .pan-manutenzione .status-badge.online { background: var(--pan-verde-chiaro); color: var(--pan-verde-2); border: 1px solid #d1fae5; }
.pannello .pan-manutenzione .toggle-switch { width: 46px; height: 26px; background-color: #e2e8f0; }
.pannello .pan-manutenzione .toggle-switch.active { background-color: var(--pan-verde); }
.pannello .pan-manutenzione .toggle-switch .toggle-dot { top: 3px; left: 3px; width: 20px; height: 20px; }
.pannello .pan-manutenzione .toggle-switch.active .toggle-dot { transform: translateX(20px); }
.pan-riquadro { padding: 20px; }

/* ─── Template (dalla 1.2.449): linguette e interruttore nello stile comune ─── */
.pannello .template-tabs { gap: 4px; border-bottom: 1px solid var(--pan-bordo); }
.pannello .template-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-weight: 600; color: var(--pan-tenue); }
.pannello .template-tabs a:hover { color: var(--pan-testo); }
.pannello .template-tabs a.active { color: var(--pan-testo); border-bottom-color: var(--pan-verde); }
.pannello .color-swatch-btn { border-radius: 12px; border-color: var(--pan-bordo); }
.pannello .color-hex-input { border-color: var(--pan-bordo); border-radius: 10px; }

/* ─── Testata del dettaglio ordine (dalla 1.2.451) ─── */
.pan-ordine-testa .nol-testa.mb-0 { margin-bottom: 0; }
.pan-ordine-totale { padding: 6px 14px; border-radius: 9999px; background: var(--pan-scuro); color: #fff; font-size: .95rem; font-weight: 800; white-space: nowrap; }
.pan-ordine-testa .nol-passi { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--pan-riga); }
.pan-password { max-width: 560px; }
.pan-requisiti { padding: 10px 12px; border: 1px solid var(--pan-riga); border-radius: 12px; background: #f8fafc; }
.pan-requisiti ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: .8rem; }