/* =====================================================================
   Portale ASV - Greenkar
   Design token dalla sezione 7 del documento di analisi (valori esatti letti dal portale attuale).
   Nessuna libreria di componenti: solo questo foglio di stile e gli stili dei singoli componenti.
   ===================================================================== */

@font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap; src: url("lib/manrope/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-style: normal; font-display: swap; src: url("lib/manrope/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("lib/manrope/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("lib/manrope/manrope-latin-700-normal.woff2") format("woff2"); }

:root {
    /* Palette */
    --gk-primary: #cddb70;          /* green4: menu attivo, link, pulsante primario */
    --gk-primary-hover: #c1d05c;
    --gk-green-title: #94c122;      /* green3: titoli news */
    --gk-green-state: #b6c83f;      /* earls-green: badge Spedito / concluso */
    --gk-green1: #8fc685;
    --gk-green2: #b3cd33;
    --gk-green5: #90bc3b;
    --gk-lavanda: #6a6af6;
    --gk-lavanda-hover: #5656e6;
    --gk-text: #212529;
    --gk-bg: #ededef;               /* gray2: sfondo area contenuti, filtri, pill VIN */
    --gk-sidebar: #ffffff;          /* sidebar bianca (layout), gray1 #f6f6f6 per gli elementi interni */
    --gk-gray1: #f6f6f6;
    --gk-header: #f8f9fa;
    --gk-card: #ffffff;
    --gk-news: #dedede;             /* gray3: box news */
    --gk-gray4: #8c8c8b;
    --gk-gray5: #656566;
    --gk-gray6: #555555;
    --gk-red: #ff0000;
    --gk-border: #ced4da;

    /* Colori degli stati ordine (badge a pillola) */
    --gk-stato-attesa: #FFA512;     /* In attesa di pagamento */
    --gk-stato-pagato: #946DC5;     /* Pagato in attesa di spedizione */
    --gk-stato-spedito: #B6C83F;    /* Spedito / concluso */
    --gk-stato-annullato: #FF0000;  /* Annullato */
    --gk-stato-dca: #487EFE;        /* Emessa DCA / documenti emessi */
    --gk-stato-verifica: #e0a100;
    --gk-stato-neutro: #8c8c8b;

    /* Forme e tipografia */
    --gk-radius: 16px;
    --gk-radius-pill: 5rem;
    --gk-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --gk-fs-base: 0.9rem;           /* 14.4px */
    --gk-fs-title: 25.2px;
    --gk-fs-card-title: 14.4px;
    --gk-fs-badge: 10.8px;
    --gk-fs-filter: 12.6px;
    --gk-sidebar-w: 248px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--gk-font);
    font-size: var(--gk-fs-base);
    line-height: 1.5;
    color: var(--gk-text);
    background: var(--gk-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: #6f7d14; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--gk-fs-title); font-weight: 500; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
small, .text-small { font-size: .8rem; }
.muted { color: var(--gk-gray5); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.bi { line-height: 1; vertical-align: -.125em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------------------------------------------------------------- layout */

.app { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--gk-sidebar-w);
    background: var(--gk-sidebar); display: flex; flex-direction: column; z-index: 30;
    border-right: 1px solid #e6e6e8;
}
.sidebar .logo { display: block; padding: 22px 26px 18px; }
.sidebar .logo img { width: 150px; height: auto; display: block; }
.sidebar nav { flex: 1; overflow-y: auto; padding: 6px 14px 14px; }
.sidebar .gruppo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gk-gray4); margin: 16px 12px 6px; }
.sidebar nav a {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 2px 0;
    color: var(--gk-gray6); border-radius: var(--gk-radius); font-weight: 500; text-decoration: none;
}
.sidebar nav a:hover { background: var(--gk-gray1); }
.sidebar nav a.active { background: var(--gk-primary); color: #fff; }
.sidebar nav a .bi { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar nav a .conta { margin-left: auto; background: var(--gk-lavanda); color: #fff; font-size: 11px; font-weight: 700; border-radius: var(--gk-radius-pill); padding: 1px 8px; }
.sidebar nav a.active .conta { background: #fff; color: var(--gk-lavanda); }
.sidebar .piede { padding: 14px 18px 18px; border-top: 1px solid #efefef; font-size: 12.5px; }
.sidebar .contatto { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.sidebar .contatto .cerchio { width: 34px; height: 34px; border-radius: 50%; background: var(--gk-lavanda); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.sidebar .contatto a { color: var(--gk-lavanda); }
.sidebar .piede .link-utente { display: flex; flex-direction: column; gap: 2px; background: var(--gk-gray1); border-radius: var(--gk-radius); padding: 8px 12px; }
.sidebar .piede .link-utente a, .sidebar .piede .link-utente button { color: var(--gk-gray6); background: none; border: 0; padding: 4px 0; text-align: left; font: inherit; cursor: pointer; display: flex; gap: 8px; align-items: center; }

.main { flex: 1; margin-left: var(--gk-sidebar-w); min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--gk-header); display: flex; align-items: center; gap: 16px;
    padding: 14px 32px; min-height: 72px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #ececec;
}
.topbar .titolo { font-size: var(--gk-fs-title); font-weight: 500; display: flex; align-items: center; gap: 10px; margin: 0; white-space: nowrap; }
.topbar .spazio { flex: 1; }
.topbar .ricerca { position: relative; width: min(360px, 40vw); }
.topbar .ricerca input { padding-left: 36px; background: #fff; }
.topbar .ricerca .bi { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gk-gray4); }
.topbar .utente { text-align: right; line-height: 1.2; }
.topbar .utente strong { display: block; font-size: 13px; }
.topbar .utente span { font-size: 12px; color: var(--gk-gray5); }
.topbar .logo-header { height: 38px; border-left: 1px solid #ddd; padding-left: 14px; }
.topbar .menu-mobile { display: none; }
.badge-test { background: #fff3cd; color: #8a6100; border: 1px solid #f0d58a; font-size: 11px; font-weight: 700; border-radius: var(--gk-radius-pill); padding: 2px 10px; letter-spacing: .04em; white-space: nowrap; }

.contenuto { padding: 28px 32px 48px; max-width: 1480px; width: 100%; }

@media (max-width: 960px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.15); }
    .app.menu-aperto .sidebar { transform: none; }
    .main { margin-left: 0; }
    .topbar { padding: 12px 16px; min-height: 60px; }
    .topbar .menu-mobile { display: inline-flex; }
    .topbar .ricerca, .topbar .logo-header, .topbar .utente span { display: none; }
    .topbar .titolo { font-size: 19px; }
    .contenuto { padding: 16px; }
}

/* ---------------------------------------------------------------- card e griglie */

.card { background: var(--gk-card); border-radius: var(--gk-radius); padding: 22px 24px; }
.card + .card { margin-top: 20px; }
.card-titolo { font-size: var(--gk-fs-card-title); font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.card-titolo .azioni { margin-left: auto; display: flex; gap: 8px; }
.card.compatta { padding: 16px 18px; }
.card.bordo { border: 1px solid #d9e2a0; }

.griglia { display: grid; gap: 20px; }
.griglia.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
@media (max-width: 1200px) { .griglia.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .griglia.c2, .griglia.c3, .griglia.c4 { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } }

.riga { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.riga.tra { justify-content: space-between; }
.pila { display: flex; flex-direction: column; gap: 12px; }
.mt { margin-top: 20px; } .mb { margin-bottom: 20px; } .mt-s { margin-top: 10px; } .mb-s { margin-bottom: 10px; }

/* Widget numerici della dashboard: il numero porta sempre alla lista filtrata. */
.kpi { display: block; background: var(--gk-card); border-radius: var(--gk-radius); padding: 18px 20px; color: inherit; text-decoration: none; transition: transform .08s, box-shadow .08s; }
.kpi:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.kpi .etichetta { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gk-gray5); display: flex; align-items: center; gap: 6px; }
.kpi .numero { font-size: 34px; font-weight: 700; line-height: 1.1; margin: 8px 0 4px; }
.kpi .nota { font-size: 12.5px; color: var(--gk-gray5); }
.kpi.attenzione .numero { color: #c26a00; }
.kpi.critico .numero { color: #d40000; }
.kpi.zero .numero { color: var(--gk-gray4); }
.kpi .pallino { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--gk-primary); }

/* ---------------------------------------------------------------- pulsanti (a pillola) */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--gk-radius-pill); padding: 6px 24px; min-height: 36px;
    font: inherit; font-weight: 600; border: 1px solid transparent; cursor: pointer;
    text-decoration: none; white-space: nowrap; color: var(--gk-text); background: var(--gk-bg);
}
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--gk-primary); color: #fff; }
.btn-primary:hover { background: var(--gk-primary-hover); }
.btn-lavanda { background: var(--gk-lavanda); color: #fff; }
.btn-lavanda:hover { background: var(--gk-lavanda-hover); }
.btn-grigio { background: var(--gk-bg); color: var(--gk-gray5); }
.btn-bordo { background: transparent; border-color: var(--gk-primary); color: #6f7d14; }
.btn-pericolo { background: #fff; border-color: #f0b3b3; color: #b30000; }
.btn-grande { min-height: 48px; padding: 10px 30px; font-size: 1rem; }
.btn-piccolo { min-height: 28px; padding: 3px 14px; font-size: 12.5px; }
.btn-icona { padding: 6px; min-width: 36px; }
.btn-link { background: none; border: 0; padding: 0; min-height: 0; color: #6f7d14; font-weight: 600; }

/* ---------------------------------------------------------------- badge */

.badge {
    display: inline-flex; align-items: center; gap: 4px; border-radius: var(--gk-radius-pill);
    padding: 3px 10px; font-size: var(--gk-fs-badge); font-weight: 700; color: #fff; white-space: nowrap; line-height: 1.4;
}
.badge.attesa { background: var(--gk-stato-attesa); }
.badge.pagato { background: var(--gk-stato-pagato); }
.badge.spedito { background: var(--gk-stato-spedito); }
.badge.annullato { background: var(--gk-stato-annullato); }
.badge.dca { background: var(--gk-stato-dca); }
.badge.verifica { background: var(--gk-stato-verifica); }
.badge.neutro { background: var(--gk-stato-neutro); }
.badge.chiaro { background: var(--gk-bg); color: var(--gk-gray6); }
.badge.attivo { background: var(--gk-green-state); }
.badge.non-attivo { background: var(--gk-stato-attesa); }
.pill-vin { background: var(--gk-bg); border-radius: var(--gk-radius-pill); padding: 2px 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; white-space: nowrap; }

/* ---------------------------------------------------------------- form */

label { font-weight: 600; font-size: 13px; display: block; margin-bottom: 4px; }
.campo { margin-bottom: 14px; }
.campo .aiuto { font-size: 12px; color: var(--gk-gray5); margin-top: 4px; }
.campo .errore, .errore-campo { font-size: 12.5px; color: #c00; margin-top: 4px; }
input:not([type]), input[type=datetime-local], input[type=url], input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], select, textarea, .input {
    width: 100%; font: inherit; color: var(--gk-text); background: #fff;
    border: 1px solid var(--gk-border); border-radius: var(--gk-radius); padding: 8px 14px; min-height: 38px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #000; box-shadow: none; }
input.invalid, select.invalid, textarea.invalid { border-color: #d33; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: #9fae3c; vertical-align: -3px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: var(--gk-fs-base); margin-bottom: 10px; cursor: pointer; }
.check input { margin-top: 2px; flex-shrink: 0; }
.form-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-griglia .intero { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-griglia { grid-template-columns: 1fr; } }
.validation-message { color: #c00; font-size: 12.5px; }
.validation-errors { color: #c00; margin: 0 0 12px; padding-left: 18px; }

/* Icona "i" dell'aiuto contestuale */
.aiuto-icona { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gk-bg); color: var(--gk-gray5); font-size: 11px; cursor: help; border: 0; margin-left: 4px; vertical-align: 1px; padding: 0; }
.aiuto-icona:hover { background: var(--gk-lavanda); color: #fff; }

/* ---------------------------------------------------------------- tabelle */

.tabella-wrap { overflow-x: auto; }
table.tabella { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabella th { text-align: left; font-size: 12px; font-weight: 700; color: var(--gk-gray6); padding: 10px 12px; border-bottom: 1px solid #eee; white-space: nowrap; }
.tabella td { padding: 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.tabella tbody tr:hover { background: #fafbf3; }
.tabella tr.cliccabile { cursor: pointer; }
.tabella .filtri th { padding-top: 0; }
.tabella .filtri input, .tabella .filtri select { background: var(--gk-bg); border-color: transparent; font-size: var(--gk-fs-filter); min-height: 30px; padding: 4px 12px; }
.tabella td.azioni { white-space: nowrap; text-align: right; }
.tabella td.azioni a, .tabella td.azioni button { color: var(--gk-gray6); }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella tr.selezionata { background: #f5f8e3; }
.paginazione { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; font-size: 13px; color: var(--gk-gray5); }

/* Barra filtri sopra le liste */
.filtri-barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtri-barra .campo { margin: 0; min-width: 160px; }
.filtri-barra input, .filtri-barra select { background: var(--gk-bg); border-color: transparent; font-size: var(--gk-fs-filter); }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--gk-radius-pill); background: var(--gk-bg); padding: 5px 14px; font-size: 12.5px; font-weight: 600; color: var(--gk-gray6); border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.chip.attivo { background: #f2f6d6; border-color: var(--gk-primary); color: #5e6a0e; }
.chip .conta { background: #fff; border-radius: var(--gk-radius-pill); padding: 0 7px; font-size: 11px; }

/* ---------------------------------------------------------------- avvisi */

.avviso { border-radius: var(--gk-radius); padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.avviso .bi { font-size: 1.15rem; margin-top: 1px; }
.avviso.info { background: #eef0ff; color: #2f2f8f; }
.avviso.ok { background: #f2f7dc; color: #4d5a0b; }
.avviso.attenzione { background: #fff4dc; color: #7a4d00; }
.avviso.errore { background: #ffe8e8; color: #8f1010; }
.avviso.test { background: #fff8e1; color: #6b5200; border: 1px dashed #e5c05c; }
.avviso p:last-child { margin-bottom: 0; }

.vuoto { text-align: center; padding: 26px 16px; color: var(--gk-gray5); }
.vuoto .bi { font-size: 28px; display: block; margin-bottom: 6px; color: var(--gk-green-state); }

/* ---------------------------------------------------------------- modali */

.modale-sfondo { position: fixed; inset: 0; background: rgba(20, 22, 10, .45); z-index: 100; display: grid; place-items: center; padding: 16px; }
.modale { background: #fff; border-radius: var(--gk-radius); width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modale.larga { width: min(1000px, 100%); }
.modale h2 { font-size: 1.2rem; }
.modale .piede { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

/* Anteprima documenti nel browser */
.anteprima { width: 100%; height: 72vh; border: 0; border-radius: 10px; background: var(--gk-bg); }
.anteprima-img { max-width: 100%; max-height: 72vh; display: block; margin: 0 auto; border-radius: 10px; }

/* ---------------------------------------------------------------- avanzamento */

.avanzamento { display: flex; gap: 0; align-items: center; }
.avanzamento .passo { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gk-gray4); white-space: nowrap; }
.avanzamento .passo .punto { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gk-bg); color: var(--gk-gray4); font-size: 12px; }
.avanzamento .passo.fatto { color: var(--gk-text); }
.avanzamento .passo.fatto .punto { background: var(--gk-green-state); color: #fff; }
.avanzamento .passo.corrente .punto { background: var(--gk-lavanda); color: #fff; }
.avanzamento .linea { flex: 1; height: 2px; background: var(--gk-bg); min-width: 18px; margin: 0 6px; }
.avanzamento .linea.fatta { background: var(--gk-green-state); }

.barra { height: 8px; background: var(--gk-bg); border-radius: 8px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--gk-lavanda); }

/* Wizard */
.passi-wizard { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.passi-wizard .p { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--gk-radius-pill); background: #fff; color: var(--gk-gray5); font-weight: 600; font-size: 13px; }
.passi-wizard .p .n { width: 22px; height: 22px; border-radius: 50%; background: var(--gk-bg); display: grid; place-items: center; font-size: 12px; }
.passi-wizard .p.attivo { background: var(--gk-primary); color: #fff; }
.passi-wizard .p.attivo .n { background: #fff; color: #6f7d14; }
.passi-wizard .p.fatto .n { background: var(--gk-green-state); color: #fff; }

.scelta { display: block; border: 2px solid transparent; background: #fff; border-radius: var(--gk-radius); padding: 18px 20px; cursor: pointer; color: inherit; text-decoration: none; }
.scelta:hover { border-color: #e4ebb8; text-decoration: none; }
.scelta.selezionata { border-color: var(--gk-primary); background: #fbfdf1; }
.scelta .bi { font-size: 24px; color: var(--gk-green-title); }
.scelta strong { display: block; font-size: 15px; margin: 6px 0 2px; }

/* News */
.news-box { background: var(--gk-news); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.news-box .titolo { color: var(--gk-green-title); font-weight: 700; display: flex; justify-content: space-between; gap: 10px; }
.news-box .data { font-size: 11.5px; color: var(--gk-gray5); font-weight: 500; white-space: nowrap; }
.news-box .testo { font-size: 13px; margin-top: 6px; }
.news-box.non-letta { border-left: 4px solid var(--gk-lavanda); }

/* Tooltip semplice: attributo data-tip */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 50;
    background: #2b2b2b; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35; padding: 6px 10px; border-radius: 8px;
    white-space: normal; width: max-content; max-width: 260px; text-align: left; pointer-events: none;
}

/* Pagine pubbliche (landing e accesso) */
.pubblica { min-height: 100vh; background: #fff; }
.pubblica .testata { display: flex; align-items: center; gap: 16px; padding: 18px 40px; border-bottom: 1px solid #eee; }
.pubblica .testata img { height: 44px; }
.pubblica .testata .spazio { flex: 1; }
.accesso-split { display: grid; grid-template-columns: minmax(380px, 1fr) 1fr; min-height: 100vh; }
.accesso-split .lato-form { padding: 48px clamp(24px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; background: #fff; }
.accesso-split .lato-immagine { background: linear-gradient(160deg, rgba(148,193,34,.85), rgba(56,90,20,.9)); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: flex-end; }
.accesso-split .lato-immagine h2 { font-size: 28px; font-weight: 600; }
.accesso-split .entra { color: var(--gk-green-title); font-weight: 700; font-size: 22px; }
@media (max-width: 900px) { .accesso-split { grid-template-columns: 1fr; } .accesso-split .lato-immagine { display: none; } }

.profili-test { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.profili-test form { margin: 0; }
.profilo-test { width: 100%; text-align: left; background: #fff; border: 1px solid #e3e3e3; border-radius: var(--gk-radius); padding: 14px 16px; cursor: pointer; font: inherit; color: inherit; height: 100%; }
.profilo-test:hover { border-color: var(--gk-primary); background: #fbfdf1; }
.profilo-test .ruolo { display: inline-block; background: var(--gk-bg); border-radius: var(--gk-radius-pill); font-size: 11px; font-weight: 700; padding: 2px 10px; margin: 6px 0; color: var(--gk-gray6); }
.profilo-test .desc { font-size: 12.5px; color: var(--gk-gray5); }

#blazor-error-ui { background: #fff4dc; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.blazor-error-boundary { background: #ffe8e8; padding: 1rem; border-radius: var(--gk-radius); color: #8f1010; }
.blazor-error-boundary::after { content: "Si è verificato un errore in questa parte della pagina. Ricarica la pagina; se si ripete contatta l'assistenza."; }

/* Il focus automatico sul titolo dopo la navigazione (accessibilità) non deve mostrare il bordo. */
h1:focus, h1:focus-visible { outline: none; }

/* Contatori usati come pulsanti (anteprima import) */
button.kpi { border: 0; background: var(--gk-bg); text-align: left; font: inherit; cursor: pointer; width: 100%; }

/* ---------------------------------------------------------------- dashboard per ruolo (sezione 2) */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.dash-laterale { display: flex; flex-direction: column; gap: 20px; }
.dash-laterale .card + .card { margin-top: 0; }
@media (max-width: 1100px) { .dash { grid-template-columns: 1fr; } }
.dash-sezione { font-size: 15px; font-weight: 700; margin: 26px 0 12px; color: var(--gk-gray6); }
.dash-principale > :first-child .dash-sezione:first-child, .dash-principale > .dash-sezione:first-child { margin-top: 0; }
.mt-l { margin-top: 36px; }
.dash-azioni { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.dash-cerca { position: relative; flex: 1; min-width: 240px; }
.dash-cerca .bi { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gk-gray4); }
.dash-cerca input { width: 100%; padding: 13px 16px 13px 42px; border-radius: var(--gk-radius-pill); border: 1px solid var(--gk-border); background: #fff; font: inherit; }
.dash-sede { margin: 0; min-width: 220px; }
.kpi.selezionato { outline: 2px solid var(--gk-primary); }
.kpi a.numero { display: block; color: inherit; text-decoration: none; }
.kpi .nota a { color: var(--gk-gray5); }
.variazione { font-weight: 700; margin-right: 6px; }
.variazione.su { color: #4d7a0b; }
.variazione.giu { color: #b04000; }
.griglia.kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) { .griglia.kpi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .griglia.kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi.doppio .due { display: flex; gap: 22px; }
.kpi.doppio .due a { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.lista-link { list-style: none; margin: 0; padding: 0; }
.lista-link li + li { margin-top: 8px; }
.lista-link a { display: flex; gap: 8px; align-items: center; }

/* Ordini in corso con avanzamento pagato → spedito → documenti */
.avanzamenti { list-style: none; margin: 0; padding: 0; }
.avanzamenti > li { padding: 12px 0; border-top: 1px solid var(--gk-bg); }
.avanzamenti > li:first-child { border-top: 0; padding-top: 0; }
.avanzamenti .testa { color: inherit; text-decoration: none; display: block; margin-bottom: 8px; }
.passi { list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.passi li { flex: 1; min-width: 110px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; background: var(--gk-bg); color: var(--gk-gray5); position: relative; }
.passi li.fatto { background: #eef4cf; color: #4d5a0b; }
.passi li.fatto::before { content: "✓ "; }
.passi li.corrente { background: #eef0ff; color: #2f2f8f; }
.passi li a { color: inherit; }

/* Grafici: linee con il periodo precedente, barre orizzontali */
.legenda { margin-left: auto; display: flex; gap: 14px; font-weight: 500; font-size: 12px; color: var(--gk-gray5); }
.legenda .voce::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--gk-lavanda); vertical-align: middle; margin-right: 6px; }
.legenda .voce.precedente::before { border-top: 2px dashed var(--gk-gray4); }
.grafico { margin: 0; }
.grafico figcaption { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.grafico figcaption .nome { font-weight: 700; color: var(--gk-text); }
.grafico figcaption .totale { font-weight: 600; }
.grafico figcaption .variazione { font-size: 12px; font-weight: 600; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .griglia-linea { stroke: #e3e3e6; stroke-width: 1; }
.grafico .asse { font-size: 10px; fill: var(--gk-gray5); font-family: var(--gk-font); }
.grafico .linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafico .linea.corrente { stroke: var(--gk-lavanda); }
.grafico .linea.precedente { stroke: var(--gk-gray4); stroke-dasharray: 4 3; }
.grafico .punto { fill: var(--gk-lavanda); stroke: #fff; stroke-width: 2; }
.grafico .area-tocco { fill: transparent; }
.grafico a:hover .area-tocco { fill: rgba(106, 106, 246, .07); }
.piccoli-multipli { gap: 26px; }
.barre { list-style: none; margin: 0; padding: 0; }
.barre li + li { margin-top: 4px; }
.barre a { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; color: inherit; text-decoration: none; padding: 5px 6px; border-radius: 8px; }
.barre a:hover { background: var(--gk-gray1); }
.barre .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.barre .traccia { height: 10px; background: var(--gk-bg); border-radius: 4px; overflow: hidden; }
.barre .traccia span { display: block; height: 100%; background: var(--gk-lavanda); border-radius: 4px; min-width: 3px; }
.barre .valore { font-weight: 700; font-size: 13px; text-align: right; min-width: 52px; }
.barre .valore small { display: block; font-weight: 500; color: var(--gk-gray5); font-size: 11px; }

/* Magazzino */
.prelievo { list-style: none; margin: 0; padding: 0; }
.prelievo li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--gk-bg); flex-wrap: wrap; }
.prelievo li:first-child { border-top: 0; }
.prelievo .quantita { margin-left: auto; font-size: 18px; font-weight: 700; }
.tabella tr.riga-attenzione td:first-child { box-shadow: inset 3px 0 0 var(--gk-stato-attesa); }
.tabella tr.riga-critica td:first-child { box-shadow: inset 3px 0 0 var(--gk-red); }
@media print {
    .sidebar, .topbar, .dash-laterale, .btn { display: none !important; }
    .main { margin-left: 0; }
}
input.input-num { width: 90px; text-align: right; padding: 6px 8px; border: 1px solid var(--gk-border); border-radius: 8px; font: inherit; }
.griglia.kpi-5 .kpi .numero { font-size: 28px; }
.kpi .parziale { font-size: 11.5px; color: var(--gk-gray5); display: block; margin-top: 2px; }
.griglia > .card + .card, .griglia > * + .card { margin-top: 0; }
.editor { border: 1px solid var(--gk-border); border-radius: 12px; background: #fff; overflow: hidden; }
.editor-barra { display: flex; gap: 2px; flex-wrap: wrap; padding: 6px; background: var(--gk-gray1); border-bottom: 1px solid var(--gk-border); }
.editor-barra button { border: 0; background: none; width: 34px; height: 30px; border-radius: 6px; cursor: pointer; color: var(--gk-gray6); }
.editor-barra button:hover { background: #fff; }
.editor-area { padding: 12px 14px; outline: none; line-height: 1.55; }
.editor-area:focus { box-shadow: inset 0 0 0 2px var(--gk-primary); }
.anteprima-news { background: var(--gk-news); border-radius: 12px; padding: 14px 16px; }
.lista-letture { max-height: 520px; overflow: auto; }
.lettura { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--gk-bg); }
/* Aiuto e wiki */
.lista-guide { list-style: none; margin: 0; padding: 0; }
.lista-guide a { display: flex; gap: 10px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--gk-bg); color: inherit; text-decoration: none; }
.lista-guide li:first-child a { border-top: 0; }
.lista-guide a .bi-chevron-right { margin-left: auto; color: var(--gk-gray4); }
.lista-guide a:hover { color: var(--gk-lavanda); }
.guida-libretto { margin: 0; background: var(--gk-gray1); border-radius: 12px; padding: 12px; }
.guida-libretto img { width: 100%; border-radius: 8px; margin: 8px 0; background: #fff; }
details.faq { border-top: 1px solid var(--gk-bg); padding: 10px 0; }
details.faq summary { cursor: pointer; font-weight: 600; }
details.faq[open] summary { margin-bottom: 8px; }
.contatto-omologazioni { padding: 10px 0; border-top: 1px solid var(--gk-bg); }
.pagina-aiuto { max-width: 860px; }
.contenuto-ricco p:last-child { margin-bottom: 0; }
.contenuto-ricco ul, .contenuto-ricco ol { padding-left: 22px; }
.impostazione { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--gk-bg); align-items: start; }
.card-titolo + .impostazione { border-top: 0; }
.impostazione .valore { display: flex; gap: 8px; align-items: flex-start; }
.impostazione .valore input, .impostazione .valore select, .impostazione .valore textarea { flex: 1; }
@media (max-width: 760px) { .impostazione { grid-template-columns: 1fr; } }
.pagina-account { max-width: 460px; margin: 0 auto; padding: 56px 20px; }
.pagina-registrazione { max-width: 900px; margin: 0 auto; padding: 40px 20px 64px; }
.pagina-registrazione .card { margin-top: 20px; }
fieldset.marchi { border: 0; padding: 0; margin: 10px 0 0; }
fieldset.marchi legend { font-weight: 600; margin-bottom: 2px; }
.sede-aggiuntiva { border-top: 1px dashed var(--gk-border); padding-top: 14px; margin-top: 10px; }
.campo-nascosto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.riga > select { width: auto; flex: 1; min-width: 180px; }
.input-num { min-height: 32px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--gk-lavanda); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.kit-foto { width: 96px; height: 72px; flex-shrink: 0; border: 0; padding: 0; background: var(--gk-bg); border-radius: 10px; cursor: zoom-in; position: relative; display: grid; place-items: center; overflow: hidden; }
.kit-foto img { width: 100%; height: 100%; object-fit: contain; }
.kit-foto.vuota { cursor: default; }
.kit-foto.vuota .bi { font-size: 1.6rem; color: var(--gk-gray4); }
.kit-foto .conta-foto { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 10.5px; border-radius: 6px; padding: 1px 5px; }
.kit-link { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.miniature { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.miniature button { width: 72px; height: 54px; border: 2px solid transparent; border-radius: 8px; padding: 0; background: var(--gk-bg); cursor: pointer; overflow: hidden; }
.miniature button.attiva { border-color: var(--gk-primary); }
.miniature img { width: 100%; height: 100%; object-fit: contain; }
.condizioni-checkout { background: var(--gk-gray1); border-radius: 12px; padding: 12px 14px 4px; margin: 12px 0; font-size: 13px; }
.piede-legale { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; padding: 14px 28px; font-size: 11.5px; color: var(--gk-gray5); border-top: 1px solid #e3e3e6; }
.piede-legale .link { display: flex; gap: 14px; flex-wrap: wrap; }
.piede-legale a { color: var(--gk-gray6); }
.pagina-legale { max-width: 980px; margin: 0 auto; padding: 40px 20px; }
.testo-legale { line-height: 1.6; text-align: justify; }
.testo-legale h3 { margin: 22px 0 6px; font-size: 1.05rem; }
.testo-legale p { margin: 0 0 8px; }
.editor-condizioni .editor-area { max-height: 560px; overflow-y: auto; }
@media print { .pagina-legale > a, .pagina-legale .muted a { display: none; } }
.barra-accedi-come { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #fff4dc; color: #7a4d00; padding: 10px 28px; font-size: 13px; border-bottom: 1px solid #f0d58a; }
.barra-accedi-come form { margin-left: auto; }
.scelte { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.scelte .rientro { margin-left: 28px; }
.segnalazione { border-top: 1px solid var(--gk-bg); padding: 12px 0; }
.segnalazione:first-of-type { border-top: 0; }
.segnalazione .messaggio { background: var(--gk-bg); border-radius: 10px; padding: 8px 12px; margin: 6px 0 0; }
.segnalazione .messaggio.da-greenkar { background: #eef6dc; }
/* Zona di caricamento (ZonaFile): trascina o clicca, uguale in tutto il portale. */
.zona-file { position: relative; border: 2px dashed var(--gk-border); border-radius: 14px; background: var(--gk-gray1); padding: 22px 16px 14px; text-align: center; transition: border-color .15s, background .15s; }
.zona-file input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.zona-file:hover, .zona-file.sopra { border-color: var(--gk-green-title); background: #f4f9e6; }
.zona-file:focus-within { outline: 3px solid var(--gk-primary); outline-offset: 2px; }
.zona-file.disabilitata { opacity: .6; }
.zona-file.disabilitata input[type=file] { cursor: not-allowed; }
.zona-file .zona-testo { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.zona-file .zona-testo i { font-size: 1.8rem; color: var(--gk-green-title); }
.zona-file .zona-aiuto { font-size: .82rem; color: var(--gk-gray5); margin-top: 6px; pointer-events: none; }
.zona-file.compatta { padding: 12px 14px 10px; }
.zona-file.compatta .zona-testo { flex-direction: row; justify-content: center; gap: 10px; }
.zona-file.compatta .zona-testo i { font-size: 1.3rem; }
/* Import guidato: passi numerati. */
.passi { display: flex; gap: 8px; list-style: none; padding: 0; margin: 4px 0 18px; flex-wrap: wrap; }
.passi li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--gk-gray1); color: var(--gk-gray5); font-weight: 600; font-size: .9rem; }
.passi li span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid var(--gk-border); }
.passi li.attivo { background: #f4f9e6; color: var(--gk-text); }
.passi li.attivo span { background: var(--gk-primary); border-color: var(--gk-primary); }
.passi li.fatto span { background: var(--gk-green-state); border-color: var(--gk-green-state); color: #fff; }
.passo-box { border: 1px solid var(--gk-bg); border-radius: 14px; padding: 16px; }
.passo-box h3 { margin-top: 0; }
.passo-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gk-primary); font-size: .85rem; margin-right: 6px; }
.esito-import { text-align: center; padding: 24px 12px; }
.esito-import > i { font-size: 2.6rem; color: var(--gk-green-title); }
.esito-import h3 { margin: 6px 0; }