:root {
    --bg: #f7f8fa;
    --surface: #ffffff;
    --text: #1d2330;
    --muted: #5c6577;
    --primary: #0b6bcb;
    --primary-text: #ffffff;
    --border: #dde2ea;
    --error: #b42318;
    --success-bg: #e7f6ec;
    --success-text: #146c2e;
    --accent: #17a673;
    --accent-bg: #e4f7ef;
    --accent-text: #0f7a56;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #12151b;
        --surface: #1b2029;
        --text: #e6e9ef;
        --muted: #9aa3b5;
        --primary: #4ea1f3;
        --primary-text: #0b1220;
        --border: #2c3340;
        --error: #f97066;
        --success-bg: #12301d;
        --success-text: #7fdc9b;
        --accent: #2fd196;
        --accent-bg: #113326;
        --accent-text: #6fe6bb;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 16px; }
main.container { flex: 1; padding-block: 32px; }

a { color: var(--primary); }
code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--text); }
.brand-logo { display: block; height: 44px; width: auto; }
/* Logo blu su sfondo scuro: diventa bianco (tema scuro del sistema o scelto dall'utente) */
:root[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo { filter: brightness(0) invert(1); }
}
nav { display: flex; gap: 16px; }
nav a { text-decoration: none; color: var(--muted); }
nav a[aria-current="page"], nav a:hover { color: var(--text); font-weight: 600; }

.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; padding-block: 16px; }

.hero { padding-block: 40px 48px; text-align: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0 0 16px; }
.hero p { color: var(--muted); }
.hero-intro { max-width: 60ch; margin-inline: auto; font-size: 1.15rem; }
.hero-badge {
    display: inline-block; margin: 0 0 16px; padding: 4px 14px; border-radius: 999px;
    background: var(--accent-bg); color: var(--accent-text); font-size: .85rem; font-weight: 600;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0 8px; }
.hero .button { font-size: 1.05rem; padding: 12px 28px; }
.hero .hint { margin-top: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; }
.card h2 { margin-top: 0; font-size: 1.2rem; }

/* --- Sito pubblico: home e chi-siamo --------------------------------------------------- */
.value-band {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px;
    margin: 32px 0 56px; padding: 28px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.value-item h2 { font-size: 1.1rem; margin: 0 0 6px; }
.value-item p { color: var(--muted); margin: 0; }

.section-title { font-size: 1.8rem; margin: 0 0 8px; text-align: center; }
.section-intro { color: var(--muted); text-align: center; max-width: 60ch; margin: 0 auto 32px; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.feature-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px;
    display: flex; flex-direction: column; gap: 8px;
}
.feature-card .icon { color: var(--primary); }
.feature-card h3 { margin: 4px 0 0; font-size: 1.1rem; }
.feature-card p { margin: 0; color: var(--muted); }

.how-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.how-steps li { text-align: center; }
.how-number {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; background: var(--primary); color: var(--primary-text); font-weight: 700; margin-bottom: 10px;
}
.how-steps h3 { margin: 0 0 6px; font-size: 1.05rem; }
.how-steps p { margin: 0; color: var(--muted); }

.cta-banner {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 32px; margin: 48px 0; text-align: center;
}
.cta-banner h2 { margin: 0 0 8px; font-size: 1.5rem; }
.cta-banner p { color: var(--muted); max-width: 60ch; margin: 0 auto 20px; }
.cta-banner.final-banner { background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--primary-text); }
.cta-banner.final-banner p { color: var(--primary-text); opacity: .9; }
.cta-banner.final-banner .button { background: var(--surface); color: var(--text); }
.cta-banner.supplier-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; flex-wrap: wrap;
}
.cta-banner.supplier-banner p, .cta-banner.supplier-banner h2 { margin: 0; max-width: 60ch; }
.cta-banner.supplier-banner > div { flex: 1 1 320px; }

/* Box "registrazione solo su invito" della home (popover HTML: centrato dal browser, Esc lo chiude) */
.beta-popover {
    width: min(480px, calc(100% - 32px)); padding: 28px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); text-align: center;
}
.beta-popover::backdrop { background: rgba(15, 20, 30, .5); }
.beta-popover h2 { margin: 0 0 10px; font-size: 1.3rem; }
.beta-popover p { color: var(--muted); margin: 0 0 20px; }
.beta-popover .beta-popover-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0; }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; max-width: 70ch; margin-inline: auto; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; }
.check-list .icon { color: var(--success-text); flex-shrink: 0; margin-top: 2px; }

