/* =====================================================================
   PASSI — Design system
   =====================================================================
   Radicato nel mondo di una scuola di danza: il sipario/velvet per i toni
   scuri (sidebar, sfondo di login), il nastro da terra delle prove
   ("spike tape") per l'accento garnet, i cue sheet di un direttore di
   scena per gli indicatori di stato. Niente crema+serif+terracotta,
   niente sfondo quasi-nero con neon: la scala "ink" ha un sottotono
   viola-sipario preciso, l'accento è un rosso granato profondo.

   Nessuna dipendenza esterna: font e Alpine.js sono auto-ospitati
   (vedi fonts.css e /assets/js/alpine.min.js) — niente richieste a CDN
   di terze parti, meglio per privacy/GDPR, prestazioni e CSP rigorosa.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKEN
   --------------------------------------------------------------------- */
:root {
  /* Ink — scala neutra con sottotono viola-sipario (testo, sfondi scuri) */
  --ink-50:  #F6F4F8;
  --ink-100: #EBE6EE;
  --ink-200: #D7CEDD;
  --ink-300: #B2A3BC;
  --ink-400: #8A7B95;
  --ink-500: #695C74;
  --ink-600: #4C4058;
  --ink-700: #362C41;
  --ink-800: #241A2E;
  --ink-900: #180F20;

  /* Garnet — accento primario: rosso granato, ispirato al nastro di
     posizionamento usato in sala prove */
  --garnet-300: #DA7690;
  --garnet-400: #C23A56;
  --garnet-500: #A3234A;
  --garnet-600: #861B3D;
  --garnet-700: #6B1531;

  /* Paper — sfondi chiari, neutro freddo (non crema) */
  --paper:        #F4F3F6;
  --paper-muted:  #EAE7ED;
  --surface:      #FFFFFF;
  --line:         #E4E0E8;

  /* Semantici */
  --success-500: #1F8A5F; --success-bg: #E3F5EC; --success-ink: #146341;
  --warning-500: #B4740A; --warning-bg: #FBF0DA; --warning-ink: #8A5906;
  --danger-500:  #C4483A; --danger-bg:  #FBE9E6; --danger-ink:  #96311F;
  --spot-400:    #D6A431; /* oro-riflettore: usato solo nell'indicatore robustezza password */

  /* Tipografia */
  --font-display: 'Fraunces Variable', 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Forma */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* Ombre — appena percettibili, "carta sollevata di un millimetro" */
  --shadow-softer: 0 1px 2px rgba(36, 26, 46, .05), 0 1px 1px rgba(36, 26, 46, .04);
  --shadow-card: 0 1px 3px rgba(36, 26, 46, .06), 0 8px 24px -12px rgba(36, 26, 46, .12);
  --shadow-pop: 0 12px 32px -8px rgba(36, 26, 46, .22);

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: var(--garnet-500); text-decoration: none; }
a:hover { color: var(--garnet-600); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
img, svg { display: block; max-width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--garnet-500); }
[x-cloak] { display: none !important; }

::selection { background: var(--garnet-300); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--garnet-400);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scrollbar discreta (solo WebKit/Blink; nessun impatto altrove) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; border: 2px solid var(--paper); }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-color: transparent; }

