/* Gestionale (PC): barra laterale traslucida stile macOS, barra degli strumenti, contenuto. */

.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

/* Barra laterale ------------------------------------------------------------- */
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  padding: 18px 12px 14px; gap: 18px;
  background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  box-shadow: inset -.5px 0 0 var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 2px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 2px 6px rgb(0 0 0 / .14); }
.brand b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.05; letter-spacing: -.01em; }
.brand small { display: block; color: var(--brand); font-size: 10px; font-weight: 700; letter-spacing: .16em; margin-top: 2px; }
.nav { display: grid; gap: 1px; }
.nav__title { font-size: 11px; font-weight: 650; color: var(--muted); padding: 0 10px 4px; }
.nav a {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px;
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: var(--t-md);
  transition: background .15s var(--ease);
}
.nav a svg { width: 18px; height: 18px; color: var(--brand); flex: none; stroke-width: 1.9; }
.nav a:hover { background: var(--sunken-2); }
.nav a[aria-current="page"] { background: var(--brand-tint); font-weight: 620; }
.nav a .badge { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sidebar__foot { margin-top: auto; display: grid; gap: 1px; }
.sidebar__foot a svg { color: var(--muted); }

/* Barra degli strumenti -------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar); display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s8); background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  box-shadow: inset 0 -.5px 0 var(--line);
}
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--t-md); color: var(--muted); min-width: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { color: var(--ink); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs svg { width: 13px; height: 13px; stroke-width: 2.2; }
.topbar__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topbar .search { width: clamp(220px, 24vw, 320px); }
.topbar .search .input { height: 32px; border-radius: 9px; }
.topbar .search .kbd { position: absolute; right: 8px; top: 50%; translate: 0 -50%; pointer-events: none; }
.bell { position: relative; }
.bell .dot { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--canvas); font-variant-numeric: tabular-nums; }

/* Contenuto --------------------------------------------------------------------- */
.vista { display: contents; } /* contenitore di ogni pagina: non cambia l'impaginazione */
.page { padding: 28px var(--s8) var(--s12); max-width: 1360px; width: 100%; display: grid; gap: 22px; align-content: start; animation: page-in .45s var(--spring); }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
.page-head { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 260px; }
.page-head h1 { font-size: var(--t-display); font-weight: 750; line-height: 1.05; letter-spacing: -.03em; }
.page-head p { margin-top: 6px; color: var(--muted); font-size: var(--t-base); }
.page-head .actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 18px; }
.grid--figures { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr); align-items: start; }
.grid--half { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.toolbar .search { width: min(320px, 100%); }
.toolbar .spacer { flex: 1; }

/* Schermata del PIN: come lo sblocco dell'iPhone -------------------------------------- */
.pin-screen { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); color: #fff; border-radius: 0;
  background: radial-gradient(120% 140% at 0% 0%, #EE6A71, #C21F2B 45%, #5E0A12); }
.pin-card { width: min(340px, 100%); display: grid; justify-items: center; gap: 22px; text-align: center; }
.pin-card .pin-logo { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 10px 30px rgb(40 0 6 / .35); }
.pin-card h1 { font-family: var(--font-display); font-weight: 400; font-size: 34px; letter-spacing: -.01em; }
.pin-card p { color: rgb(255 255 255 / .8); margin-top: 4px; }
.pin-dots { display: flex; gap: 18px; height: 14px; }
.pin-dots span { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .9); transition: background .15s, transform .25s var(--bounce); }
.pin-dots span.on { background: #fff; transform: scale(1.1); }
.pin-dots.shake { animation: shake .42s; }
@keyframes shake { 15%, 55% { transform: translateX(-10px); } 35%, 75% { transform: translateX(10px); } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 78px); gap: 16px 26px; }
.pin-pad button { width: 78px; height: 78px; border-radius: 50%; border: 0; color: #fff; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  background: rgb(255 255 255 / .16); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .3); font: 400 34px/1 var(--font-title); font-variant-numeric: tabular-nums;
  transition: background .3s var(--ease), transform .2s var(--ease); }
.pin-pad button:hover { background: rgb(255 255 255 / .24); }
.pin-pad button:active { background: rgb(255 255 255 / .5); transform: scale(.96); transition-duration: 0s; }
.pin-pad .ghost { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: var(--t-base); font-weight: 500; }
.pin-msg { min-height: 22px; color: #fff; font-weight: 600; font-size: var(--t-md); }

/* Tablet: barra laterale solo icone ----------------------------------------------- */
@media (max-width: 1080px) {
  :root { --sidebar: 72px; }
  .sidebar { padding: 16px 10px; align-items: center; }
  .brand div, .nav__title, .nav a span, .nav a .badge { display: none; }
  .nav a { width: 44px; height: 40px; justify-content: center; padding: 0; }
  .grid--split { grid-template-columns: 1fr; }
  .page, .topbar { padding-left: var(--s5); padding-right: var(--s5); }
  .topbar .search .kbd { display: none; }
}
/* Telefono: barra in basso con 4 sezioni + "Altro", tabelle come schede ---------- */
.gtab, .topbar__logo { display: none; }
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .gtab { display: grid; }
  .gtab a { border: 0; height: 52px; border-radius: 24px; display: grid; justify-items: center; align-content: center; gap: 2px; text-decoration: none;
    font-size: 10.5px; font-weight: 600; color: var(--muted); transition: color .2s, background .3s var(--spring); }
  .gtab a svg { width: 24px; height: 24px; stroke-width: 1.9; }
  .gtab :is(a, button)[aria-current="page"], .gtab button[aria-current] { color: var(--brand); background: var(--brand-soft); }

  .topbar { padding: 0 12px; gap: 10px; height: 56px; }
  .crumbs { display: none; }
  .topbar__logo { display: block; flex: none; }
  .topbar__logo img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 2px 6px rgb(0 0 0 / .14); display: block; }
  .topbar__tools { flex: 1; margin-left: 0; }
  .topbar .search { flex: 1; width: auto; }
  .topbar .search .input { height: 36px; border-radius: 11px; }
  .topbar [data-act="tema"] { display: none; }

  .page { padding: 20px 16px 120px; gap: 18px; grid-template-columns: minmax(0, 1fr); }
  .page-head { gap: 14px; }
  .page-head .grow { min-width: 100%; }
  .page-head h1 { font-size: 34px; }
  .page-head .actions { width: 100%; }
  .page-head .actions .seg { flex: 1 1 100%; }
  .page-head .actions .seg button { flex: 1; }

  /* Filtri a segmenti: scorrono di lato invece di uscire dallo schermo */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: none; }

  /* Tabelle: ogni riga diventa una scheda (nome sopra, dettagli sotto, azione in fondo) */
  .table thead { display: none; }
  .table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; border-bottom: .5px solid var(--line); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td { display: block; padding: 0 !important; border: 0 !important; }
  .table td:has(.who) { flex: 1 1 100%; }
  .table td:has(> .btn) { flex: 1 1 100%; }
  .table td > .btn { width: 100%; justify-content: center; height: 40px; }
  /* Senza intestazioni di colonna, i numeri dicono cosa sono */
  .table td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: var(--t-sm); }
  .table td:has(> input[type="checkbox"]), .table--allievi td:nth-child(4) { display: none; }

  /* Scheda della lezione: il nome su una riga, sotto lo stato a sinistra e l'azione a destra */
  .drawer .list > li { flex-wrap: wrap; row-gap: 8px; }
  .drawer .list > li > .grow { flex: 1 1 calc(100% - 60px); }
  .drawer .list > li > .status { margin-left: 46px; }
  .drawer .list > li > div:last-child:not(.grow) { margin-left: auto; }

  /* Totali (es. Pagamenti): tre in fila, compatti, così l'elenco resta vicino */
  .grid--figures:has(> .figure-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .grid--figures .figure-card__main { padding: 12px 12px 10px; gap: 4px; }
  .grid--figures .figure-card__value { font-size: 23px; }
  .grid--figures .panel__foot { padding: 8px 12px; font-size: 11.5px; line-height: 1.3; }
}