.button {
    display: inline-block; background: var(--primary); color: var(--primary-text);
    border: 0; border-radius: 6px; padding: 10px 20px; font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.button:hover { filter: brightness(1.1); }

.form { display: grid; gap: 6px; max-width: 520px; }
.form label { font-weight: 600; margin-top: 10px; }
.form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px 16px; margin: 8px 0; display: grid; gap: 6px; }
.form legend { font-weight: 700; padding: 0 6px; }
.form input, .form textarea, .form select {
    font: inherit; color: inherit; background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
}
.form .button { justify-self: start; margin-top: 16px; }
.error { color: var(--error); margin: 0; font-size: .9rem; }
.notice { padding: 12px 16px; border-radius: 6px; }
.debug { background: var(--surface); border: 1px solid var(--error); border-radius: 6px; padding: 12px 16px; }
.debug pre { overflow-x: auto; font-size: .85rem; }
.notice.error-box { border: 1px solid var(--error); color: var(--error); }
.notice.info { border: 1px solid var(--primary); }

.inline-form { display: inline; margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-decoration: underline; }
.link-button.danger { color: var(--error); }
nav .link-button { color: var(--muted); text-decoration: none; }
nav .link-button:hover { color: var(--text); font-weight: 600; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
th { font-size: .9rem; color: var(--muted); }
.plain-list { padding-left: 0; list-style: none; }
.plain-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }

