/* shell.css — guscio SP0 (sidebar + topbar) stile app di Simone.
   Portato da mockup_shell.html (markup+CSS validato a video dal committente).
   Tutte le classi sono prefissate "sh-" per non collidere con app.css esistente.
   Le CSS custom properties del mockup sono scopate sotto .sh-shell (invece di :root)
   per lo stesso motivo: app.css definisce già --muted/--card/--line/--ink globali
   con significati diversi. I VALORI restano identici al mockup approvato. */

.sh-shell{
  --sh-sidebar:#172C4E; --sh-sidebar-deep:#12233F; --sh-sel-a:#2456A0; --sh-sel-b:#3D78C6;
  --sh-content:#F7F9FD; --sh-card:#FFFFFF; --sh-line:#E6EAF2;
  --sh-ink:#20304C; --sh-muted:#8996AE; --sh-blue:#2C63A6; --sh-blue-strong:#2456A0;
  --sh-green:#159C77; --sh-green-soft:#14867A; --sh-red:#E7443B;
  --sh-side-text:#EAF0FA; --sh-side-dim:#AEBDD6; --sh-side-line:#2B4066; --sh-cu-green:#5FD0A8;
  --sh-font:'Poppins','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;

  display:flex;
  font-family:var(--sh-font);
  color:var(--sh-ink);
  min-height:100vh;
}

