/* Guscio applicazione ICT OSA — layout responsive (header + sidebar + contenuto + footer). */
:root{
  --s-accent:#1f8a70; --s-accent-d:#176b57; --s-accent-soft:#e7f4f0;
  --s-ink:#1c2430; --s-dim:#6b7683; --s-line:#e6e9ee;
  --s-sidebar:#0f2b25; --s-sidebar-ink:#cfe3dc; --s-sidebar-dim:#7fa397;
  --s-bg:#f2f4f7; --s-surface:#fff; --s-header-h:60px; --s-sidebar-w:264px;
  --s-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ===== Temi (preferenza utente: chiaro | scuro | auto) =====================
   Il tema scuro ridefinisce le variabili di guscio (--s-*) e della griglia
   (--g-*, da grid.css) su body.app: essendo antenato più vicino di :root vince
   il valore scuro per header/sidebar/card/tabelle/form.
   "auto" segue le preferenze del sistema (prefers-color-scheme). */
body.app[data-theme="scuro"]{
  color-scheme: dark;
  --s-ink:#e7edf3; --s-dim:#93a1b0; --s-line:#26313d;
  --s-bg:#0e141b; --s-surface:#161e28;
  --s-sidebar:#0b1712; --s-sidebar-ink:#c3d6cd; --s-sidebar-dim:#6f9184;
  --s-accent-soft:#123329;
  /* griglia (grid.css) */
  --g-bg:#0e141b; --g-card:#161e28; --g-ink:#e7edf3; --g-dim:#93a1b0;
  --g-line:#26313d; --g-line-2:#33404d; --g-head:#1b2530; --g-hover:#182430;
  --g-accent-soft:#123329;
}
@media (prefers-color-scheme: dark){
  body.app[data-theme="auto"]{
    color-scheme: dark;
    --s-ink:#e7edf3; --s-dim:#93a1b0; --s-line:#26313d;
    --s-bg:#0e141b; --s-surface:#161e28;
    --s-sidebar:#0b1712; --s-sidebar-ink:#c3d6cd; --s-sidebar-dim:#6f9184;
    --s-accent-soft:#123329;
    --g-bg:#0e141b; --g-card:#161e28; --g-ink:#e7edf3; --g-dim:#93a1b0;
    --g-line:#26313d; --g-line-2:#33404d; --g-head:#1b2530; --g-hover:#182430;
    --g-accent-soft:#123329;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.app{font-family:var(--s-font);color:var(--s-ink);background:var(--s-bg);min-height:100vh}

/* ---- header ---- */
.app-header{position:fixed;top:0;left:0;right:0;height:var(--s-header-h);z-index:40;
  background:var(--s-surface);border-bottom:1px solid var(--s-line);display:flex;align-items:center;gap:14px;padding:0 18px}
.app-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;color:var(--s-ink)}
.app-burger:hover{background:var(--s-bg)}
.app-burger svg{width:22px;height:22px;display:block}
.app-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;color:var(--s-ink)}
.app-brand .dot{width:26px;height:26px;border-radius:8px;background:var(--s-accent);color:#fff;
  display:grid;place-items:center;font-size:.8rem;font-weight:700}
.app-header__spacer{flex:1}
.app-user{display:flex;align-items:center;gap:10px;position:relative}
.app-user__btn{display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:10px}
.app-user__btn:hover{background:var(--s-bg)}
.app-user__av{width:34px;height:34px;border-radius:50%;background:var(--s-accent-soft);color:var(--s-accent-d);
  display:grid;place-items:center;font-weight:700;font-size:.85rem}
.app-user__meta{text-align:left;line-height:1.2}
.app-user__name{font-weight:600;font-size:.86rem}
.app-user__role{font-size:.72rem;color:var(--s-dim);text-transform:uppercase;letter-spacing:.04em}
.app-user__menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--s-surface);border:1px solid var(--s-line);
  border-radius:12px;box-shadow:0 10px 30px rgba(20,30,45,.12);min-width:180px;padding:6px;display:none}
.app-user__menu.open{display:block}
.app-user__menu a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:8px;text-decoration:none;
  color:var(--s-ink);font-size:.9rem}
.app-user__menu a:hover{background:var(--s-bg)}
@media(max-width:640px){.app-user__meta{display:none}}

/* ---- sidebar ---- */
.app-sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--s-sidebar-w);z-index:50;
  background:var(--s-sidebar);color:var(--s-sidebar-ink);display:flex;flex-direction:column;
  transform:translateX(0);transition:transform .25s ease}
