@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300,0,0&display=swap');
/* ============================================================
   DLXHUB MOCKUP — foglio condiviso della famiglia mockup PMS
   Va caricato DOPO assets/css/hub-style.css (che dà token +
   componenti .btn/.hub-card/.hub-table/.pill/.alert/.hub-modal/
   .hub-tab/.hub-wrap/.icon/utilities).
   Qui SOLO: chrome di famiglia + pattern condivisi + AI-assist.
   Token-driven, Manrope ereditato, icone = Material Symbols.
   Regole: niente emoji, niente viola, weight ≤500 (titoli 700),
   nessun hex hardcoded fuori da questo file.
   ============================================================ */

/* wrapper: variante larga per planner/griglie */
.hub-wrap{max-width:1280px}
.hub-wrap.wide{max-width:1560px}

/* ---------- Chrome di famiglia (topbar identica ovunque) ---------- */
.dlx-topbar{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}
.dlx-brand{display:flex;flex-direction:column;color:var(--accent)}
.dlx-brand .t1{font-weight:700;font-size:var(--fs-lg);line-height:1.1}
.dlx-brand .t2{font-size:var(--fs-xs);color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.dlx-sep{width:1px;height:22px;background:var(--border)}
.dlx-nav{display:flex;gap:var(--space-1);flex-wrap:wrap}
.dlx-nav a{padding:7px 14px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;color:var(--muted);text-decoration:none}
.dlx-nav a:hover{background:var(--bg-2);text-decoration:none}
.dlx-nav a.on{background:var(--accent);color:#fff}
.dlx-right{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}
.dlx-badge{font-size:10px;background:var(--accent-2);color:#fff;padding:4px 10px;border-radius:var(--radius-sm);letter-spacing:1px;text-transform:uppercase;font-weight:700}
.dlx-user{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 12px;border-radius:20px;background:var(--bg-1);border:1px solid var(--border);font-size:var(--fs-sm);font-weight:500}
.dlx-user .avatar{width:22px;height:22px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}

/* page-header: estende .hub-page-header del capitolato con slot azioni */
.hub-page-header h1{display:flex;align-items:center;gap:var(--space-2);color:var(--accent);font-weight:700;font-size:var(--fs-xl)}
.hub-page-header .pa{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.dlx-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4)}
.dlx-kpi .b{border-left:3px solid var(--accent-2);padding-left:var(--space-3)}
.dlx-kpi .b .l{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
.dlx-kpi .b .v{font-size:var(--fs-xl);font-weight:700;color:var(--accent);margin-top:2px}
.dlx-kpi .b .d{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}

/* ---------- Master-detail unico (lista sx + pane dx) ---------- */
.dlx-split{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-1);box-shadow:var(--shadow-sm);min-height:560px}
@media(max-width:900px){.dlx-split{grid-template-columns:1fr}}
.dlx-list{border-right:1px solid var(--border);background:var(--bg-2);display:flex;flex-direction:column}
.dlx-list .lh{padding:var(--space-4);border-bottom:1px solid var(--border)}
.dlx-list .lh h3{font-size:var(--fs-sm);font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}
.dlx-list .lh p{font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.dlx-list .items{overflow-y:auto;flex:1;padding:var(--space-3)}
.dlx-list .foot{padding:var(--space-3);border-top:1px solid var(--border)}
.dlx-grp{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;padding:var(--space-2) var(--space-2) var(--space-1)}
.dlx-li{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-1);padding:10px 12px;margin-bottom:var(--space-2);cursor:pointer}
.dlx-li:hover{border-color:var(--border-strong)}
.dlx-li.on{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2);border-left:3px solid var(--accent-2)}
.dlx-li .nm{font-weight:700;font-size:var(--fs-sm);display:flex;align-items:center;gap:6px}
.dlx-li .fx{font-size:var(--fs-xs);color:var(--muted);margin-top:3px}
.dlx-detail{padding:var(--space-5);overflow-y:auto}
.dlx-pane{display:none}.dlx-pane.on{display:block}
.dlx-detail h2{font-size:var(--fs-xl);font-weight:700;color:var(--accent);display:flex;align-items:center;gap:var(--space-2)}
.dlx-crumbs{font-size:var(--fs-xs);color:var(--muted);margin:4px 0 var(--space-4)}
.dlx-sect{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;border-left:3px solid var(--accent-2);padding-left:var(--space-2);margin:var(--space-4) 0 var(--space-3)}
.dlx-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px var(--space-5);font-size:var(--fs-sm)}
.dlx-kv > div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--border);padding:5px 0}
.dlx-kv .k{color:var(--muted)}
.dlx-kv .v{font-weight:500;text-align:right}
.dlx-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:680px){.dlx-grid2{grid-template-columns:1fr}}
.dlx-fld{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--space-3)}
.dlx-fld label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.dlx-fld .in{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 11px;font-size:var(--fs-sm);background:var(--bg-1)}
.dlx-mf{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4);border-top:1px solid var(--border);padding-top:var(--space-3)}

