/* IndexOS — guscio comune delle app telefono, v1 (stile B «Notte, ripulita»).
   Originale in IndexOS/assets/shell; le copie in <app>/shell non si toccano.
   Tutto ciò che si vede è condizionato a html.ios-on (telefono, non Tauri). */
:root {
  --ios-bg: #0a0f1a;
  --ios-bg2: #0d1424;
  --ios-linea: rgba(255, 255, 255, 0.09);
  --ios-linea-forte: rgba(255, 255, 255, 0.14);
  --ios-testo: #eef2f7;
  --ios-tenue: #8a96a8;
  --ios-spento: #5f6b7d;
  --ios-accento: #f97316;
  --ios-accento-testo: #14100a;
  --ios-ok: #4ade80;
  --ios-raggio: 14px;
  --ios-testata: 52px;
  --ios-barra: 64px;
  --ios-safe-t: env(safe-area-inset-top, 0px);
  --ios-safe-b: env(safe-area-inset-bottom, 0px);
}

.ios-testata, .ios-barra, .ios-pannello, .ios-home { display: none; }

/* il vecchio menu ☰ resta nel DOM per il desktop, sul telefono sparisce */
html.ios-on .hamburger-btn,
html.ios-on .nav-drawer-backdrop { display: none !important; }

html.ios-on .screen {
  min-height: calc(100dvh - var(--ios-testata) - var(--ios-safe-t));
  padding-bottom: calc(var(--ios-barra) + var(--ios-safe-b) + 24px);
}
html.ios-on body.ios-pagina { padding-bottom: calc(var(--ios-barra) + var(--ios-safe-b) + 16px); }

/* ── Testata ── */
html.ios-on .ios-testata {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 900;
  height: calc(var(--ios-testata) + var(--ios-safe-t));
  padding: var(--ios-safe-t) 16px 0;
  background: var(--ios-bg); border-bottom: 1px solid var(--ios-linea);
}
.ios-nome { font-family: 'Syne', system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--ios-testo); }
.ios-nome i { font-style: normal; color: var(--ios-accento); }
.ios-cambia {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--ios-linea-forte); border-radius: 10px;
  color: var(--ios-tenue); font: 600 0.8rem system-ui, sans-serif; text-decoration: none;
}

/* ── Barra in basso ── */
html.ios-on .ios-barra {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  height: calc(var(--ios-barra) + var(--ios-safe-b)); padding-bottom: var(--ios-safe-b);
  background: var(--ios-bg2); border-top: 1px solid var(--ios-linea);
}
.ios-voce {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 48px; background: none; border: 0; cursor: pointer;
  color: var(--ios-tenue); font: 600 0.7rem system-ui, sans-serif;
}
.ios-voce svg { width: 22px; height: 22px; }
.ios-voce[aria-current="page"] { color: var(--ios-accento); }

/* ── Pannello «Altro» ── */
html.ios-on .ios-pannello:not([hidden]) {
  display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 950;
  background: rgba(2, 4, 10, 0.6);
}
.ios-foglio {
  width: 100%; max-height: 80dvh; overflow-y: auto;
  background: var(--ios-bg2); border-top: 1px solid var(--ios-linea); border-radius: 18px 18px 0 0;
  padding: 12px 16px calc(16px + var(--ios-safe-b));
}
.ios-foglio-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ios-foglio-hd b { font-family: 'Syne', system-ui, sans-serif; font-size: 1.05rem; color: var(--ios-testo); }
.ios-chiudi {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ios-linea-forte);
  background: none; color: var(--ios-testo); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.ios-riga {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
  padding: 0 4px; background: none; border: 0; border-top: 1px solid var(--ios-linea);
  color: var(--ios-testo); font: 600 0.95rem system-ui, sans-serif; text-align: left; cursor: pointer;
}
.ios-riga::after { content: "›"; color: var(--ios-spento); font-size: 1.2rem; }
.ios-riga.ios-esci { color: var(--ios-tenue); }

/* ── Home B1 ── */
html.ios-on #s1 > :not(.ios-home) { display: none !important; }
html.ios-on .ios-home {
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto;
}
.ios-riprendi { display: flex; gap: 8px; }
.ios-riprendi[hidden] { display: none; }
.ios-riprendi-vai {
  flex: 1; padding: 12px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--ios-accento); border-radius: var(--ios-raggio); background: none; color: var(--ios-testo);
  font: 600 0.95rem system-ui, sans-serif;
}
.ios-riprendi-vai small {
  display: block; font: 700 0.68rem system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ios-accento);
}
.ios-riprendi-cosa { display: block; margin-top: 3px; font-size: 1rem; }
.ios-riprendi-quando { font-size: 0.75rem; color: var(--ios-tenue); }
.ios-riprendi-scarta {
  padding: 0 14px; cursor: pointer; border: 1px solid var(--ios-linea-forte); border-radius: var(--ios-raggio);
  background: none; color: var(--ios-tenue); font: 600 0.8rem system-ui, sans-serif;
}
.ios-primario {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 68px;
  padding: 14px 16px; border: 0; border-radius: var(--ios-raggio); cursor: pointer; text-align: left;
  background: var(--ios-accento); color: var(--ios-accento-testo); font: 800 1.15rem system-ui, sans-serif;
}
.ios-primario small { display: block; font-weight: 600; font-size: 0.75rem; opacity: 0.75; }
.ios-azienda {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px 10px 14px; border: 1px solid var(--ios-linea-forte); border-radius: 12px;
}
.ios-azienda-info {
  flex: 1; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--ios-testo); font: 700 0.92rem system-ui, sans-serif;
}
.ios-azienda-stato { display: block; font-style: normal; font-weight: 600; font-size: 0.75rem; color: var(--ios-ok); }
.ios-azienda[data-stato="scollegato"] .ios-azienda-stato { color: var(--ios-tenue); }
.ios-azienda-tasti { display: flex; gap: 8px; }
.ios-azienda[data-stato="scollegato"] .ios-azienda-tasti { display: none; }
.ios-tasto {
  min-width: 48px; min-height: 48px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--ios-linea-forte); background: rgba(255, 255, 255, 0.03); color: var(--ios-testo); font-size: 1.15rem;
}
.ios-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ios-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 86px;
  padding: 14px 12px; border: 1px solid var(--ios-linea); border-radius: 12px; background: none; cursor: pointer;
  color: var(--ios-testo); text-align: left; font: 700 0.9rem system-ui, sans-serif;
}
.ios-tile::before { content: ""; width: 24px; height: 24px; margin-bottom: 6px; border-radius: 8px; background: rgba(249, 115, 22, 0.14); }
.ios-tile span { font-weight: 500; font-size: 0.72rem; color: var(--ios-tenue); }

@media (prefers-reduced-motion: no-preference) {
  .ios-foglio { animation: ios-su 0.2s ease-out; }
  @keyframes ios-su { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}