/* ---------------------------------------------------------------------
   3. UTILITY (sottoinsieme mirato, scritto a mano — nessun build step)
   --------------------------------------------------------------------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.hidden { display: none; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: end; }
.flex-col { flex-direction: column; }
.stack { display: flex; flex-direction: column; }

.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-2\.5 { gap: .625rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }

.space-y-4 > * + * { margin-top: 1rem; }

.relative { position: relative; }
.absolute { position: absolute; }
.inset-y-0 { top: 0; bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-10 { z-index: 10; }

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-px { height: 1px; }
.min-w-0 { min-width: 0; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-2 { padding: .5rem; }
.px-1\.5 { padding-left: .375rem; padding-right: .375rem; }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.pb-2 { padding-bottom: .5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pl-1\.5 { padding-left: .375rem; }
.pl-3 { padding-left: .75rem; }
.pl-9 { padding-left: 2.25rem; }
.pr-3 { padding-right: .75rem; }
.pr-11 { padding-right: 2.75rem; }

.mb-1 { margin-bottom: .25rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

.rounded { border-radius: var(--radius-sm); }
.rounded-full { border-radius: var(--radius-full); }
.border { border: 1px solid var(--line); }
.border-b { border-bottom: 1px solid var(--line); }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: .78rem; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.05rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; letter-spacing: -0.01em; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-display { font-family: var(--font-display); font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

.text-white { color: #fff; }
.text-ink-200 { color: var(--ink-200); }
.text-ink-300 { color: var(--ink-300); }
.text-ink-400 { color: var(--ink-400); }
.text-ink-500 { color: var(--ink-500); }
.text-ink-600 { color: var(--ink-600); }
.text-ink-700 { color: var(--ink-700); }
.text-ink-800 { color: var(--ink-800); }
.bg-white { background: #fff; }
.bg-ink-100 { background: var(--ink-100); }
.bg-ink-700 { background: var(--ink-700); }
.bg-ink-800 { background: var(--ink-800); }
.bg-paper { background: var(--paper); }
.bg-paper-muted { background: var(--paper-muted); }
.bg-garnet-400 { background: var(--garnet-400); }
.border-ink-50 { border-color: var(--ink-100); }
.border-ink-100 { border-color: var(--ink-100); }
.border-ink-200 { border-color: var(--ink-200); }

.hover\:text-garnet-400:hover { color: var(--garnet-400); }
.hover\:text-ink-200:hover { color: var(--ink-200); }
.hover\:text-ink-500:hover { color: var(--ink-500); }
.hover\:text-ink-600:hover { color: var(--ink-600); }
.hover\:border-ink-200:hover { border-color: var(--ink-200); }
.hover\:\!bg-ink-700:hover { background: var(--ink-700) !important; }

.\!text-ink-200 { color: var(--ink-200) !important; }
.\!bg-ink-100 { background: var(--ink-100) !important; }
.\!text-garnet-500 { color: var(--garnet-500) !important; }
.\!bg-ink-800 { background: var(--ink-800) !important; }
.\!text-spot-400 { color: var(--spot-400) !important; }
.\!p-2 { padding: .5rem !important; }
.\!mb-0 { margin-bottom: 0 !important; }
.\!mb-1 { margin-bottom: .25rem !important; }
.\!px-2\.5 { padding-left: .625rem !important; padding-right: .625rem !important; }
.\!pl-9 { padding-left: 2.25rem !important; }
.\!py-1\.5 { padding-top: .375rem !important; padding-bottom: .375rem !important; }
.\!text-xs { font-size: .78rem !important; }
.\!w-auto { width: auto !important; }

.transition { transition: all .15s ease; }
.shadow-softer { box-shadow: var(--shadow-softer); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:w-72 { width: 18rem; }
}
@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
}

/* ---------------------------------------------------------------------
   4. PULSANTI
   --------------------------------------------------------------------- */
.btn-accent, .btn-primary, .btn-outline, .btn-ghost, .btn-danger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .875rem;
  line-height: 1;
  padding: .65rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
.btn-accent svg, .btn-primary svg, .btn-outline svg, .btn-ghost svg, .btn-danger svg { width: 16px; height: 16px; }

