/* ============ Guscio del gestionale ============ */
.shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 12px;
  padding: 18px 14px; background: var(--card); border-right: 2px solid var(--line); z-index: 40; overflow: hidden;
}
.sb-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.sb-logo { text-decoration: none !important; }
.sb-structure {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 18px; border: 0; text-align: left;
  background: color-mix(in srgb, var(--c) 14%, var(--card)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); color: var(--ink); position: relative;
}
.sb-structure b { display: block; font: 600 15px var(--font-display); }
.sb-structure small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.sb-structure svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.sb-structure.bump { animation: pop .4s ease; }
.sb-st-emoji { font-size: 26px; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--card); flex: none; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; }
.structure-dd { left: 14px; right: 14px; top: 132px; min-width: 0; }
.sb-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.sb-nav a {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; color: var(--ink-2);
  font: 600 15px var(--font-display); text-decoration: none !important; transition: background .15s, color .15s, transform .15s;
}
.sb-nav a .ni { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--c) 14%, transparent); transition: transform .2s; flex: none; }
.sb-nav a:hover { background: var(--bg-2); color: var(--ink); }
.sb-nav a:hover .ni { transform: rotate(-8deg) scale(1.08); }
.sb-nav a.on { background: color-mix(in srgb, var(--c) 16%, var(--card)); color: var(--ink); }
.sb-nav a.on .ni { background: var(--c); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 60%, #000 10%); }
.sb-sep { font: 800 11px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 12px 4px; }
.nb { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--red); color: #fff; font: 800 11.5px/22px var(--font); text-align: center; }
.sb-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 2px dashed var(--line); }
.sb-devices { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none !important; padding: 0 4px; }
.sb-devices .user-av { width: 28px; height: 28px; font-size: 14px; border-radius: 10px; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: var(--bg-2); }
.sb-user b { display: block; font: 600 14px var(--font-display); max-width: 150px; }
.sb-user small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.sb-user .icon-btn { width: 36px; height: 36px; box-shadow: none; background: transparent; }
.sb-backdrop { display: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 26px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 2px solid transparent;
}
.search { position: relative; flex: 1; max-width: 520px; }
.search .input { border-radius: 16px; background: var(--card); padding-right: 64px; }
.search .kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.search-dd { left: 0; right: 0; max-height: 70vh; overflow: auto; }
.dd-h { padding: 8px 12px 2px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.rel { position: relative; }
.quick-dd { right: 0; }
.notif-dd { right: 0; width: min(380px, 92vw); }
.notif-list { max-height: 60vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.notif { display: flex; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none !important; position: relative; }
.notif:hover { background: var(--bg-2); }
.notif .emoji { font-size: 22px; width: 38px; height: 38px; border-radius: 12px; background: var(--bg-2); display: grid; place-items: center; flex: none; }
.notif b { display: block; font-size: 14px; }
.notif small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.notif.unread::after { content: ''; position: absolute; right: 10px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.cloud-chip svg { width: 15px; height: 15px; }
#bell-btn.ringing svg { animation: ring .9s ease; transform-origin: 50% 10%; }

.view { padding: 12px 26px 60px; max-width: 1480px; width: 100%; }
.view-host.view-enter { animation: rise .4s cubic-bezier(.2, .8, .3, 1) both; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 22px; }
.ph-title { display: flex; align-items: center; gap: 16px; }
.ph-title h1 { font-size: clamp(26px, 3vw, 36px); margin: 0; }
.ph-title p { margin: 2px 0 0; }
.ph-emoji { font-size: 34px; width: 62px; height: 62px; border-radius: 22px; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow-sm); animation: float 4s ease-in-out infinite; }
.ph-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.bottom-nav { display: none; }
.only-mobile { display: none !important; }
.sb-nav .ns { display: none; }

@media (max-width: 900px) {
  .only-mobile { display: inline-grid !important; }
  .hide-mobile { display: none !important; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .view { padding: 8px 14px 60px; }
  .ph-emoji { width: 50px; height: 50px; font-size: 28px; border-radius: 18px; }
}

/* Tablet: un solo menu, una colonna stretta sempre visibile (niente barra in basso né menu a scomparsa) */
@media (min-width: 641px) and (max-width: 900px) {
  .shell { grid-template-columns: 92px minmax(0, 1fr); }
  .sidebar { padding: 12px 8px; gap: 10px; overflow: visible; }
  .sidebar .only-mobile, .sidebar .logo-text, .sb-sep, .sb-devices, .sb-structure .grow, .sb-structure > svg, .sb-user .grow { display: none !important; }
  .sb-top { justify-content: center; padding: 0; }
  .sb-structure { justify-content: center; padding: 6px; }
  .sb-nav { margin: 0 -4px; padding: 0 4px; gap: 3px; }
  .sb-nav a { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 11px; line-height: 1.15; text-align: center; position: relative; border-radius: 16px; }
  .sb-nav a .grow { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-nav .nl { display: none; }
  .sb-nav .ns { display: inline; }
  .sb-nav a .nb { position: absolute; top: 2px; right: 8px; min-width: 18px; height: 18px; line-height: 18px; font-size: 10px; padding: 0 4px; }
  .sb-foot { align-items: center; }
  .sb-user { flex-direction: column; gap: 4px; padding: 6px; }
  .structure-dd { left: 8px; right: auto; width: 290px; top: 96px; }
}

/* Telefono: barra in basso con le pagine principali; "Menu" apre il menu completo, che la copre */
@media (max-width: 640px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 290px; z-index: 60; transform: translateX(-105%); transition: transform .3s cubic-bezier(.2, .9, .3, 1); box-shadow: var(--shadow-lg); }
  body.menu-open .sidebar { transform: none; }
  body.menu-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(30, 20, 50, .4); z-index: 55; }
  .view { padding-bottom: 110px; }
  .bottom-nav {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 45; background: var(--card); border-radius: 24px;
    box-shadow: var(--shadow-lg); padding: 6px; justify-content: space-around; border: 2px solid var(--line);
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 18px; border: 0; background: none; color: var(--ink-2); text-decoration: none !important; position: relative; }
  .bottom-nav .emoji { font-size: 22px; }
  .bottom-nav small { font: 700 11px var(--font); }
  .bottom-nav a.on { background: var(--brand-soft); color: var(--ink); }
  .bottom-nav .nb { position: absolute; top: 0; right: 18%; height: 18px; min-width: 18px; line-height: 18px; font-size: 10px; padding: 0 4px; }
}
@media (max-width: 480px) { .search .input { padding-right: 14px; } }
[data-theme="dark"] .sb-nav a .ni, [data-theme="dark"] .kpi-ic, [data-theme="dark"] .ph-emoji, [data-theme="dark"] .rec-ic { background: color-mix(in srgb, var(--c, #8E6CFF) 34%, #4a4170); }
[data-theme="dark"] .sb-nav a.on .ni { background: var(--c); }