.hint { color: var(--muted); font-size: .9rem; margin: 0; }
.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); vertical-align: middle; }
.badge.ok { color: var(--success-text); background: var(--success-bg); border-color: transparent; }
.badge.todo { color: var(--error); border-color: var(--error); }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 16px; }
.steps h2 { font-size: 1.1rem; margin-bottom: 4px; }
.dns-record, .details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0; }
.dns-record dt, .details dt { font-weight: 600; }
.dns-record dd, .details dd { margin: 0; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.button.danger { background: var(--error); color: #fff; }
.card.claim { margin-bottom: 12px; }
.message-text { white-space: normal; }
.notice { border: 1px solid var(--border); margin: 12px 0; }

.notice.success { background: var(--success-bg); color: var(--success-text); }

/* --- Area riservata: barra in alto, barra laterale a sinistra, contenuto --- */
.header-tools { display: flex; align-items: center; gap: 20px; margin-left: auto; }
body.member .site-header .container { max-width: 1200px; }

.profile-menu { position: relative; }
.profile-menu summary { cursor: pointer; list-style: none; font-weight: 600; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu summary::after { content: " ▾"; color: var(--muted); }
.profile-menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 240px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: 12px 16px; display: grid; gap: 10px;
}
.profile-menu-user { margin: 0; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.profile-menu-user strong { color: var(--text); }
.profile-menu-panel a { text-decoration: none; }
.profile-menu-panel form { margin: 0; }

/* Gruppi del menu laterale: titolo ben distinto dalle voci, cliccabile per aprire o chiudere
   (barra laterale e resto dell'area riservata: sezione body.member in fondo al file) */
.nav-group { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.nav-group summary { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-radius: 6px; cursor: pointer;
    list-style: none; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: "\25BE"; font-size: 1rem; color: var(--muted); transition: transform .15s; }
.nav-group:not([open]) summary::after { transform: rotate(-90deg); }
.nav-group summary:hover { background: var(--surface); }
.nav-group summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Schermi stretti: nell'intestazione pubblica le lingue vanno a capo invece di uscire dallo schermo */
@media (max-width: 760px) {
    .header-tools { flex-wrap: wrap; gap: 8px 12px; }
    .languages { gap: 10px; }
    .site-header .container { flex-direction: column; align-items: flex-start; }
    .site-header nav { flex-wrap: wrap; row-gap: 6px; column-gap: 12px; }
    .header-tools { margin-left: 0; }
}

.role-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.role-form select { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
/* Testo letto dagli screen reader ma non visibile (es. etichette di campi già evidenti) */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.plans .plan { display: flex; flex-direction: column; gap: 4px; }
.plans .plan h3 { margin: 0; }
.plans .plan form { margin-top: auto; padding-top: 12px; }
.plans .plan.is-current { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.plan-price { font-size: 1.4rem; font-weight: 700; margin: 4px 0; }
.current-plan .plan-name { font-size: 1.3rem; font-weight: 700; margin: 0; }
.current-plan p { margin: 4px 0; }

.usage p { margin: 0 0 4px; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 0 8px; }
.tabs { gap: 4px; border-bottom: 1px solid var(--border); }
.tabs a { padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { border-bottom-color: var(--primary); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.filters input[type="search"] { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; min-width: 260px; flex: 1; max-width: 420px; }
.optional { font-weight: 400; color: var(--muted); font-size: .9rem; }

.preview-section { margin-top: 28px; }
.preview-questions { padding-left: 24px; }
.preview-questions > li { margin-bottom: 14px; }
.preview-label { margin: 0; font-weight: 600; }
.preview-meta { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.preview-options { margin: 4px 0; color: var(--muted); }

.section { margin-bottom: 40px; }
.section h2 { margin-bottom: 4px; }

/* Editor dei modelli di questionario */
.form label.checkbox { display: flex; gap: 8px; align-items: center; font-weight: 400; margin-top: 4px; }
.form .rows { display: grid; grid-template-columns: 1fr 110px; gap: 6px; align-items: center; }
.form .rows .rows-head { font-size: .9rem; color: var(--muted); }
.form.wide { max-width: 720px; }
[hidden] { display: none !important; } /* anche per gli elementi con display: grid */

/* Questionari inviati e risposte dei fornitori */
.answers dt { font-weight: 600; margin-top: 12px; }
.answers dd { margin: 2px 0 0; }
.form .choices { display: grid; gap: 4px; }
.question-block { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; display: grid; gap: 6px; }
.progress { color: var(--muted); }

/* Analisi sicurezza: voto in lettere */
.grade { display: inline-block; min-width: 1.6em; padding: 0 .35em; border-radius: 4px; font-weight: 700; text-align: center; color: #fff; background: #6b7280; }
.grade-A { background: #15803d; }
.grade-B { background: #4d7c0f; }
.grade-C { background: #b45309; }
.grade-D { background: #c2410c; }
.grade-F { background: #b91c1c; }
.grade-large { font-size: 2.2rem; min-width: 1.4em; padding: .1em .3em; }
.security-grade { display: flex; align-items: center; gap: 14px; font-size: 1.3rem; margin: 0; }
.badge.danger { background: #fee2e2; color: #991b1b; }

/* ==========================================================================================
   Area riservata (body.member): stile "pannello" ispirato a TailAdmin, scritto da zero.
   Vale solo per gli utenti collegati: home e pagine pubbliche restano con lo stile qui sopra.
   Colori come variabili; tema scuro dal sistema o scelto dall'utente (data-theme su <html>,
   impostato dal layout leggendo il cookie "theme").
   ========================================================================================== */

/* Font Outfit (SIL Open Font License, vedi /assets/fonts/OFL.txt): file nel sito, nessuna richiesta a terzi */
@font-face {
    font-family: "Outfit"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Outfit"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("../fonts/outfit-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.member {
    --bg: #f9fafb;
    --surface: #ffffff;
    --surface-2: #f2f4f7;
    --text: #344054;
    --text-strong: #101828;
    --muted: #667085;
    --faint: #98a2b3;
    --primary: #465fff;
    --primary-strong: #3641f5;
    --primary-soft: #ecf3ff;
    --primary-on-soft: #3641f5;
    --primary-text: #ffffff;
    --border: #e4e7ec;
    --error: #d92d20;
    --error-soft: #fef3f2;
    --success-bg: #ecfdf3;
    --success-text: #039855;
    --warn: #dc6803;
    --warn-soft: #fffaeb;
    --info: #0086c9;
    --info-soft: #f0f9ff;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --overlay: rgba(16, 24, 40, .45);
    color-scheme: light;
    font: 15px/1.55 "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.member {
        --bg: #101828; --surface: #1a2231; --surface-2: #232d3f; --text: #d0d5dd; --text-strong: #f2f4f7; --muted: #98a2b3;
        --faint: #667085; --primary: #6d7dff; --primary-strong: #8b98ff; --primary-soft: rgba(70, 95, 255, .16);
        --primary-on-soft: #a5b0ff; --primary-text: #ffffff; --border: #2a3446; --error: #f97066; --error-soft: rgba(240, 68, 56, .14);
        --success-bg: rgba(18, 183, 106, .14); --success-text: #32d583; --warn: #fdb022; --warn-soft: rgba(247, 144, 9, .14);
        --info: #36bffa; --info-soft: rgba(11, 165, 236, .14); --shadow: none; --overlay: rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] body.member {
    --bg: #101828; --surface: #1a2231; --surface-2: #232d3f; --text: #d0d5dd; --text-strong: #f2f4f7; --muted: #98a2b3;
    --faint: #667085; --primary: #6d7dff; --primary-strong: #8b98ff; --primary-soft: rgba(70, 95, 255, .16);
    --primary-on-soft: #a5b0ff; --primary-text: #ffffff; --border: #2a3446; --error: #f97066; --error-soft: rgba(240, 68, 56, .14);
    --success-bg: rgba(18, 183, 106, .14); --success-text: #32d583; --warn: #fdb022; --warn-soft: rgba(247, 144, 9, .14);
    --info: #36bffa; --info-soft: rgba(11, 165, 236, .14); --shadow: none; --overlay: rgba(0, 0, 0, .6);
    color-scheme: dark;
}
:root[data-theme="light"] body.member { color-scheme: light; }

.member h1, .member h2, .member h3 { color: var(--text-strong); font-weight: 600; text-wrap: balance; }
.member h1 { font-size: 1.55rem; margin: 0 0 6px; }
.member h2 { font-size: 1.15rem; }
.member h3 { font-size: 1rem; }
.member a { color: var(--primary); text-decoration: none; }
.member a:hover { text-decoration: underline; }
.member :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.member code { background: var(--surface-2); border-color: var(--border); border-radius: 6px; padding: 1px 6px; }
.member .hint { color: var(--muted); }

/* --- Barra laterale ------------------------------------------------------------------------ */
.member .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 30; padding: 22px 18px;
    background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; overflow-y: auto; transition: transform .2s ease;
}
.member .logo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 8px 22px; color: var(--text-strong); text-decoration: none; }
.member .logo:hover { text-decoration: none; }
.member .logo .brand-logo { height: 52px; }
.member .logo small { display: block; font-size: .74rem; font-weight: 500; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.member .sidebar nav { display: grid; gap: 2px; position: static; flex-direction: column; }
.member .sidebar nav a {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px;
    color: var(--text); font-weight: 500; box-shadow: none;
}
.member .sidebar nav a:hover { background: var(--surface-2); text-decoration: none; }
.member .sidebar nav a svg { color: var(--muted); flex: none; }
.member .sidebar nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-on-soft); font-weight: 500; box-shadow: none; }
.member .sidebar nav a[aria-current="page"] svg { color: var(--primary-on-soft); }
.member .nav-count { margin-left: auto; min-width: 22px; text-align: center; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: #fff; font-variant-numeric: tabular-nums; }
/* Gruppi richiudibili: titolo piccolo in maiuscolo, come le etichette di sezione */
.member .nav-group { margin-top: 10px; padding-top: 0; border-top: 0; }
.member .nav-group summary { padding: 10px 12px 6px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--faint); }
.member .nav-group summary:hover { background: none; color: var(--text); }
.member .sidebar nav .nav-group a { padding-left: 12px; margin-top: 2px; }
.member .sidebar-card { margin-top: auto; border-radius: 14px; background: var(--surface-2); padding: 16px; font-size: .87rem; color: var(--muted); }
.member .sidebar-card strong { display: block; color: var(--text-strong); font-size: .95rem; }
/* Barre: elemento <progress> (la CSP vieta gli stili in linea, quindi niente width calcolate nell'HTML) */
.member progress.bar {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px; border: 0; border-radius: 999px;
    background: var(--surface-2); overflow: hidden; --bar: var(--primary);
}
.member progress.bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.member progress.bar::-webkit-progress-value { background: var(--bar); border-radius: 999px; }
.member progress.bar::-moz-progress-bar { background: var(--bar); border-radius: 999px; }
.member progress.bar.thin { height: 6px; margin: 10px 0 6px; }
.member .sidebar-card progress.bar { background: var(--border); }
.member .sidebar-card progress.bar::-webkit-progress-bar { background: var(--border); }
.member progress.bar.is-full { --bar: var(--warn); }

/* --- Intestazione --------------------------------------------------------------------------- */
.member .shell { margin-left: 272px; min-height: 100vh; display: flex; flex-direction: column; }
.member .topbar {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 14px;
    padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.member .icon-btn {
    width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    display: grid; place-items: center; color: var(--muted); cursor: pointer; flex: none;
}
.member .icon-btn:hover { color: var(--text-strong); background: var(--surface-2); }
.member .icon-btn.square { border-radius: 10px; }
.member .menu-toggle { display: none; }
.member .top-search { flex: 1; max-width: 430px; position: relative; margin: 0; }
.member .top-search svg { position: absolute; left: 13px; top: 12px; color: var(--muted); pointer-events: none; }
.member .top-search input {
    width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font: inherit; padding: 0 70px 0 42px;
}
.member .top-search kbd { position: absolute; right: 10px; top: 10px; font: 500 .74rem "Outfit", sans-serif; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; background: var(--surface); }
.member .topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.member .languages { display: flex; gap: 2px; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.member .languages a { padding: 3px 8px; border-radius: 999px; font-size: .76rem; font-weight: 600; color: var(--muted); }
.member .languages a:hover { text-decoration: none; color: var(--text-strong); }
.member .languages a[aria-current="true"] { background: var(--primary-soft); color: var(--primary-on-soft); }
/* Icona del tema: luna in chiaro, sole in scuro */
.member .theme-sun { display: none; }
:root[data-theme="dark"] .member .theme-sun { display: block; }
:root[data-theme="dark"] .member .theme-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .member .theme-sun { display: block; }
    :root:not([data-theme="light"]) .member .theme-moon { display: none; }
}
.member .profile-menu summary { display: flex; align-items: center; gap: 10px; padding: 3px 6px 3px 3px; border: 0; border-radius: 999px; font-weight: 500; }
.member .profile-menu summary::after { content: none; }
.member .profile-menu summary:hover { background: var(--surface-2); }
.member .avatar { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-weight: 600; font-size: .88rem; color: #fff; background: linear-gradient(135deg, #465fff, #7a5af8); flex: none; }
.member .profile-name { line-height: 1.2; }
.member .profile-name strong { display: block; color: var(--text-strong); font-weight: 600; font-size: .92rem; }
.member .profile-name small { color: var(--muted); font-size: .78rem; }
.member .profile-menu-panel { border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); padding: 14px; min-width: 260px; }
.member .profile-menu-panel a, .member .profile-menu-panel .link-button { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.member .profile-menu-panel a:hover, .member .profile-menu-panel .link-button:hover { background: var(--surface-2); text-decoration: none; }
.member .profile-menu-user { padding: 0 8px 10px; border-bottom: 1px solid var(--border); }
.member .app-main { padding: 26px 24px 40px; width: 100%; max-width: 1440px; display: grid; gap: 4px; align-content: start; }
.member .app-main > * { min-width: 0; }
.member .site-footer { margin-top: auto; border-top: 1px solid var(--border); background: var(--surface); }
.member .scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 25; }

/* --- Componenti ----------------------------------------------------------------------------- */
.member .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px;
    border-radius: 10px; font-weight: 500; background: var(--primary); color: var(--primary-text); box-shadow: var(--shadow);
}
.member .button:hover { background: var(--primary-strong); filter: none; text-decoration: none; }
.member .button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.member .button.secondary:hover { background: var(--surface-2); }
.member .button.danger { background: var(--error); color: #fff; }
.member .link-button { color: var(--primary); text-decoration: none; }
.member .link-button:hover { text-decoration: underline; }

.member .card, .member .panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow);
}
.member .cards { gap: 18px; }
.member .card h2, .member .card h3 { margin: 0 0 6px; }

.member .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); margin: 12px 0; }
.member table { background: transparent; font-size: .92rem; }
.member th { font-weight: 500; font-size: .8rem; color: var(--muted); background: var(--bg); padding: 12px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.member td { padding: 13px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.member tbody tr:last-child td { border-bottom: 0; }
.member tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }

.member .badge { border: 0; padding: 2px 10px; font-size: .76rem; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.member .badge.ok { background: var(--success-bg); color: var(--success-text); }
.member .badge.todo { background: var(--warn-soft); color: var(--warn); }
.member .badge.danger { background: var(--error-soft); color: var(--error); }

.member .notice { border-radius: 14px; border: 1px solid var(--border); background: var(--surface); padding: 14px 18px; }
.member .notice.success { background: var(--success-bg); color: var(--success-text); border-color: transparent; }
.member .notice.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 35%, transparent); color: var(--text); }
.member .notice.error-box { background: var(--error-soft); border-color: color-mix(in srgb, var(--error) 35%, transparent); color: var(--error); }

.member .form label { font-weight: 500; color: var(--text-strong); }
.member .form input, .member .form textarea, .member .form select, .member .role-form select, .member .filters input[type="search"], .member .filters select {
    min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 8px 12px; font: inherit;
}
.member .form input[type="checkbox"], .member .form input[type="radio"] { min-height: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.member .form input:focus, .member .form textarea:focus, .member .form select:focus, .member .filters input:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.member .form fieldset { border-radius: 14px; border-color: var(--border); background: var(--surface); }
.member .filters { align-items: center; }
.member .tabs a { color: var(--muted); font-weight: 500; }
.member .tabs a[aria-current="page"] { color: var(--primary-on-soft); border-bottom-color: var(--primary); }
.member .details dt { font-weight: 500; color: var(--muted); }
.member .details dd { color: var(--text-strong); }
.member .plain-list li { border-color: var(--border); }
.member .section { margin-bottom: 32px; }
.member .grade { border-radius: 8px; }

/* --- Pagina iniziale ------------------------------------------------------------------------ */
.member .page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.member .page-head p { margin: 0; color: var(--muted); }
.member .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 18px 0 22px; }
.member .stat { display: grid; gap: 14px; padding: 20px; }
.member .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-strong); }
.member .stat-row { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.member .stat small { color: var(--muted); font-size: .88rem; }
.member .stat strong { display: block; font-size: 1.75rem; font-weight: 700; color: var(--text-strong); line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.member .dash-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px; align-items: start; }
.member .dash-col { display: grid; gap: 22px; min-width: 0; }
.member .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.member .panel-head h2 { margin: 0; }
.member .panel-head p { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.member .panel .table-wrap { border: 0; border-radius: 0; box-shadow: none; margin: 0 -22px -20px; border-top: 1px solid var(--border); }
.member .who { display: flex; align-items: center; gap: 12px; }
.member .initials { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; font-size: .82rem; background: var(--primary-soft); color: var(--primary-on-soft); flex: none; }
.member .bars { display: grid; gap: 14px; }
.member .bar-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 12px; font-size: .9rem; color: var(--text); }
.member .bar-row:hover { text-decoration: none; }
.member .bar-row b { text-align: right; color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.member progress.bar-critical { --bar: var(--error); }
.member progress.bar-important { --bar: var(--warn); }
.member progress.bar-standard { --bar: var(--success-text); }
.member progress.bar-unclassified { --bar: var(--faint); }
.member .grade-box { display: flex; align-items: center; gap: 18px; }
.member .grade-box .grade { width: 74px; height: 74px; border-radius: 18px; display: grid; place-items: center; font-size: 2.2rem; }
.member .grade-box strong { display: block; color: var(--text-strong); font-size: 1.05rem; }
.member .grade-box span.hint { display: block; }
.member .template-author { display: inline-block; }

/* --- Schermi medi e stretti ----------------------------------------------------------------- */
@media (max-width: 1200px) {
    .member .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .member .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
    .member .sidebar { transform: translateX(-100%); }
    .member .sidebar.is-open { transform: none; }
    .member .shell { margin-left: 0; }
    .member .menu-toggle { display: grid; }
}
@media (max-width: 640px) {
    .member .topbar { padding: 10px 16px; gap: 10px; }
    .member .top-search, .member .languages, .member .profile-name { display: none; }
    .member .app-main { padding: 20px 16px 32px; }
    .member .stats { grid-template-columns: 1fr; }
    .member .bar-row { grid-template-columns: 100px 1fr 30px; }
}
@media (prefers-reduced-motion: reduce) { .member .sidebar { transition: none; } }

/* Stampa (es. attestazione di firma): solo il contenuto, senza menu e pulsanti */
@media print {
    .site-header, .sidebar, .topbar, .site-footer, .no-print, .languages { display: none !important; }
    body { background: #fff; color: #000; }
    .member .shell { margin-left: 0; }
}