.btn-accent, .btn-primary {
  background: var(--garnet-500);
  color: #fff;
  box-shadow: var(--shadow-softer);
}
.btn-accent:hover, .btn-primary:hover { background: var(--garnet-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn-accent:active, .btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: var(--surface);
  color: var(--ink-700);
  border-color: var(--ink-200);
}
.btn-outline:hover { border-color: var(--garnet-400); color: var(--garnet-500); }

.btn-ghost {
  background: transparent;
  color: var(--ink-500);
}
.btn-ghost:hover { background: var(--ink-100); color: var(--ink-700); }

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger-ink);
}
.btn-danger:hover { background: var(--danger-500); color: #fff; }

.btn-sm { padding: .45rem .8rem; font-size: .8rem; }

/* ---------------------------------------------------------------------
   5. CARD, FORM, TABELLE
   --------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}
.card-link {
  text-decoration: none;
  display: block;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.card-link:hover {
  border-color: var(--garnet-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-pop);
}
.card-danger { border-color: var(--danger-500); }
.card-danger .card-title { color: var(--danger-ink); }

.consent-toggle {
  border: none;
  cursor: pointer;
  font: inherit;
}
.card-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink-800); margin-bottom: .25rem; }
.card-hint { font-size: .85rem; color: var(--ink-400); margin-bottom: 1.25rem; }

.field { margin-bottom: 1.1rem; }
.field-label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-600); margin-bottom: .4rem; }
.field-hint { font-size: .78rem; color: var(--ink-400); margin-top: .4rem; }

.input {
  width: 100%;
  font: inherit;
  font-size: .9rem;
  padding: .65rem .85rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-700);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder { color: var(--ink-300); }
.input:focus {
  outline: none;
  border-color: var(--garnet-400);
  box-shadow: 0 0 0 3px rgba(163, 35, 74, .12);
}
textarea.input { resize: vertical; min-height: 5rem; }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.dtable { font-size: .875rem; }
.dtable thead th {
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-muted);
}
.dtable td {
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-600);
  vertical-align: middle;
}
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable tbody tr:hover td { background: var(--paper); }
.row-link { color: var(--ink-800); font-weight: 600; }
.row-link:hover { color: var(--garnet-500); }

/* ---------------------------------------------------------------------
   6. BADGE / STATO
   --------------------------------------------------------------------- */
.badge-success, .badge-warning, .badge-danger, .badge-neutral {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .65rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: var(--success-ink); }
.badge-warning { background: var(--warning-bg); color: var(--warning-ink); }
.badge-danger  { background: var(--danger-bg); color: var(--danger-ink); }
.badge-neutral { background: var(--ink-100); color: var(--ink-500); }

/* ---------------------------------------------------------------------
   7. EMPTY STATE / STAT CARD / CALLOUT
   --------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--ink-400);
}
.empty-state svg { width: 34px; height: 34px; margin: 0 auto .9rem; color: var(--ink-300); }
.empty-state-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink-700); margin-bottom: .3rem; }
.empty-state-hint { font-size: .85rem; max-width: 30rem; margin: 0 auto; }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.stat-card-value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--ink-800); line-height: 1; }
.stat-card-label { font-size: .82rem; color: var(--ink-400); }

.callout-info {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: var(--paper-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: .9rem 1.1rem;
  font-size: .82rem;
  color: var(--ink-600);
}
.callout-info svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--garnet-500); margin-top: .1rem; }
.callout-danger { border-color: var(--danger-500); background: var(--danger-bg); }
.callout-danger svg { color: var(--danger-500); }

.credentials-card { border-color: var(--garnet-300); background: linear-gradient(180deg, #FDF6F8, var(--surface) 60%); }
.credentials-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: rgba(163, 35, 74, .12); color: var(--garnet-500);
}
.credentials-icon svg { width: 19px; height: 19px; }
.credentials-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .credentials-grid { grid-template-columns: 1fr 1fr; } }
.credentials-value {
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--ink-800);
  background: var(--paper-muted); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .55rem .75rem; word-break: break-all;
}

/* Liste semplici (orari, righe di riepilogo) */
.simple-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--ink-100);
  font-size: .875rem;
}
.simple-list li:last-child { border-bottom: none; }

/* Griglie a due colonne per le pagine di dettaglio (sidebar stretta + area principale) */
.course-detail-grid, .payments-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .course-detail-grid { grid-template-columns: 360px 1fr; align-items: start; }
  .payments-grid { grid-template-columns: 340px 1fr; align-items: start; }
}

/* Registro presenze: checkbox reale (accessibile, navigabile da tastiera)
   nascosto visivamente ma non da screen reader/focus, abbinato a un
   riquadro personalizzato via :checked + selettore adiacente. */
.attendance-list { display: flex; flex-direction: column; }
.attendance-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .25rem;
  border-bottom: 1px solid var(--ink-100);
  font-size: .875rem;
  color: var(--ink-700);
}
.attendance-row:last-child { border-bottom: none; }
.attendance-check { position: relative; display: inline-flex; cursor: pointer; }
.attendance-check input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.attendance-check-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--ink-200);
  color: transparent;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.attendance-check-box svg { width: 13px; height: 13px; }