/* ---------- Pill canale OTA (token, NIENTE viola) ---------- */
.pill.ch-bdc{background:var(--info-bg);color:var(--info)}
.pill.ch-abb{background:var(--bad-bg);color:var(--bad)}
.pill.ch-exp{background:var(--bg-3);color:var(--accent)}
.pill.ch-be{background:var(--warn-bg);color:var(--warn)}
.pill.ch-vr{background:var(--good-bg);color:var(--good)}
.pill.rt{background:var(--bg-3);color:var(--muted);text-transform:none;letter-spacing:0}
.pill.stub{background:var(--warn-bg);color:var(--warn);border:1px dashed var(--accent-2);text-transform:uppercase;letter-spacing:.4px}

/* ---------- AI-assist (componente unico, coerente ovunque) ---------- */
.btn.ai{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn.ai:hover{filter:brightness(.95)}
.ai-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:var(--warn-bg);color:var(--warn);border-radius:var(--radius-sm);padding:2px 7px}
.ai-panel{background:var(--warn-bg);border:1px dashed var(--accent-2);border-radius:var(--radius-md);padding:12px 16px;font-size:var(--fs-sm);color:#6b521a;margin:var(--space-3) 0}
.ai-panel .t{font-weight:700;color:var(--accent);display:flex;align-items:center;gap:6px;margin-bottom:4px}

/* ---------- Note (alias verso .alert del capitolato) ---------- */
.dlx-note{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);border-left:4px solid var(--info);background:var(--info-bg);font-size:var(--fs-sm);color:var(--text);margin:var(--space-3) 0}
.dlx-note.warn{border-color:var(--warn);background:var(--warn-bg);color:#6b521a}

/* ---------- Griglie (regola tassativa: contenuto sempre dentro la cella) ---------- */
.cellclip{overflow:hidden;min-width:0}
.cellclip > *{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

.dlx-foot{font-size:var(--fs-xs);color:var(--muted);text-align:center;margin-top:var(--space-5);line-height:1.7}

/* ============================================================
   LEGACY ALIAS LAYER — armonizza il markup esistente dei mockup
   senza riscriverlo: i vecchi nomi-classe ereditano il look
   canonico/token. Caricato dopo hub-style.css.
   Gli stili di layout SPECIFICI di pagina (tree, planner grid,
   inbox 3-pane, unitcard/compo/amgrid, bar/dcell, diagram…)
   restano nel <style> locale del file ma vanno tokenizzati.
   ============================================================ */
body{font-family:var(--font-sans);background:var(--bg-0);color:var(--text);font-size:var(--fs-base);line-height:1.5;font-weight:500}
.wrap{max-width:1560px;margin:0 auto;padding:var(--space-5) var(--space-4) 60px}

/* chrome */
.topbar{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}
.brand{display:flex;flex-direction:column;color:var(--accent)}
.brand .t1{font-weight:700;font-size:var(--fs-lg);line-height:1.1}
.brand .t2{font-size:var(--fs-xs);color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.sep{width:1px;height:22px;background:var(--border)}
.nav{display:flex;gap:var(--space-1);flex-wrap:wrap}
.nav a{padding:7px 14px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;color:var(--muted);text-decoration:none}
.nav a:hover{background:var(--bg-2)}
.nav a.on{background:var(--accent);color:#fff}
.topbar .right{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}
.mock-badge{font-size:10px;background:var(--accent-2);color:#fff;padding:4px 10px;border-radius:var(--radius-sm);letter-spacing:1px;text-transform:uppercase;font-weight:700}
.user-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 12px;border-radius:20px;background:var(--bg-1);border:1px solid var(--border);font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.user-chip .avatar{width:22px;height:22px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}

/* hero → page-header piatto (NIENTE gradiente navy) */
.hero{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm);color:var(--text)}
.hero::before{display:none !important}
.hero .lbl{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.hero h1{font-size:var(--fs-xl);font-weight:700;color:var(--accent);margin:2px 0 0;display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.hero h1 .sub{font-weight:500;color:var(--muted);font-size:var(--fs-base)}
.hero p{font-size:var(--fs-sm);color:var(--muted);margin-top:6px}
.hero-status{font-size:var(--fs-xs);padding:4px 10px;border-radius:20px;background:var(--warn-bg);color:var(--warn);letter-spacing:.6px;text-transform:uppercase;font-weight:700}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4);margin-top:var(--space-4)}
.hero-box{padding:2px 0 2px var(--space-3);border-left:3px solid var(--accent-2)}
.hero-box .l{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.hero-box .v{font-size:var(--fs-xl);font-weight:700;color:var(--accent);margin-top:2px}
.hero-box .d{font-size:var(--fs-xs);margin-top:3px;color:var(--muted)}

/* tabs / subtabs → look hub-tab */
.tabs,.subtabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border);margin-bottom:var(--space-4);flex-wrap:wrap}
.tab,.subtab{padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);font-weight:500;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tab:hover,.subtab:hover{color:var(--text)}
.tab.on,.subtab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tab .count{font-size:var(--fs-xs);background:var(--bg-2);padding:2px 7px;border-radius:10px;color:var(--muted);font-weight:600}
.tab.on .count{background:var(--accent);color:#fff}

/* card */
.card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}
.card h3{font-size:var(--fs-sm);font-weight:700;color:var(--text);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.card h3 .tag{font-size:var(--fs-xs);background:var(--bg-2);color:var(--muted);padding:3px 8px;border-radius:10px;font-weight:500;letter-spacing:0;text-transform:none}
.card p.note,p.note{font-size:var(--fs-sm);color:var(--muted);margin:6px 0}

/* tabella .data → look hub-table */
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.data th{background:var(--bg-2);padding:9px 8px;text-align:left;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--border)}
table.data td{padding:var(--space-3) 8px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
table.data tr:hover td{background:var(--bg-2)}
table.data .c{text-align:center}
table.data .num{text-align:right;font-variant-numeric:tabular-nums}
code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:var(--bg-3);padding:1px 5px;border-radius:4px}

/* pill set unico (no viola): expedia/own/scope.uni → token, mai #6b46a8 */
.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.3px}
.pill.ok,.pill.good{background:var(--good-bg);color:var(--good)}
.pill.ko,.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.wt,.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.bdc{background:var(--info-bg);color:var(--info)}
.pill.abb{background:var(--bad-bg);color:var(--bad)}
.pill.be{background:var(--warn-bg);color:var(--warn)}
.pill.exp{background:var(--bg-3);color:var(--accent)}
.pill.own{background:var(--info-bg);color:var(--info)}
.pill.master{background:var(--info-bg);color:var(--info)}
.pill.base{background:var(--good-bg);color:var(--good)}
.pill.der{background:var(--warn-bg);color:var(--warn)}
.pill.off{background:var(--bg-3);color:var(--muted)}
.stub{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:var(--warn-bg);color:var(--warn);border:1px dashed var(--accent-2)}
.scope{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:1px 5px;border-radius:4px;margin-left:auto}
.scope.com{background:var(--good-bg);color:var(--good)}
.scope.uni{background:var(--info-bg);color:var(--info)}

/* note/box → look .alert */
.rulebox{background:var(--info-bg);border-left:4px solid var(--info);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);margin:var(--space-3) 0;color:var(--text)}
.calnote{background:var(--warn-bg);border-left:4px solid var(--warn);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);margin:var(--space-3) 0;color:#6b521a}
.seam,.seambox{border:1px dashed var(--accent-2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);background:var(--warn-bg);color:#6b521a;margin:var(--space-3) 0}
.seam h4{font-size:var(--fs-sm);font-weight:700;color:var(--accent);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seam .io{font-size:var(--fs-xs);color:#6b521a;margin-top:6px;line-height:1.6}
.askbox{background:var(--bg-1);border:1px solid var(--border);border-left:4px solid var(--accent-2);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);margin:var(--space-3) 0}

/* bottoni custom legacy → look .btn capitolato */
.addbtn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--accent);background:var(--bg-1);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;color:var(--accent);cursor:pointer}
.addbtn:hover{background:rgba(52,86,122,.08)}

/* misc legacy → token */
.foot{font-size:var(--fs-xs);color:var(--muted);text-align:center;margin-top:var(--space-6);line-height:1.7}
.hidden{display:none !important}
.fld label{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;margin-bottom:3px}
.fld .ro{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;font-size:var(--fs-sm);color:var(--text)}
.langtabs{display:flex;gap:var(--space-1);margin:8px 0;flex-wrap:wrap}
.langtabs button{padding:5px 12px;font-size:var(--fs-xs);font-weight:500;border:1px solid var(--border);background:var(--bg-1);border-radius:var(--radius-sm);color:var(--muted);cursor:pointer}
.langtabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.lp{display:none}.lp.on{display:block}

/* ============================================================
   APP-SHELL: il PMS vive DENTRO l'Hub → sidebar sempre presente
   (espansa o collassata). Markup: .dlx-app > aside.dlx-sb + .dlx-main
   ============================================================ */
.dlx-app{display:flex;min-height:100vh;align-items:stretch}
.dlx-sb{width:240px;flex:0 0 240px;background:var(--accent);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .15s,flex-basis .15s;overflow:hidden;z-index:200}
.dlx-app.collapsed .dlx-sb{width:62px;flex-basis:62px}
/* brand identico alla sidebar Hub reale (logo casa SVG oro + testo) */
.dlx-sb .sb-brand{display:flex;align-items:center;gap:10px;padding:6px 14px 14px;border-bottom:1px solid rgba(255,255,255,.10);cursor:pointer}
.dlx-sb .sb-brand:hover{opacity:.92}
.dlx-app.collapsed .dlx-sb .sb-brand{justify-content:center;padding:6px 0 14px}
.dlx-sb .sb-brand .lg-wrap{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto}
.dlx-sb .sb-brand .lg-wrap svg{width:32px;height:30px;display:block}
.dlx-sb .sb-brand .lg-wrap svg path{fill:var(--accent-2)}
.dlx-sb .sb-brand .tx{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap;min-width:0;overflow:hidden}
.dlx-sb .sb-brand .tx b{color:var(--accent-2);font-size:14.5px;font-weight:600;letter-spacing:.3px}
.dlx-sb .sb-brand .tx span{color:#fff;opacity:.92;font-size:11px;margin-top:2px;letter-spacing:.5px;text-transform:uppercase;font-weight:500}
.dlx-app.collapsed .dlx-sb .sb-brand .tx,.dlx-app.collapsed .dlx-sb .g-h .lbl,.dlx-app.collapsed .dlx-sb .it .lbl,.dlx-app.collapsed .dlx-sb .g-h .chev,.dlx-app.collapsed .dlx-sb .it .hint{display:none}
.dlx-sb .sb-scroll{flex:1;overflow-y:auto;padding:6px 0}
.dlx-sb .it{display:flex;align-items:center;gap:12px;padding:9px 16px;color:rgba(255,255,255,.92);font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;border-left:3px solid transparent}
.dlx-sb .it .icon{font-size:20px;flex:0 0 auto}
.dlx-sb .it:hover{background:rgba(255,255,255,.08)}
.dlx-sb .it.on{background:rgba(255,255,255,.12);border-left-color:var(--accent-2);color:#fff;font-weight:600}
.dlx-sb .it .hint{margin-left:auto;font-size:9px;background:var(--accent-2);color:#fff;border-radius:4px;padding:1px 5px;text-transform:uppercase;letter-spacing:.4px}
.dlx-sb .it.top{font-weight:600}
.dlx-sb .it.assist{margin:8px 10px 4px;border:1px solid var(--accent-2);border-left-width:1px;border-radius:8px;background:rgba(230,165,64,.16)}
.dlx-app.collapsed .dlx-sb .it.assist{margin:8px 8px 4px;padding:9px 0;justify-content:center}
.dlx-app.collapsed .dlx-sb .it{justify-content:center;padding:10px 0}
.dlx-sb .g{border-top:1px solid rgba(255,255,255,.10);margin-top:6px}
.dlx-sb .g-h{display:flex;align-items:center;gap:10px;padding:10px 16px 6px;font-size:14px;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.55);font-weight:700;cursor:pointer;white-space:nowrap}
.dlx-sb .g-h .gi{font-size:18px}
.dlx-sb .g-h .chev{margin-left:auto;transition:transform .15s}
.dlx-sb .g.closed .chev{transform:rotate(-90deg)}
.dlx-sb .g.closed .g-items{display:none}
.dlx-app.collapsed .dlx-sb .g-h{justify-content:center;padding:8px 0}
/* collapsed: flyout label/submenu su hover (overflow visibile o il flyout viene clippato) */
.dlx-app.collapsed .dlx-sb,.dlx-app.collapsed .dlx-sb .sb-scroll{overflow:visible}
.dlx-app.collapsed .dlx-sb .it,.dlx-app.collapsed .dlx-sb .g{position:relative}
.dlx-app.collapsed .dlx-sb .g .g-items{display:none}
.dlx-app.collapsed .dlx-sb .g:hover .g-items{display:block;position:absolute;left:62px;top:0;min-width:210px;background:var(--accent);border:1px solid rgba(255,255,255,.18);border-radius:0 8px 8px 0;box-shadow:var(--shadow-md);z-index:40;padding:6px 0}
.dlx-app.collapsed .dlx-sb .g:hover .g-items .it{justify-content:flex-start;padding:8px 14px}
.dlx-app.collapsed .dlx-sb .g:hover .g-items .it .lbl{display:inline}
/* sotto-gruppo (es. Impostazioni PMS dentro Sistema) */
.dlx-sb .sub-h{display:flex;align-items:center;gap:10px;padding:8px 16px 5px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:rgba(255,255,255,.5);font-weight:700;cursor:pointer;white-space:nowrap}
.dlx-sb .sub-h .sgi{font-size:17px}
.dlx-sb .sub-h .chev{margin-left:auto;font-size:16px;transition:transform .15s}
.dlx-sb .sub.closed .chev{transform:rotate(-90deg)}
.dlx-sb .sub.closed .sub-items{display:none}
.dlx-sb .sub-items .it{padding-left:34px}
.dlx-app.collapsed .dlx-sb .sub-h .lbl,.dlx-app.collapsed .dlx-sb .sub-h .chev{display:none}
/* nel flyout collassato il sotto-gruppo è sempre espanso e leggibile */
.dlx-app.collapsed .dlx-sb .g:hover .sub.closed .sub-items{display:block}
.dlx-app.collapsed .dlx-sb .g:hover .sub-h{padding:8px 14px 4px}
.dlx-app.collapsed .dlx-sb .g:hover .sub-h .lbl{display:inline}
.dlx-app.collapsed .dlx-sb .g:hover .sub-items .it{padding-left:28px}
.dlx-sb .sb-toggle{border-top:1px solid rgba(255,255,255,.14);padding:10px 16px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:12px;cursor:pointer;white-space:nowrap}
.dlx-app.collapsed .dlx-sb .sb-toggle{justify-content:center;padding:10px 0}
.dlx-app.collapsed .dlx-sb .sb-toggle .lbl{display:none}
.dlx-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dlx-main .wrap{max-width:none;width:100%}
/* la nav in-pagina dei mockup è ridondante dentro l'Hub: la sidebar è la nav */
.dlx-app .topbar .nav,.dlx-app .topbar .sep,.dlx-app .topbar .brand{display:none}