/* Shell app — variabili e contenimento scroll/zoom */
:root {
  --colore-sfondo: #f2f2f7;
  --colore-superficie: rgba(255, 255, 255, 0.92);
  --colore-testo: #1c1c1e;
  --colore-secondario: #636366;
  --colore-terziario: #8e8e93;
  --colore-accento: #007aff;
  --colore-separatore: rgba(60, 60, 67, 0.12);
  --raggio-grande: 20px;
  --raggio-medio: 12px;
  --raggio-lista: 10px;
  --ombra-morbida: 0 1px 3px rgba(0, 0, 0, 0.06);
  --blur-vetro: saturate(180%) blur(20px);
  --transizione-principale: cubic-bezier(0.25, 0.1, 0.25, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --altezza-tabbar: 52px;
  --elenco-padding-y: 0.65rem;
  --elenco-padding-x: 0.9rem;
  --elenco-gap: 0.75rem;
  --elenco-min-h: 52px;
  --elenco-icona-size: 40px;
  --elenco-icona-font: 1.25rem;
  --elenco-nome-size: 1.02rem;
  --elenco-sotto-size: 0.75rem;
  --elenco-sotto-margin: 0.08rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --colore-sfondo: #000000;
    --colore-superficie: rgba(44, 44, 46, 0.94);
    --colore-testo: #f2f2f7;
    --colore-secondario: #98989d;
    --colore-terziario: #636366;
    --colore-accento: #0a84ff;
    --colore-separatore: rgba(84, 84, 88, 0.48);
    --ombra-morbida: 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

/* Tema forzato (impostazioni Aspetto), ha priorità su prefers-color-scheme */
html.tema-filecloud-chiaro {
  --colore-sfondo: #f2f2f7;
  --colore-superficie: rgba(255, 255, 255, 0.92);
  --colore-testo: #1c1c1e;
  --colore-secondario: #636366;
  --colore-terziario: #8e8e93;
  --colore-accento: #007aff;
  --colore-separatore: rgba(60, 60, 67, 0.12);
  --ombra-morbida: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html.tema-filecloud-scuro {
  --colore-sfondo: #000000;
  --colore-superficie: rgba(44, 44, 46, 0.94);
  --colore-testo: #f2f2f7;
  --colore-secondario: #98989d;
  --colore-terziario: #636366;
  --colore-accento: #0a84ff;
  --colore-separatore: rgba(84, 84, 88, 0.48);
  --ombra-morbida: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Accento personalizzato (sostituisce il blu di sistema per tutti i temi) */
html[data-accento-filecloud='viola'] {
  --colore-accento: #5856d6;
}

html[data-accento-filecloud='verde'] {
  --colore-accento: #34c759;
}

html[data-accento-filecloud='arancio'] {
  --colore-accento: #ff9500;
}

html[data-accento-filecloud='rosso'] {
  --colore-accento: #ff3b30;
}

/* Scala testo globale (Impostazioni → Aspetto → Dimensione testo) */
html[data-scala-testo-filecloud='grande'] {
  font-size: 106.25%;
}

html[data-scala-testo-filecloud='extra'] {
  font-size: 114%;
}

/* Contrasto più marcato (testi secondari, separatori, titoli riga elenco) */
html.contrasto-elevato-filecloud {
  --colore-secondario: color-mix(in srgb, var(--colore-testo) 78%, var(--colore-sfondo));
  --colore-terziario: color-mix(in srgb, var(--colore-testo) 64%, var(--colore-sfondo));
  --colore-separatore: color-mix(in srgb, var(--colore-testo) 26%, transparent);
}

html.contrasto-elevato-filecloud .nome-elemento {
  font-weight: 600;
}

/* Densità righe elenco file (Esplora) */
html[data-densita-elenco='compatto'] {
  --elenco-padding-y: 0.42rem;
  --elenco-padding-x: 0.72rem;
  --elenco-gap: 0.55rem;
  --elenco-min-h: 44px;
  --elenco-icona-size: 34px;
  --elenco-icona-font: 1.05rem;
  --elenco-nome-size: 0.92rem;
  --elenco-sotto-size: 0.68rem;
  --elenco-sotto-margin: 0.04rem;
}

html[data-densita-elenco='grande'] {
  --elenco-padding-y: 0.82rem;
  --elenco-padding-x: 1rem;
  --elenco-gap: 0.88rem;
  --elenco-min-h: 58px;
  --elenco-icona-size: 44px;
  --elenco-icona-font: 1.35rem;
  --elenco-nome-size: 1.12rem;
  --elenco-sotto-size: 0.82rem;
  --elenco-sotto-margin: 0.1rem;
}

/* Preferenza utente: animazioni quasi istantanee */
html.riduci-movimento-filecloud *,
html.riduci-movimento-filecloud *::before,
html.riduci-movimento-filecloud *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  line-height: 1.35;
}

/* Contenitore principale: altezza fissa viewport, niente scroll sul body */
#app {
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Area centrale scrollabile */
.area-principale {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scorrevole-principale {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

@keyframes dissolvenzaSu {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vista-animata {
  animation: dissolvenzaSu 0.38s var(--transizione-principale) both;
}

.pull-indicatore {
  flex-shrink: 0;
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--colore-secondario);
  transition: height 0.22s var(--transizione-principale);
}

.pull-indicatore.attivo {
  height: 44px;
}