.attendance-check input:checked + .attendance-check-box {
  background: var(--garnet-500);
  border-color: var(--garnet-500);
  color: #fff;
}
.attendance-check input:focus-visible + .attendance-check-box {
  outline: 2px solid var(--garnet-400);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   8. INDICATORE ROBUSTEZZA PASSWORD
   --------------------------------------------------------------------- */
.strength-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--ink-100);
  margin-top: .55rem;
  overflow: hidden;
}
.strength-fill { height: 100%; border-radius: var(--radius-full); transition: width .2s ease, background-color .2s ease; }
.bg-danger-500 { background: var(--danger-500); }
.bg-warning-500 { background: var(--warning-500); }
.bg-spot-400 { background: var(--spot-400); }
.bg-success-500 { background: var(--success-500); }

/* ---------------------------------------------------------------------
   9. TOAST (messaggi flash)
   --------------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: min(380px, calc(100vw - 2.5rem));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: .85rem 1rem;
  font-size: .85rem;
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .05rem; }
.toast-success { border-left-color: var(--success-500); }
.toast-success svg { color: var(--success-500); }
.toast-danger { border-left-color: var(--danger-500); }
.toast-danger svg { color: var(--danger-500); }

/* ---------------------------------------------------------------------
   10. APP SHELL — sidebar + topbar (area autenticata)
   --------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: linear-gradient(185deg, var(--ink-800), var(--ink-900));
  color: var(--ink-200);
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .4rem .5rem 1.5rem;
}
.sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(194, 58, 86, .18);
  color: var(--garnet-300);
  flex-shrink: 0;
}
.sidebar-brand-mark svg { width: 18px; height: 18px; }
.sidebar-brand-word { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: #fff; }
.sidebar-brand-sub { font-size: .72rem; color: var(--ink-400); }

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.sidebar-section-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 1rem .6rem .4rem;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .6rem;
  border-radius: var(--radius-sm);
  color: var(--ink-200);
  font-size: .875rem;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: background-color .12s ease, color .12s ease;
}
.nav-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.is-active {
  background: rgba(194, 58, 86, .16);
  color: #fff;
  border-left-color: var(--garnet-400);
}
.nav-link.is-active svg { opacity: 1; color: var(--garnet-300); }

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1rem;
  margin-top: .75rem;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 15, 32, .55);
  z-index: 39;
  display: none;
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    z-index: 40;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop { display: block; }
}
@media (min-width: 1024px) {
  .sidebar-backdrop { display: none !important; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--garnet-500); margin-bottom: .15rem; }
.page-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink-800); }

.main-area { padding: 1.75rem; max-width: 1180px; }

.dropdown-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: .5rem;
  z-index: 30;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .65rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: var(--ink-600);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.dropdown-item svg { width: 16px; height: 16px; color: var(--ink-400); }
.dropdown-item:hover { background: var(--paper-muted); color: var(--ink-800); }

.confirm-panel {
  position: static;
  width: auto;
  margin-top: .75rem;
}

/* Modale centrato: stessa funzione di .dropdown-panel + .confirm-panel,
   ma per conferme lanciate da un bottone dentro una riga di tabella,
   dove un pannello ancorato al bottone finirebbe fuori schermo. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 15, 32, .5);
  z-index: 90;
}
.modal-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 91;
  width: min(400px, calc(100vw - 2.5rem));
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 1.5rem;
}

/* ---------------------------------------------------------------------
   11. AREA NON AUTENTICATA (login, reset password...)
   --------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}
.mark-field {
  position: relative;
  background:
    radial-gradient(560px 420px at 50% 12%, rgba(194, 58, 86, .22), transparent 70%),
    radial-gradient(900px 600px at 85% 90%, rgba(76, 64, 88, .35), transparent 60%);
}
.auth-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 2rem 2rem 1.75rem;
}

/* ---------------------------------------------------------------------
   13. STAMPA / CASI LIMITE
   --------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.prose { font-size: .9rem; line-height: 1.7; color: var(--ink-600); }
.prose section + section { margin-top: 1.5rem; }
.prose h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink-800); margin-bottom: .35rem; }
.prose ul { padding-left: 1.25rem; list-style: disc; }
.prose li + li { margin-top: .3rem; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.card-centered { text-align: center; padding: 3rem 2rem; }
.error-code { font-family: var(--font-display); font-size: 3rem; color: var(--garnet-400); line-height: 1; }