/* mobile.css – layout specifico per smartphone */

/* Forza font-size base su schermi molto piccoli */
@media screen and (max-width: 360px) {
  .timer-display  { font-size: 38px; }
  .summary-hours  { font-size: 44px; }
  .summary-minutes{ font-size: 30px; }
  .chip           { font-size: 11px; padding: 7px 2px; }
}

/* Aumenta area tap su mobile */
@media (hover: none) {
  .chip  { min-height: 44px; display: flex; align-items: center; }
  .nav-item { min-height: 48px; }
}

/* Nasconde il body background grigio (solo mobile full-screen) */
@media screen and (max-width: 480px) {
  body {
    background: var(--c-background);
    display: block;
  }
  .app-shell {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
}

/* PWA standalone: adatta l'altezza al viewport reale del webview */
@media all and (display-mode: standalone) {
  html, body, .app-shell, .overlay-content {
    height: 100%;
    height: -webkit-fill-available;
  }
  body {
    min-height: 100%;
  }
  .app-shell {
    height: 100%;
    height: -webkit-fill-available;
  }
  .overlay-content {
    height: 100%;
    height: -webkit-fill-available;
  }
}

/* JWQuiz Text */
.jwt-quiz-text {
  font-size: 13px;
  color: var(--c-on-surface);
  text-align: center;
  margin-top: 8px;
  margin-bottom: auto;
  line-height: 1.4;
}

/* ── Note: griglia 1 colonna su schermi molto stretti ── */
@media screen and (max-width: 320px) {
  .notes-grid {
    column-count: 1;
  }
}

/* ── Note: editor toolbar scrollabile su mobile ── */
@media (hover: none) {
  .notes-toolbar { gap: 0; padding: 6px 8px; }
  .notes-tool-btn { min-width: 44px; height: 44px; }
  .notes-tag-delete { opacity: 1; }
}

/* ── Note: sort dropdown allineato alla topbar ── */
@media screen and (max-width: 480px) {
  .notes-sort-dropdown {
    right: 8px;
    top: 68px;
    min-width: 200px;
  }
}