/* ============================================================
   Shell Stopazzo per Travel Plan — sidebar, header, bottom nav
   Variabili namespaced --sz-* per non collidere con app.css
   ============================================================ */
:root{
  --sz-primary:#2D6A7A; --sz-primary-light:rgba(45,106,122,.12);
  --sz-bg-sidebar:#2C2C2C;
  --sz-text-light:#FAFAFA; --sz-text-muted:#9b9b9b; --sz-on-primary:#FFFFFF;
  --sz-sidebar-w:220px;
}
/* Temi Stopazzo (letti da localStorage stopazzo_theme) */
body[data-sz-theme="terracotta"]{ --sz-primary:#D4894A; --sz-primary-light:rgba(212,137,74,.15); }
body[data-sz-theme="teal"]{ --sz-primary:#3D8B8B; --sz-primary-light:rgba(61,139,139,.12); }
body[data-sz-theme="green"]{ --sz-primary:#6B8E4E; --sz-primary-light:rgba(107,142,78,.15); }

/* ---- Sidebar (stile identico a Stopazzo) ---- */
.sz-sidebar{ width:var(--sz-sidebar-w); background:var(--sz-bg-sidebar); padding:16px;
  display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; }
.sz-logo{ text-align:center; padding:12px 0 24px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:16px; }
.sz-logo-icon{ font-size:2.5rem; margin-bottom:4px; }
.sz-logo-text{ color:var(--sz-text-light); font-weight:700; font-size:1.25rem; letter-spacing:1px; }
.sz-logo-tag{ color:var(--sz-primary); font-size:.55rem; letter-spacing:2px; margin-top:2px; text-transform:uppercase; }
.sz-nav{ flex:1; }
.sz-nav a, .sz-nav button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border-radius:8px; color:#FAFAFA; opacity:.75; font-size:.95rem; margin-bottom:4px;
  background:none; border:none; cursor:pointer; font-family:var(--font); text-decoration:none; }
.sz-nav a:hover, .sz-nav button:hover{ background:rgba(255,255,255,.08); opacity:1; }
.sz-nav a.active, .sz-nav button.active{ background:var(--sz-primary); color:var(--sz-on-primary); font-weight:600; opacity:1; }
.sz-nav svg{ width:18px; height:18px; flex-shrink:0; }
.sz-user{ border-top:1px solid rgba(255,255,255,.1); padding-top:12px; display:flex; align-items:center; gap:8px; }
.sz-user-avatar{ width:38px; height:38px; border-radius:50%; background:var(--sz-primary); display:flex;
  align-items:center; justify-content:center; color:var(--sz-on-primary); font-weight:600; font-size:.85rem; }
.sz-user-name{ color:var(--sz-text-light); font-size:.9rem; font-weight:500; }
.sz-user-role{ color:var(--sz-text-muted); font-size:.75rem; }

/* ---- Mobile header (stile Stopazzo) ---- */
.sz-mobile-header{ display:none; background:var(--sz-bg-sidebar); padding:14px 16px;
  align-items:center; justify-content:space-between; position:sticky; top:0; z-index:90; }
.sz-mobile-logo{ display:flex; align-items:center; gap:8px; color:var(--sz-text-light); font-weight:700; font-size:1rem; }

/* ---- Bottom nav mobile (stile Stopazzo) ---- */
.sz-bottomnav{ display:none; position:fixed; bottom:0; left:0; right:0; background:var(--panel);
  border-top:1px solid var(--line); padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  justify-content:space-around; align-items:center; z-index:100; box-shadow:0 -2px 10px rgba(0,0,0,.05); }
.sz-bottomnav button, .sz-bottomnav a{ display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 8px; color:var(--muted); font-size:.6rem; background:none; border:none;
  font-family:var(--font); cursor:pointer; text-decoration:none; }
.sz-bottomnav .active{ color:var(--sz-primary); }
.sz-bottomnav svg{ width:22px; height:22px; }

/* ---- Layout: contenuto a destra della sidebar su desktop ---- */
@media (min-width:901px){
  body.sz-shell{ padding-left:var(--sz-sidebar-w); }
  body.sz-shell .sz-mobile-header, body.sz-shell .sz-bottomnav{ display:none; }
}
@media (max-width:900px){
  body.sz-shell .sz-sidebar{ display:none; }
  body.sz-shell .sz-mobile-header{ display:flex; }
  body.sz-shell .sz-bottomnav{ display:flex; }
  body.sz-shell .wrap{ padding-bottom:96px; }
}

/* ============================================================
   SKIN OCEANO per la shell (override delle regole sopra)
   ============================================================ */
:root{
  --sz-primary:#2563EB; --sz-primary-light:#EAF0FB;
  --sz-bg-sidebar:#FFFFFF;
  --sz-text-light:#10151C; --sz-text-muted:#7C8694; --sz-on-primary:#FFFFFF;
}
.sz-sidebar{ border-right:1px solid var(--line,#E2E7EE); }
.sz-logo{ border-bottom-color:var(--line,#E2E7EE); }
.sz-logo-text{ font-family:'Space Grotesk',sans-serif; }
.sz-nav a, .sz-nav button{ color:var(--sz-text-muted); opacity:1; font-weight:500; }
.sz-nav a:hover, .sz-nav button:hover{ background:#F0F3F8; color:var(--sz-text-light); }
.sz-user{ border-top-color:var(--line,#E2E7EE); }
.sz-user-avatar{ background:#10151C; border-radius:9px; }
.sz-mobile-header{ border-bottom:1px solid var(--line,#E2E7EE); }