.app-sidebar__head{height:var(--s-header-h);display:flex;align-items:center;gap:10px;padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);flex:none}
.app-sidebar__head img{height:26px;width:auto}
.app-sidebar__head b{font-weight:700;font-size:1rem;color:#fff}
.app-nav{flex:1;overflow-y:auto;padding:12px 10px 24px;scrollbar-width:thin}
.app-nav__link,.app-nav__toggle{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:10px 12px;border-radius:9px;color:var(--s-sidebar-ink);text-decoration:none;background:none;border:none;
  cursor:pointer;font:inherit;font-size:.9rem;font-weight:500;transition:background .15s,color .15s}
.app-nav__link:hover,.app-nav__toggle:hover{background:rgba(255,255,255,.06);color:#fff}
.app-nav__link.active{background:var(--s-accent);color:#fff}
.app-nav__toggle.open{color:#fff}
.app-nav__ico{width:20px;height:20px;flex:none;opacity:.9}
.app-nav__ico svg{width:20px;height:20px;display:block}
.app-nav__caret{margin-left:auto;transition:transform .2s;opacity:.6}
.app-nav__toggle.open .app-nav__caret{transform:rotate(90deg)}
.app-nav__sub{list-style:none;margin:2px 0 6px;padding:0 0 0 6px;max-height:0;overflow:hidden;transition:max-height .25s ease}
.app-nav__sub.open{max-height:600px}
.app-nav__sub a{display:block;padding:8px 12px 8px 40px;border-radius:8px;color:var(--s-sidebar-dim);
  text-decoration:none;font-size:.85rem;transition:background .15s,color .15s}
.app-nav__sub a:hover{background:rgba(255,255,255,.05);color:#fff}
.app-nav__sub a.active{color:#fff;background:rgba(31,138,112,.35)}
.app-nav__group{padding:14px 12px 6px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--s-sidebar-dim)}

.app-overlay{position:fixed;inset:0;background:rgba(10,20,16,.5);z-index:45;opacity:0;visibility:hidden;transition:.25s}
.app-overlay.open{opacity:1;visibility:visible}

/* ---- contenuto ---- */
.app-main{margin-left:var(--s-sidebar-w);padding-top:var(--s-header-h);min-height:100vh;
  display:flex;flex-direction:column}
.app-content{flex:1;padding:8px clamp(14px,3vw,32px) 24px}
.app-content > *{max-width:1400px;margin-inline:auto}

/* ---- footer: striscia "powered by M.P.P." ---- */
.app-footer{border-top:1px solid var(--s-line);background:var(--s-surface);padding:18px 24px;
  display:flex;align-items:center;justify-content:center}
.mpp-sign{display:inline-flex;align-items:center;background:#fff;padding:12px 20px;border-radius:14px;
  box-shadow:0 2px 16px rgba(20,30,45,.10);transition:transform .15s,box-shadow .15s}
.mpp-sign:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(20,30,45,.14)}
.mpp-sign img{width:min(220px,39vw);height:auto;display:block}
/* nel tema scuro la card bianca resta pulita e staccata dallo sfondo */
body.app[data-theme="scuro"] .mpp-sign{box-shadow:0 4px 24px rgba(0,0,0,.5)}

/* ---- responsive: sidebar off-canvas ---- */
@media(max-width:992px){
  .app-burger{display:inline-flex}
  .app-sidebar{transform:translateX(-100%)}
  .app-sidebar.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.3)}
  .app-main{margin-left:0}
}

/* --- Avviso e pallino dei documenti da firmare --------------------------- */
/* Il pallino sulla voce di menu e la striscia in cima alla pagina: senza,
   l'operatore scopre di avere qualcosa da firmare solo se apre la pagina. */
.menu-badge{display:inline-block;min-width:19px;height:19px;line-height:19px;padding:0 6px;
  margin-left:6px;border-radius:100px;background:#c0392b;color:#fff;font-size:11px;
  font-weight:700;text-align:center;vertical-align:middle}
.firma-avviso{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;text-decoration:none;color:#8a3225;background:#fdf1ef;
  border:1px solid #f0cdc7;border-left:4px solid #c0392b;border-radius:12px;
  padding:13px 16px;margin:0 0 18px;font-size:.94rem}
.firma-avviso span{color:#c0392b;font-weight:700;white-space:nowrap}
.firma-avviso:active{background:#fbe6e2}
.push-box{border:1px solid #e6e9ee;border-radius:12px;padding:12px 15px;margin:0 0 16px;
  font-size:.92rem;color:#1c2430;background:#fff}
.push-box.ok{background:#e7f4f0;border-color:#bfe3d8;color:#186a56}
.push-box.info{background:#fdf9ef;border-color:#f0d9a8;color:#8a6d1f}
.push-box.off{background:#f7f9fb;color:#6b7683}
.push-btn{border:0;border-radius:10px;background:#1f8a70;color:#fff;padding:9px 14px;
  font:600 .9rem inherit;cursor:pointer;margin-left:6px}
.push-link{border:0;background:none;color:#186a56;font:600 .9rem inherit;cursor:pointer;
  text-decoration:underline;padding:0;margin-left:4px}