:root{
  --navy:#1B2A4A; --navy-800:#26365A;
  --coral:#B23A2A; --coral-50:#FBEDEA; --coral-600:#B23A2A;
  --teal:#0F6E56; --teal-50:#E9F5F1;
  --plum:#5C3A6B; --plum-50:#F1EAF4;
  --bg:#F2F4F7; --surface:#FFFFFF; --line:#E1E5EB;
  --ink:#1D2430; --ink-soft:#5B6472; --ink-faint:#8B93A1;
  --radius:12px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.5;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}

.topbar{background:var(--navy);color:#fff;padding:28px 24px 60px;position:relative;overflow:hidden;}
.topbar::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(178,58,42,0.35),transparent 70%);}
.topbar-inner{max-width:920px;margin:0 auto;position:relative;z-index:1;}
.brand-row{display:flex;align-items:center;gap:12px;margin-bottom:2px;}
.brand-logo{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.brand{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#B9C3D6;margin-bottom:14px;}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);}
h1{font-size:28px;margin:0 0 6px;font-weight:600;}
.subtitle{color:#C4CDDE;font-size:15px;margin:0;}

.searchwrap{max-width:920px;margin:-36px auto 0;padding:0 24px;position:relative;z-index:2;}
.searchbox{background:var(--surface);border-radius:var(--radius);box-shadow:0 10px 30px rgba(15,25,45,.14);padding:6px;display:flex;align-items:center;gap:8px;}
.searchbox input{flex:1;border:none;outline:none;font-size:17px;padding:14px 12px;font-family:'Inter',sans-serif;color:var(--ink);background:transparent;}
.searchbox input::placeholder{color:var(--ink-faint);}
.searchicon{padding-left:12px;color:var(--ink-faint);}

.chips{display:flex;gap:8px;flex-wrap:wrap;max-width:920px;margin:16px auto 0;padding:0 24px;}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;cursor:pointer;color:var(--ink-soft);transition:all .15s;user-select:none;}
.chip:hover{border-color:var(--navy);}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.chip .swatch{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;}

.container{max-width:920px;margin:0 auto;padding:24px;}
.count{font-size:13px;color:var(--ink-faint);margin:4px 0 14px;}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;cursor:pointer;transition:box-shadow .15s, transform .15s;position:relative;}
.card:hover{box-shadow:0 4px 16px rgba(15,25,45,.08);transform:translateY(-1px);}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.cat-tag{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap;}
.cat-reply{background:var(--coral-50);color:var(--coral);}
.cat-procedure{background:var(--teal-50);color:var(--teal);}
.cat-test{background:var(--plum-50);color:var(--plum);}
.card h3{font-size:16px;margin:8px 0 4px;font-weight:600;color:var(--ink);}
.card p{font-size:13.5px;color:var(--ink-soft);margin:0;}
.card .meta{margin-top:8px;font-size:12px;color:var(--ink-faint);display:flex;gap:14px;flex-wrap:wrap;}
.card .meta span.mono{color:var(--ink-soft);}

.conf-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.conf-dot{width:7px;height:7px;border-radius:50%;}
.headerbtn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;}
.headerbtn:hover{background:rgba(255,255,255,.2);}
.thumbs{display:flex;gap:10px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.thumbbtn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--ink-soft);}
.thumbbtn:hover{border-color:var(--navy);}
.thumbbtn.voted{background:var(--navy);color:#fff;border-color:var(--navy);}
.thumbcount{font-size:12.5px;color:var(--ink-faint);}
.feedback-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.feedback-row:last-child{border-bottom:none;}
.feedback-counts{display:flex;gap:12px;font-size:12.5px;color:var(--ink-faint);white-space:nowrap;}

.proc-use-case{background:#F4F6F9;border-left:3px solid var(--navy);padding:10px 14px;border-radius:0 8px 8px 0;font-size:14px;color:var(--ink);margin-bottom:18px;}
.proc-section-h{font-size:13px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.03em;margin:20px 0 10px;display:flex;align-items:center;gap:8px;}
.proc-section-h::before{content:"";width:16px;height:2px;background:var(--navy);}
.proc-steps{list-style:none;margin:0;padding:0;counter-reset:step;}
.proc-steps li{counter-increment:step;padding:8px 0 8px 34px;position:relative;font-size:14.5px;line-height:1.55;border-bottom:1px solid #F0F1F3;}
.proc-steps li:last-child{border-bottom:none;}
.proc-steps li::before{content:counter(step);position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;}
.proc-note{background:#FBF3DC;border:1px solid #E8D9A8;border-radius:10px;padding:12px 14px;font-size:13.5px;color:#6B5410;margin-top:18px;display:flex;gap:10px;}
.proc-note .icon{flex-shrink:0;}
.proc-diagram{margin:20px 0;padding:16px;background:#FAFBFC;border:1px solid var(--line);border-radius:10px;}
.proc-diagram-caption{font-size:11.5px;color:var(--ink-faint);text-align:center;margin-top:8px;}
.proc-diagram-missing{font-size:13px;color:var(--ink-faint);font-style:italic;padding:10px 0;}
.proc-diagram-sticky{margin-top:14px;padding:10px 14px;background:#FBF3DC;border:1px solid #E8C25E;border-radius:8px;font-size:12.5px;color:#7A5A05;line-height:1.5;transform:rotate(-0.6deg);box-shadow:0 2px 6px rgba(0,0,0,.08);max-width:90%;}
.related-wrap{margin-top:20px;}
.related-chip{display:inline-block;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;margin:0 6px 6px 0;cursor:pointer;color:var(--ink);}
.related-chip:hover{border-color:var(--navy);background:#F4F6F9;}
.related-chip .rc-tag{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ink-faint);margin-right:6px;}
.source-footer{margin-top:22px;padding-top:14px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;}
.source-footer .mono{color:var(--ink-soft);}

/* Ask-the-KB */
.ask-toggle{text-align:center;margin:14px auto 0;max-width:920px;padding:0 24px;}
.ask-link{background:#EAF0FD;border:1px solid #C6D6F5;color:var(--navy);opacity:1;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;font-family:'Inter',sans-serif;padding:9px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s;}
.ask-link:hover{background:#DCE6FB;border-color:var(--navy);}

.ask-panel{max-width:920px;margin:14px auto 0;padding:0 24px;display:none;}
.ask-panel.show{display:block;}
.ask-box{background:var(--surface);border-radius:var(--radius);box-shadow:0 6px 20px rgba(15,25,45,.10);padding:16px;}
.ask-box textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-family:'Inter',sans-serif;font-size:14.5px;resize:vertical;min-height:620px;height:620px;margin-bottom:10px;box-sizing:border-box;}
.ask-result{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
.ask-banner{border-radius:8px;padding:10px 14px;font-size:13.5px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.ask-banner.strong{background:var(--teal-50);color:var(--teal);}
.ask-banner.weak{background:#FBF3DC;color:#8A6A0E;}
.ask-banner.none{background:var(--coral-50);color:var(--coral);}
.ask-suggestion{background:#FAFBFC;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.6;color:var(--ink);white-space:pre-wrap;}
.ask-loading{color:var(--ink-faint);font-size:13.5px;font-style:italic;}
.ask-item-preview{border:1px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;background:var(--surface);}
.ask-item-preview:hover{border-color:var(--navy);}

/* Top-level view toggle */
.view-toggle{display:flex;justify-content:center;gap:8px;margin-top:18px;}
.view-tab{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;padding:9px 18px;border-radius:8px 8px 0 0;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.view-tab.active{background:var(--bg);color:var(--navy);border-color:var(--bg);}
.draft-tag{background:var(--coral);color:#fff;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:999px;margin-left:5px;text-transform:uppercase;letter-spacing:.03em;vertical-align:2px;}
.draft-tag.progress-tag{background:var(--teal);}
.draft-banner{display:inline-block;background:#FBF3DC;color:#8A6A0E;border:1px solid #E8D9A8;font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:999px;}
.chip-row-label{max-width:920px;margin:14px auto 0;padding:0 24px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);}

/* Handover log */
.handover-wrap{max-width:920px;margin:0 auto;padding:24px;}
.ho-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:20px;}
.ho-form select, .ho-form input, .ho-form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-family:inherit;font-size:14px;margin-bottom:12px;}
.ho-form-row{display:flex;gap:10px;}
.ho-form-row > *{flex:1;}
.ho-item{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:8px;padding:14px 16px;margin-bottom:10px;}
.ho-item.resolved{border-left-color:var(--teal);opacity:.6;}
.ho-item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.ho-cat{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--ink-faint);letter-spacing:.03em;}
.ho-meta{font-size:12px;color:var(--ink-faint);margin-top:4px;}
.ho-text{font-size:14.5px;margin:8px 0;color:var(--ink);}
.ho-resolve-btn{font-size:12px;background:none;border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer;color:var(--ink-soft);}
.ho-resolve-btn:hover{border-color:var(--teal);color:var(--teal);}
.ho-filter{margin-bottom:14px;font-size:13px;color:var(--ink-soft);}
.ho-filter label{cursor:pointer;}

.empty{text-align:center;padding:50px 20px;}
.empty h3{font-size:19px;margin-bottom:6px;}
.empty p{color:var(--ink-soft);font-size:14px;max-width:420px;margin:0 auto 20px;}
.gapform{max-width:420px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:left;}
.gapform label{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:6px;}
.gapform input, .gapform textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-family:inherit;font-size:14px;margin-bottom:12px;resize:vertical;}
.btn{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.btn:hover{background:var(--navy-800);}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--line);}
.gapok{color:var(--teal);font-size:13px;margin-top:8px;display:none;}

/* Quiz di autoverifica */
.quiz-question{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;}
.quiz-question-text{font-weight:600;font-size:14.5px;margin-bottom:10px;}
.quiz-options{display:flex;flex-direction:column;gap:8px;}
.quiz-option{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;cursor:pointer;padding:7px 9px;border-radius:8px;transition:background .12s;}
.quiz-option:hover{background:var(--bg);}
.quiz-option input{margin-top:3px;flex-shrink:0;}
.quiz-result-wrong{background:var(--coral-50);border:1px solid var(--coral);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;}

/* Modal */
.overlay{position:fixed;inset:0;background:rgba(20,26,38,.5);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow-y:auto;}
.overlay.show{display:flex;}
.modal{background:var(--surface);border-radius:16px;max-width:640px;width:100%;padding:28px 30px;position:relative;}
.modal .close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:20px;color:var(--ink-faint);cursor:pointer;}
.modal h2{font-size:20px;margin:6px 0 12px;padding-right:24px;}
.modal .field{margin-bottom:14px;}
.modal .field-label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;}
.modal .field-value{font-size:14.5px;color:var(--ink);white-space:pre-wrap;}
.template-box{background:#FAFBFC;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:14.5px;white-space:pre-wrap;line-height:1.6;color:var(--ink);}
.copybtn{margin-top:10px;}
.copied{color:var(--teal);font-size:13px;margin-left:10px;display:none;}
.gapflag{background:var(--coral-50);color:var(--coral);border-radius:8px;padding:10px 12px;font-size:13px;margin-top:14px;}

footer{text-align:center;padding:30px 16px 50px;color:var(--ink-faint);font-size:12.5px;}
.footer-code{color:var(--ink-faint);font-family:'Courier New',monospace;font-size:11px;opacity:.75;}
.footer-code::before{content:'· codice pagina: ';}
.footer-sections{display:block;color:var(--ink-faint);font-family:'Courier New',monospace;font-size:10.5px;opacity:.65;margin-top:3px;}

/* ==========================================================================
   Aggiunte per la versione intranet (utente autenticato, pannello redattori)
   Il resto del foglio di stile e' quello del prototipo, invariato.
   ========================================================================== */

.userbar{position:absolute;top:16px;right:24px;display:flex;align-items:center;gap:12px;
  font-size:12.5px;color:var(--ink-soft);}
.userbar .user-name{background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:20px;
  padding:5px 13px;font-weight:600;color:var(--ink);}
.userbar .user-role{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px;}
.userbar a,.userbar button{font-size:12.5px;color:var(--ink-soft);background:none;border:none;
  cursor:pointer;font-family:inherit;text-decoration:underline;padding:0;}
.userbar a:hover,.userbar button:hover{color:var(--coral);}

/* Il margine inferiore ampio compensa il -36px con cui la barra di ricerca
   sale sopra l'intestazione: senza, l'avviso le finirebbe sotto. */
.notice{max-width:1100px;margin:16px auto 48px;padding:12px 16px;border-radius:10px;font-size:13.5px;
  line-height:1.5;background:#FBF3DC;border:1px solid #E8D8A8;color:#6E5405;}
.notice.is-error{background:#FAECE7;border-color:#E8BFAE;color:#8C3317;}

.loading{text-align:center;padding:40px 20px;color:var(--ink-faint);font-size:14px;}

/* --- pannello redattori --------------------------------------------------- */

.adm-wrap{max-width:1180px;margin:0 auto;padding:24px 20px 60px;}
.adm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px;border-bottom:1px solid var(--line);}
.adm-tab{background:none;border:none;border-bottom:2px solid transparent;padding:10px 14px;
  font-family:inherit;font-size:14px;color:var(--ink-soft);cursor:pointer;}
.adm-tab.active{color:var(--coral);border-bottom-color:var(--coral);font-weight:600;}

.adm-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.adm-toolbar input[type=text],.adm-toolbar select{padding:8px 11px;border:1px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:13.5px;background:#fff;color:var(--ink);}
.adm-toolbar input[type=text]{min-width:240px;}

table.adm{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;}
table.adm th{text-align:left;padding:10px 12px;background:var(--bg);font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);border-bottom:1px solid var(--line);}
table.adm td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
table.adm tr:last-child td{border-bottom:none;}
table.adm tr.archived-row td{opacity:.5;}
table.adm td.actions{white-space:nowrap;text-align:right;}
table.adm button{background:none;border:1px solid var(--line);border-radius:7px;padding:5px 10px;
  font-family:inherit;font-size:12.5px;cursor:pointer;color:var(--ink-soft);margin-left:6px;}
table.adm button:hover{border-color:var(--coral);color:var(--coral);}

.clients-table-title{font-family:'Cambria',serif;color:var(--navy);font-size:15px;margin:26px 0 10px;}
/* overflow-x resta come rete di sicurezza sugli schermi molto stretti, ma le
   celle vanno a capo cosi' scorrendo solo in verticale si vede ogni colonna
   di ogni cliente, senza dover scorrere anche in orizzontale. */
.table-scroll{overflow-x:auto;}
.clients-pages{display:flex;align-items:center;gap:12px;margin:14px 0 4px;flex-wrap:wrap;}
.clients-pages button[disabled]{opacity:.45;cursor:default;}
.table-scroll table.adm{table-layout:fixed;width:100%;}
.table-scroll table.adm td,.table-scroll table.adm th{white-space:normal;word-break:break-word;}
.clients-table th:nth-child(1),.clients-table td:nth-child(1){width:20%;}
.clients-table th:nth-child(2),.clients-table td:nth-child(2){width:9%;}
.clients-table th:nth-child(3),.clients-table td:nth-child(3){width:15%;}
.clients-table th:nth-child(4),.clients-table td:nth-child(4){width:9%;}
.clients-table th:nth-child(5),.clients-table td:nth-child(5){width:10%;}
.clients-table th:nth-child(6),.clients-table td:nth-child(6){width:10%;}
.clients-table th:nth-child(7),.clients-table td:nth-child(7){width:9%;}
.clients-table th:nth-child(8),.clients-table td:nth-child(8){width:6%;}
.clients-table th:nth-child(9),.clients-table td:nth-child(9){width:12%;}

.adm-kpi{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px;}
.adm-kpi div{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;min-width:132px;}
.adm-kpi .n{font-size:26px;font-weight:700;color:var(--navy);font-family:'Cambria',Georgia,serif;}
.adm-kpi .l{font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}

.ed-field{margin-bottom:15px;}
.ed-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.ed-field input[type=text],.ed-field textarea,.ed-field select{width:100%;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:14px;
  background:#fff;color:var(--ink);box-sizing:border-box;}
.ed-field textarea{resize:vertical;min-height:70px;line-height:1.55;}
.ed-field .hint{font-size:12px;color:var(--ink-faint);margin-top:4px;line-height:1.5;}
.ed-row{display:flex;gap:14px;flex-wrap:wrap;}
.ed-row>.ed-field{flex:1;min-width:170px;}
.ed-phase{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;background:var(--bg);}
.ed-phase-top{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.ed-phase-top input{flex:1;}
.ed-step{display:flex;gap:8px;align-items:flex-start;margin-bottom:7px;}
.ed-step textarea{flex:1;min-height:44px;}
.ed-mini{background:none;border:1px solid var(--line);border-radius:7px;padding:5px 9px;
  font-family:inherit;font-size:12.5px;cursor:pointer;color:var(--ink-soft);white-space:nowrap;}
.ed-mini:hover{border-color:var(--coral);color:var(--coral);}
.ed-errors{background:#FAECE7;border:1px solid #E8BFAE;color:#8C3317;padding:11px 13px;
  border-radius:9px;font-size:13.5px;margin-bottom:14px;line-height:1.5;}
.ed-ok{background:#E9F5F1;border:1px solid #A8D8C9;color:#0B5341;padding:11px 13px;
  border-radius:9px;font-size:13.5px;margin-bottom:14px;}

.rev-row{border-bottom:1px solid var(--line);padding:10px 0;font-size:13px;}
.rev-row:last-child{border-bottom:none;}
.rev-meta{color:var(--ink-faint);font-size:12px;margin-top:3px;}
.rev-action{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 7px;border-radius:5px;margin-right:7px;background:var(--bg);color:var(--ink-soft);}
.rev-action.create{background:#E9F5F1;color:#0B5341;}
.rev-action.archive{background:#FAECE7;color:#8C3317;}