/* =============================================================
   tablet.css – layout per tablet (481px – 768px)
   Caricato solo per: (min-width: 481px) and (max-width: 768px)
   Nota: mobile.css viene caricato in parallelo (max-width: 768px),
   quindi qui sovrascriviamo solo ciò che va adattato per i tablet.
   Non sono necessari @media interni, tranne dove indicato.
   ============================================================= */

/* ── Body ── */
body {
  background: var(--c-background);
  display: block;
}

/* ══════════════════════════════════════════
   APP SHELL
   Su tablet manteniamo una larghezza max elegante (640px)
   invece di allargare a tutto schermo per non deformare la UI.
   Non sovrascriviamo l'height per mantenere il bottom-nav visibile.
   ══════════════════════════════════════════ */
.app-shell {
  max-width: 640px;
  border-radius: 0;
  box-shadow: 0 0 30px rgba(0,0,0,0.06);
  flex-direction: column;
}

/* ══════════════════════════════════════════
   TIPOGRAFIA SCALATA PER TABLET
   ══════════════════════════════════════════ */
.home-title      { font-size: 32px; }
.timer-display   { font-size: 44px; }
.summary-hours   { font-size: 52px; }
.summary-minutes { font-size: 34px; }
.page-headline   { font-size: 30px; }
.section-title   { font-size: 24px; }

/* ══════════════════════════════════════════
   CHIP
   ══════════════════════════════════════════ */
.chip {
  font-size: 13px;
  padding: 9px 5px;
  min-height: 48px;
}

/* ══════════════════════════════════════════
   WIDGET GRID
   ══════════════════════════════════════════ */
.widget-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}
.widget-card {
  padding: 22px;
  /* Limita l'altezza massima: su schermi larghi l'aspect-ratio 1:1
     creerebbe card enormie con troppo spazio vuoto */
  max-height: 280px;
}

/* ── Icone SVG principali (servizio, quiz, disponibilità) ── */
.servizio-svg       { width: 56px; height: 56px; }
.widget-disp-img    { width: 52px; height: 52px; }

/* ── Icona Appunti ── */
.widget-appunti-icon {
  font-size: 52px;
}
.widget-appunti-num {
  font-size: 36px;
}
.widget-appunti-label {
  font-size: 13px;
}

/* ── Header widget (titoletto + icona colorata) ── */
.widget-header .material-symbols-outlined { font-size: 22px; }
.widget-title  { font-size: 14px; }

/* ── Label del widget (es. "Servizio", "Quiz") ── */
.widget-servizio-label { font-size: 20px; }

/* ── Barre di progresso ── */
.progress-label { font-size: 11px; }
.progress-value { font-size: 12px; }
.progress-track { height: 9px; }

/* ── Statistiche Disponibilità ── */
.widget-disp-stat-label { font-size: 11px; }
.widget-disp-stat-count { font-size: 12px; }
.widget-disp-stat-icon  { width: 30px; height: 30px; }

/* ══════════════════════════════════════════
   BOTTOM NAV
   ══════════════════════════════════════════ */
.bottom-nav {
  flex-direction: row;
  justify-content: space-around;
  padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.nav-item {
  min-height: 52px;
  padding: 10px 20px;
  font-size: 15px;
}

/* ══════════════════════════════════════════
   SERVIZIO PAGE (timer SVG, già scalato in widget sopra)
   ══════════════════════════════════════════ */
/* .servizio-svg usa già 56px dalla sezione widget */

/* ══════════════════════════════════════════
   JW QUIZ 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;
}

/* ══════════════════════════════════════════
   FIXED ELEMENTS
   Poiché la larghezza max è 640px, calcoliamo la posizione right
   dinamicamente per mantenere i FAB centrati rispetto alla shell.
   L'altezza del bottom-nav su tablet è ~80px (52px + 14px×2),
   quindi usiamo 88px come base per i FAB/toast.
   ══════════════════════════════════════════ */

/* ── FAB Disponibilità ── */
.disp-fab {
  right: calc(max(0px, 50vw - 320px) + 20px);
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ── FAB Note ── */
.notes-fab {
  right: calc(max(0px, 50vw - 320px) + 20px);
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ── Toast: sopra il nav più alto del tablet ── */
.toast {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
}

/* ══════════════════════════════════════════
   OVERLAYS E SHEETS
   Su tablet, come per la shell, limitiamo a 640px.
   ══════════════════════════════════════════ */
.overlay-content,
.notes-editor-shell,
.notes-selection-bar__inner,
.install-popup,
.notes-batch-tag-sheet,
.disp-drawer {
  max-width: 640px;
}

.notes-selection-bar__inner {
  padding: 10px 20px;
}

/* ══════════════════════════════════════════
   APPUNTI PAGE – miglioramenti per tablet
   ══════════════════════════════════════════ */

/* ── Topbar: spaziatura e titolo più grande ── */
.notes-topbar {
  padding-left: 16px;
  padding-right: 16px;
  gap: 8px;
}
.notes-topbar__title {
  font-size: 26px;
  max-width: calc(100% - 140px);
}

/* ── Search bar: padding laterale aumentato ── */
.notes-search-bar {
  padding: 0 16px 12px;
}
.notes-search-input {
  font-size: 16px;
  padding: 13px 0;
}

/* ── Sort dropdown: allineato al padding aumentato ── */
.notes-sort-dropdown {
  right: 16px;
  min-width: 240px;
}

/* ── Griglia note: 2 colonne di default (481–599px) ── */
.notes-grid {
  column-count: 2;
  column-gap: 14px;
  padding: 12px 16px calc(108px + env(safe-area-inset-bottom, 0px));
}

/* ── Note card: font leggermente scalati per leggibilità ── */
.note-card__body    { padding: 12px 12px 10px; }
.note-card__title   { font-size: 14px; }
.note-card__preview { font-size: 12px; }
.note-card__date    { font-size: 10px; }
.note-card__tag     { font-size: 10px; padding: 3px 9px; }

/* ── Tag Drawer: larghezza adeguata al tablet ── */
.notes-drawer {
  width: min(320px, 78vw);
}

/* ── Editor: barra toolbar più spaziosa ── */
.notes-toolbar {
  padding: 8px 16px;
  gap: 4px;
}
.notes-tool-btn {
  min-width: 48px;
  height: 48px;
}

/* ── Titolo nota nell'editor ── */
.notes-title-input {
  font-size: 26px;
}

/* ══════════════════════════════════════════
   NOTE GRID – 3 colonne su tablet ≥ 560px
   ══════════════════════════════════════════ */
@media (min-width: 560px) {
  .notes-grid {
    column-count: 3;
    column-gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ══════════════════════════════════════════
   NOTE GRID – gap maggiore su tablet ampi
   ══════════════════════════════════════════ */
@media (min-width: 680px) {
  .notes-grid {
    column-gap: 16px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .note-card__title   { font-size: 15px; }
  .note-card__preview { font-size: 12px; }
}