/* ── SCREENS ── */
.screen{display:none;min-height:100vh}
.screen.on{display:flex}

/* ── LOGIN ── */
#s-login{background:var(--navy);align-items:center;justify-content:center;position:relative;overflow:hidden}
.login-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(5,150,105,.1),transparent 65%);top:-200px;right:-100px;pointer-events:none;animation:gf 14s ease-in-out infinite}
@keyframes gf{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,25px)}}
.login-card{background:#fff;border-radius:var(--r-xl);width:420px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.4);position:relative;z-index:2;animation:lc .5s cubic-bezier(.22,.88,.36,1) both}
@keyframes lc{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.lc-head{background:var(--navy);padding:2rem 2.25rem 1.75rem;position:relative}
.lc-head::after{content:'';position:absolute;bottom:0;left:0;right:0;height:18px;background:#fff;border-radius:18px 18px 0 0}
.lc-accent{position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.lc-logo{display:flex;align-items:center;gap:9px;margin-bottom:1.5rem}
.lc-logo-mark{width:32px;height:32px;border:1px solid rgba(255,255,255,.15);border-radius:8px;display:flex;align-items:center;justify-content:center}
.lc-logo-mark i{font-size:16px;color:var(--accent)}
.lc-logo-name{font-family:var(--serif);font-size:15px;font-weight:600;color:#fff;letter-spacing:.02em}
.lc-logo-name span{color:var(--accent)}
.lc-title{font-family:var(--serif);font-size:26px;color:#fff;line-height:1.15;margin-bottom:.3rem}
.lc-sub{font-size:12.5px;color:rgba(255,255,255,.4);line-height:1.6}
.lc-body{padding:1.875rem 2.25rem 2.25rem}
.role-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--surface);border-radius:var(--r-sm);padding:3px;margin-bottom:1.375rem}
.rt-btn{padding:.55rem;border:none;border-radius:calc(var(--r-sm) - 2px);background:transparent;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:6px}
.rt-btn.on{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.09)}
.l-alert{display:none;padding:.55rem .875rem;border-radius:var(--r-sm);font-size:12px;margin-bottom:.875rem;gap:6px;align-items:flex-start}
.l-alert.show{display:flex}
.l-err{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}
.l-ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}

/* ── APP SHELL ── */
#s-app{display:none;flex-direction:row;min-height:100vh}
#s-app.on{display:flex;flex-direction:row}

/* Sidebar */
.sidebar{width:214px;background:var(--navy);flex-shrink:0;display:flex;flex-direction:column}
.sb-logo{padding:1.375rem 1.125rem 1.125rem;border-bottom:1px solid rgba(255,255,255,.06)}
.sb-logo-row{display:flex;align-items:center;gap:8px}
.sb-logo-icon{width:28px;height:28px;border:1px solid rgba(255,255,255,.12);border-radius:6px;display:flex;align-items:center;justify-content:center}
.sb-logo-icon i{font-size:14px;color:var(--accent)}
.sb-logo-text{font-family:var(--serif);font-size:14px;color:#fff}
.sb-logo-text em{color:var(--accent);font-style:normal}
.sb-farm{margin-top:.625rem;font-size:11px;color:rgba(255,255,255,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .125rem}
.sb-nav{flex:1;padding:.875rem .625rem;overflow-y:auto}
.sb-cat{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.2);padding:.25rem .5rem;margin-bottom:.2rem;margin-top:.625rem}
.sb-cat:first-child{margin-top:0}
.sbi{display:flex;align-items:center;gap:8px;padding:.5rem .625rem;border-radius:var(--r-sm);cursor:pointer;color:rgba(255,255,255,.45);font-size:12px;font-weight:400;transition:all .15s;margin-bottom:1px}
.sbi i{font-size:15px;flex-shrink:0}
.sbi:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}
.sbi.active{background:rgba(5,150,105,.15);color:#fff;font-weight:500}
.sbi.active i{color:var(--accent)}
.sb-foot{padding:.875rem .75rem;border-top:1px solid rgba(255,255,255,.06)}
.sb-user{display:flex;align-items:center;gap:8px}
.sb-av{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;flex-shrink:0}
.sb-uinfo{flex:1;min-width:0}
.sb-uname{font-size:11.5px;font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-urole{font-size:9.5px;color:rgba(255,255,255,.3)}
.sb-logout{color:rgba(255,255,255,.25);font-size:15px;cursor:pointer;padding:3px}
.sb-logout:hover{color:rgba(255,255,255,.6)}

/* Main */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:52px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 1.5rem;gap:1rem;flex-shrink:0}
.tb-title{font-family:var(--serif);font-size:16px;color:var(--navy);font-weight:400}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.content{flex:1;overflow-y:auto;padding:1.5rem}

/* Pages */
.page{display:none}
.page.on{display:block;animation:fi .22s ease}

/* ── CHIP ── */
.chip{padding:.35rem .875rem;border-radius:20px;border:1.5px solid var(--border);background:#fff;font-family:var(--sans);font-size:12px;color:var(--mid);cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── QUESTIONARIO ── */
.q-option{
  padding:.75rem 1rem;
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  background:#fff;
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink);
  cursor:pointer;
  transition:all .15s;
  text-align:left;
  width:100%;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.q-option:hover{border-color:var(--navy);color:var(--navy);background:#f8faff}
.q-option.selected{border-color:var(--accent);background:#f0fdf4;color:var(--accent2);font-weight:500}
.q-option .q-idx{
  width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
  transition:all .15s;
}
.q-option.selected .q-idx{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── MENU BUTTON MOBILE ── */
.btn-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .375rem;
  border-radius: var(--r-sm);
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
  margin-right: .5rem;
}
.btn-menu:hover { background: var(--surface) }

.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 99;
}
.sb-overlay.show { display: block }

.btn-label { display: inline }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {

  /* Sidebar */
  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    height: 100vh;
    z-index: 100;
    transition: left .25s ease;
    box-shadow: none;
  }
  .sidebar.open {
    left: 0;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }

  /* Main prende tutto lo schermo */
  .main { margin-left: 0 !important; width: 100% }

  /* Topbar */
  .btn-menu { display: flex; align-items: center; justify-content: center }
  .tb-title { font-size: 14px }
  .btn-label { display: none }

  /* Content padding ridotto */
  .content { padding: 1rem }
  .ph { margin-bottom: 1rem }
  .ph h1 { font-size: 20px }

  /* Card full width */
  .card { padding: 1rem }
  .card-sm { padding: .625rem .875rem }

  /* Grid KPI su 2 colonne */
  #stats-kpi { grid-template-columns: repeat(2, 1fr) !important }

  /* Grid lifestyle su 2 colonne */
  #lifestyle-grid { grid-template-columns: repeat(2, 1fr) !important }

  /* Distribuzione score e aree in colonna */
  #stats-kpi ~ div { flex-direction: column }

  /* Tabella archivio scrollabile */
  .card { overflow-x: auto }

  /* Hero risultati in colonna */
  .card[style*="background:var(--navy)"] > div,
  .card[style*="background:#0c2340"] > div { flex-wrap: wrap }

  /* Login card */
  .login-card { margin: 1rem; width: calc(100% - 2rem); max-width: 100% }
  .lc-head { padding: 1.5rem 1.5rem 0 }
  .lc-body { padding: 1rem 1.5rem 1.5rem }

  /* Bottoni azioni in colonna */
  .card .btn + .btn { margin-top: .375rem }

  /* Questionario opzioni più compatte */
  .q-option { padding: .625rem .875rem; font-size: 12.5px }

  /* Nasconde testo lungo nella sidebar quando chiusa */
  .sb-farm { font-size: 10px }
}

@media (max-width: 420px) {
  .content { padding: .75rem }
  .topbar { padding: 0 .875rem }
  #stats-kpi { grid-template-columns: repeat(2, 1fr) !important }
  .ph h1 { font-size: 18px }
}