.sh-side{width:262px; flex:0 0 262px; background:var(--sh-sidebar); color:var(--sh-side-text); display:flex; flex-direction:column}
.sh-brand{background:#fff; padding:14px 16px 12px; display:flex; align-items:center; gap:9px}
.sh-bee{width:34px; height:34px; border-radius:50%; background:#F5B301; display:flex; align-items:center; justify-content:center; font-size:18px}
.sh-brandtxt{line-height:1.05}
.sh-brandtxt .sh-l1{font-weight:700; font-size:14px; letter-spacing:.3px}
.sh-brandtxt .sh-l1 b{color:#1B3B73} .sh-brandtxt .sh-l1 i{color:#3D78C6; font-style:normal}
.sh-brandtxt .sh-l2{font-size:7.5px; letter-spacing:2px; color:#7C8AA3; font-weight:600}
.sh-sb{margin-left:2px; width:19px; height:19px; border-radius:50%; border:1.5px solid #1B3B73; color:#1B3B73; font-size:8px; font-weight:700; display:flex; align-items:center; justify-content:center}
.sh-cllps{margin-left:auto; color:#9aa7bf; cursor:pointer}
.sh-ver{font-size:10px; color:var(--sh-side-dim); padding:7px 16px 4px; background:var(--sh-sidebar)}

.sh-nav{flex:1; overflow-y:auto; padding:8px 12px}
.sh-nav::-webkit-scrollbar{width:6px} .sh-nav::-webkit-scrollbar-thumb{background:#31486e; border-radius:3px}
.sh-item{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px; color:var(--sh-side-text); font-size:14px; cursor:pointer; position:relative; margin:3px 0; text-decoration:none}
.sh-item:hover{background:#20365c}
.sh-item.active{background:linear-gradient(95deg,var(--sh-sel-a),var(--sh-sel-b)); color:#fff; font-weight:500; box-shadow:0 4px 14px rgba(45,110,200,.35)}
.sh-item svg{width:20px; height:20px; flex:0 0 20px}
.sh-reddot{width:8px; height:8px; border-radius:50%; background:var(--sh-red); flex:0 0 8px}
.sh-chevbox{margin-left:auto; display:flex; align-items:center; padding-left:10px; border-left:1px solid rgba(255,255,255,.18)}
.sh-chevbox svg{width:16px; height:16px}
.sh-cu{margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--sh-cu-green); flex:0 0 7px}
.sh-wip{margin-left:auto; width:8px; height:8px; border-radius:50%; background:#F5A623; box-shadow:0 0 0 1px #E08E00; flex:0 0 8px}
.sh-item .sh-cu + .sh-wip, .sh-item .sh-reddot + .sh-wip, .sh-subitem .sh-cu + .sh-wip{margin-left:8px}
.sh-item .sh-wip + .sh-chevbox{margin-left:9px}
.sh-item .sh-reddot + .sh-chevbox, .sh-item .sh-cu + .sh-chevbox{margin-left:9px}
.sh-sub{margin:1px 0 7px 16px; padding-left:10px; border-left:1px solid var(--sh-side-line); display:none; flex-direction:column}
.sh-nav-group.open > .sh-sub{display:flex}
.sh-chevbox svg{transition:transform .18s ease}
.sh-nav-group.open .sh-chevbox svg{transform:rotate(180deg)}
.sh-subitem{display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:9px; color:#AFC0DC; font-size:12.5px; cursor:pointer; text-decoration:none}
.sh-subitem:hover{background:#1d3357; color:#fff}
.sh-subitem.active{background:#1d3357; color:#fff}
.sh-subitem svg{width:15px; height:15px; flex:0 0 15px; opacity:.85}
.sh-subitem .sh-cu{margin-left:6px}

.sh-foot{padding:10px 12px 8px}
.sh-cal{background:var(--sh-sidebar-deep); border-radius:12px; padding:12px; text-align:center}
.sh-cal .sh-m{font-size:10.5px; letter-spacing:1.5px; color:var(--sh-side-dim); font-weight:600}
.sh-cal .sh-d{font-size:34px; font-weight:700; color:#fff; line-height:1.1}
.sh-cal .sh-w{font-size:10px; letter-spacing:1px; color:var(--sh-side-dim); border-top:1px solid var(--sh-side-line); padding-top:6px; margin-top:2px}
.sh-cal .sh-t{display:inline-block; margin-top:8px; background:#20365c; color:#dce6f6; font-size:11px; padding:3px 12px; border-radius:20px}
.sh-legend{font-size:10px; color:var(--sh-side-dim); padding:8px 4px 2px; display:flex; align-items:center; gap:6px}
.sh-legend .sh-cu, .sh-legend .sh-wip{margin:0}

.sh-main{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--sh-content)}
.sh-topbar{padding:22px 44px 8px; display:flex; align-items:flex-start; gap:20px}
.sh-page{padding:14px 44px 40px; min-width:0}
.sh-greet h1{font-size:30px; font-weight:700; color:var(--sh-blue); line-height:1.05; letter-spacing:.3px}
.sh-goalcard{flex:1; max-width:520px; background:var(--sh-card); border-radius:16px; padding:15px 20px; box-shadow:0 4px 18px rgba(30,60,110,.07)}
.sh-goalcard .sh-r1{display:flex; align-items:center; gap:11px}
.sh-gi{width:38px; height:38px; border-radius:11px; background:var(--sh-blue-strong); color:#fff; display:flex; align-items:center; justify-content:center}
.sh-goalcard .sh-gt{font-size:16px; font-weight:600; color:var(--sh-ink)}
.sh-pct{margin-left:auto; background:#DCE9FA; color:var(--sh-blue-strong); font-size:13px; font-weight:600; padding:3px 12px; border-radius:14px}
.sh-gbar{height:9px; background:#E9EEF7; border-radius:6px; margin:11px 0 10px; overflow:hidden}
.sh-gbar>i{display:block; height:100%; width:32%; background:linear-gradient(90deg,#2456A0,#159C77); border-radius:6px}
.sh-grow{display:flex; align-items:center; justify-content:space-between}
.sh-geur{font-size:15px; font-weight:700} .sh-geur b{color:var(--sh-green)} .sh-geur span{color:var(--sh-muted); font-weight:500}
.sh-gupd{font-size:12px; color:var(--sh-muted); background:#F1F5FB; padding:5px 12px; border-radius:20px}
.sh-prof{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.sh-profcard{display:flex; align-items:center; gap:12px; background:var(--sh-card); border-radius:16px; padding:11px 18px 11px 12px; box-shadow:0 4px 18px rgba(30,60,110,.07)}
.sh-av{width:44px; height:44px; border-radius:50%; border:2px solid #D8E2F1; color:var(--sh-blue-strong); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px}
.sh-profcard .sh-pn{font-size:16px; color:var(--sh-blue); font-weight:500}
.sh-lg{color:var(--sh-blue-strong); display:flex}
.sh-fs{font-size:12px; color:var(--sh-muted)} .sh-fs b{color:var(--sh-blue); font-weight:600}

.sh-body{padding:14px 30px 30px}
.sh-body h2{font-size:26px; font-weight:700; color:var(--sh-blue); margin-bottom:3px}
.sh-body .sh-sub2{font-size:14px; color:var(--sh-muted); margin-bottom:20px}
.sh-cards2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.sh-bigcard{border-radius:18px; padding:26px 28px; min-height:210px; border:1px solid}
.sh-bc-blue{background:#EDF3FB; border-color:#DBE7F6}
.sh-bc-green{background:#EAF6F0; border-color:#D6EEE2}
.sh-bcico{width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.sh-bc-blue .sh-bcico{background:#DBE7F8; color:var(--sh-blue-strong)}
.sh-bc-green .sh-bcico{background:#D3EDE0; color:var(--sh-green-soft)}
.sh-bigcard h3{font-size:22px; font-weight:700; margin-bottom:7px}
.sh-bc-blue h3{color:var(--sh-blue)} .sh-bc-green h3{color:var(--sh-green-soft)}
.sh-bigcard p{font-size:13.5px; color:#6A798F; margin-bottom:20px; line-height:1.5}
.sh-openbtn{display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:13px; font-weight:600; padding:10px 18px; border-radius:22px; text-decoration:none}
.sh-bc-blue .sh-openbtn{background:var(--sh-blue-strong)} .sh-bc-green .sh-openbtn{background:var(--sh-green-soft)}