/* ==========================================================================
   STYLE.CSS — CLEAN & CONSISTENT
   ========================================================================== */

/* --- 0. TOKENS (variabili) ------------------------------------------------ */
:root{
  --font-sans: 'Nunito', Arial, sans-serif;

  --blue-600:#1565C0;
  --blue-700:#0d47a1;
  --gray-50:#f8fafc;
  --gray-100:#f0f2f5;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-500:#6b7280;
  --gray-700:#374151;
  --ink:#0f172a;
  --danger-500:#ef4444;
  --success-600:#059669;

  --radius-8:8px;
  --radius-10:10px;
  --radius-12:12px;
  --radius-16:16px;

  --shadow-sm:0 2px 8px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.05);
  --shadow-lg:0 8px 24px rgba(0,0,0,.1);

  --focus:0 0 0 3px rgba(21,101,192,.20);
}

/* --- 1. RESET & LAYOUT ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  background-color:var(--gray-100);
  display:flex; flex-direction:column; min-height:100vh;
}
main{
  flex-grow:1;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:1.5rem 1rem;
}

/* --- 2. HEADER & FOOTER --------------------------------------------------- */
.header{
  height:60px; background:#fff; border-bottom:1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:space-between; padding:0 1rem; flex-shrink:0;
}
.secondary-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1rem; background:var(--gray-50); border-bottom:1px solid var(--gray-200); flex-shrink:0;
}
/* Layout sticky: header (top) – main (riempie) – footer (in fondo) */
html, body { height: 100%; }
body { display:flex; flex-direction:column; min-height:100vh; }

/* La tua pagina usa #container-main */
#container-main { flex: 1 0 auto; }

/* Se altrove usi <main>, copri anche quello */
main { flex: 1 0 auto; }

/* Footer: copri sia <footer>, .footer che .footer-bar */
footer, .footer, .footer-bar {
  flex-shrink: 0;
  background: #ffffff;
  color: #666;
  border-top: 1px solid #e0e0e0;
  padding: 12px 16px;
  text-align: center;
  font-size: 0.92rem;
}

/* Se vuoi che si stacchi sullo sfondo grigio della pagina */
.footer-bar { background: #fff; } /* oppure il tuo gradiente se preferisci */

/* Header components */
.header-section{ display:flex; align-items:center; flex:1; }
.header-section.left{ justify-content:flex-start; }
.header-section.center{ justify-content:center; }
.header-section.right{ justify-content:flex-end; }

.logo-link{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.logo{ height:40px; width:auto; border-radius:var(--radius-8); }
.logo-testo{ color:var(--blue-600); font-weight:800; font-size:1.3rem; white-space:nowrap; }

.user-menu{ position:relative; }
.user-menu-btn{
  display:inline-flex; align-items:center; gap:4px; background:transparent; border:none;
  color:var(--blue-600); padding:8px; border-radius:var(--radius-8); cursor:pointer;
}
.user-menu-btn:hover{ background:#f1f5f9; }
.user-dropdown{
  position:absolute; right:0; top:calc(100% + 8px); min-width:260px; background:#fff;
  border:1px solid var(--gray-200); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; z-index:1000;
}
.user-dropdown-item, .user-dropdown-item-btn{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:8px;
  color:var(--ink); text-decoration:none; font-size:.95rem; text-align:left; background:none; border:none; cursor:pointer;
}
.user-dropdown-item:hover, .user-dropdown-item:focus,
.user-dropdown-item-btn:hover, .user-dropdown-item-btn:focus{ background:#f1f5f9; outline:none; }
.user-dropdown-sep{ height:1px; background:#e2e8f0; margin:6px 4px; }
.user-dropdown-item.danger{ color:#b91c1c; }
.user-dropdown-item.danger:hover{ background:#fee2e2; }
.page-title{ margin:0; font-size:1.25rem; font-weight:700; color:var(--blue-600); white-space:nowrap; }
/* Uniforma link e pulsanti nel menu */
.user-dropdown a.user-dropdown-item,
.user-dropdown .as-form .user-dropdown-item-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;   /* stesso padding di tutti */
  border-radius: 10px;
  font: inherit;
  line-height: 1.35;
  text-decoration: none;
  color: #0f172a;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

/* Hover/focus coerente */
.user-dropdown a.user-dropdown-item:hover,
.user-dropdown .user-dropdown-item-btn:hover,
.user-dropdown .user-dropdown-item-btn:focus {
  background: #f1f5f9;
  outline: none;
}

/* Icone con dimensione fissa */
.user-dropdown a.user-dropdown-item svg,
.user-dropdown .user-dropdown-item-btn svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

/* Pill contestuale (Quiz) come intestazione compatta */
.user-dropdown .ctx-pill {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .6rem;
  margin: 6px 8px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.2;
  background: #e8f0fe;   /* blu chiaro */
  color: #1565C0;        /* blu scuro */
  border: 1px solid #c5dbff;
}
.user-dropdown .ctx-pill svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.user-dropdown .as-form .user-dropdown-item-btn svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: #fb8c00; /* icona arancio */
}


/* il form non deve creare un box suo */
.user-dropdown .as-form{
  margin:0; padding:0;
  display: contents;            /* fa “sparire” il box del form */
}

/* normalizza il button come un <a>, arancione */
.user-dropdown .user-dropdown-item-btn{
  appearance: none; -webkit-appearance: none;
  display:flex; align-items:center; gap:.6rem;
  width:100%; box-sizing:border-box;
  padding:.55rem .8rem; border-radius:10px;
  border:1px solid #ffe0b2; background:#fff3e0; /* arancione chiaro */
  color:#e65100; font:inherit; font-size:.95rem; line-height:1.35;
  cursor:pointer; text-align:left; font-weight:600;
}
.user-dropdown .user-dropdown-item-btn svg{
  flex:0 0 18px; width:18px; height:18px; color:#fb8c00;
}
.user-dropdown .user-dropdown-item-btn:hover,
.user-dropdown .user-dropdown-item-btn:focus{
  background:#ffe0b2; color:#bf360c; outline:none;
}

/* per coerenza con gli <a> */
.user-dropdown a.user-dropdown-item{ 
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .8rem; border-radius:10px; 
}
.user-dropdown a.user-dropdown-item svg{ flex:0 0 18px; width:18px; height:18px; }


/* Layout header secondario: desktop = 3 colonne; mobile = stacked */
.secondary-header{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* sx | titolo | dx */
  align-items:center;
  gap:8px;
  padding:8px 12px;
}
.secondary-header-side.left   { justify-self:start; }
.secondary-header-center       { justify-self:center; text-align:center; }
.secondary-header-side.right  { justify-self:end; }

/* Titolo: permette il wrap pulito */
.secondary-header .page-title{
  margin:0;
  line-height:1.2;
  white-space:normal;          /* consente andare a capo */
  overflow-wrap:anywhere;      /* evita overflow su stringhe lunghe */
}

/* --- Mobile / stretto: titolo a capo e a sinistra --- */
@media (max-width: 720px){
  .secondary-header{
    grid-template-columns: 1fr;
    grid-template-areas:
      "back"
      "title";
  }
  .secondary-header-side.left   { grid-area: back;  justify-self:start; }
  .secondary-header-center       { grid-area: title; justify-self:start; text-align:left; }
  .secondary-header-side.right  { display:none; } /* opzionale: nasconde la colonna dx su stretto */
}
.back-link-secondary{ display:flex; align-items:center; gap:.35rem; font-weight:600; text-decoration:none; color:var(--blue-600); }

/* --- 3. PRIMITIVE: CARD / TABLE / ALERT ---------------------------------- */
.card{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-12);
  box-shadow:var(--shadow-md); margin-bottom:1.5rem;
}
.card .hd{
  padding:.75rem 1.25rem; border-bottom:1px solid var(--gray-200);
  font-weight:700; font-size:1.1rem; color:var(--blue-600);
}
.card .bd{ padding:1.25rem; overflow-x:auto; }

.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:10px; border-bottom:1px solid #eef2f7; text-align:left; font-size:14px; vertical-align:middle; }
.table thead th{ color:var(--blue-600); font-weight:800; }
.table tbody tr:hover{ background:#f9fafb; }

.alert{ margin-bottom:1.5rem; padding:1rem; border-radius:8px; border:1px solid; }
.alert.success{ background:#ecfdf5; border-color:#34d399; color:#065f46; }
.alert.error{ background:#fef2f2; border-color:#fca5a5; color:#991b1b; }

/* --- 4. PRIMITIVE: FORM / INPUT / SELECT / BUTTON ------------------------- */
/* Base inputs (riutilizzati ovunque) */
.input, .select, .telemetry-input, .telemetry-select,
.auth-input, .auth-select,
.calc-form-grid input, .calc-form-grid select,
.select-styled{
  width:100%; padding:12px 14px; border:1px solid var(--gray-300); border-radius:var(--radius-8);
  background:#f9fafb; font-size:1rem; outline:none;
}
.input:focus, .select:focus,
.telemetry-input:focus, .telemetry-select:focus,
.auth-input:focus, .auth-select:focus,
.calc-form-grid input:focus, .calc-form-grid select:focus,
.select-styled:focus{
  border-color:var(--blue-600); box-shadow:var(--focus);
}

.auth-input::placeholder{ color:#90b5e0; font-weight:500; }

/* Select con freccia personalizzata */
.select-styled{
  cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none;
  color:var(--blue-600); font-weight:700; padding:.5rem 2.5rem .5rem 1rem; height:52px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231565C0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:16px 12px;
}
.select-styled option{ font-weight:600; color:var(--blue-600); background:#fff; }

/* Labels e righe */
.form-row{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-bottom:1.5rem; }
.form-row > div{ flex:1; min-width:220px; }
.form-row label{ font-weight:700; color:var(--blue-600); margin-bottom:.25rem; display:block; }

/* Bottoni unificati */
.btn, .auth-btn, .btn-telemetry, .calc-btn, .btn-mb{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 16px; border-radius:var(--radius-8);
  font-weight:700; font-size:1.05rem; cursor:pointer; text-decoration:none; border:1px solid transparent;
  transition:background-color .2s, filter .15s;
}
.btn--primary, .auth-btn.primary, .btn-telemetry, .calc-btn, .btn-mb{
  background:var(--blue-600); color:#fff; border-color:transparent;
}
.btn--primary:hover, .auth-btn.primary:hover, .btn-telemetry:hover, .calc-btn:hover, .btn-mb:hover{
  background:var(--blue-700);
}
.btn--ghost, .auth-btn.secondary{
  background:#fff; border-color:var(--gray-300); color:var(--gray-700);
}
.btn--ghost:hover, .auth-btn.secondary:hover{ background:#f9fafb; }

/* --- 5. PAGINA: LOGIN / AUTH --------------------------------------------- */
.login-container{ display:flex; flex-direction:column; justify-content:center; align-items:center; padding:2rem 1rem; flex-grow:1; }
.auth-header{ display:flex; align-items:center; gap:12px; padding:.75rem 1rem; border-bottom:1px solid var(--gray-200); background:#fff; }
.auth-header .logo{ height:36px; }
.auth-header .logo-testo{ font-size:1.2rem; }
.auth-card{ width:100%; max-width:480px; background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-16); box-shadow:0 8px 24px rgba(0,0,0,.06); padding:2rem; }
.auth-title{ margin:0 0 1.5rem 0; text-align:center; font-size:1.8rem; font-weight:800; color:var(--blue-600); }
.auth-form label{ display:block; font-weight:700; color:var(--blue-600); margin:1rem 0 .5rem; }
.auth-row{ display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem; }
.auth-sep{ display:flex; align-items:center; gap:12px; margin:1.5rem 0; color:var(--gray-500); font-size:.9rem; }
.auth-sep::before,.auth-sep::after{ content:""; height:1px; background:var(--gray-200); flex:1; }
.auth-google{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px 16px; border:1px solid var(--gray-300); border-radius:var(--radius-8); background:#fff; font-size:1rem; font-weight:600; color:var(--gray-700); text-decoration:none; transition:background-color .2s; }
.auth-google:hover{ background:#f9fafb; }
.auth-google img{ width:18px; height:18px; }

/* --- 6. DASHBOARD --------------------------------------------------------- */
.dashboard-title{ text-align:center; font-size:2rem; font-weight:800; color:var(--blue-600); margin-bottom:2.5rem; }
.dashboard{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; width:100%; max-width:1100px; margin:0 auto; }
.dash-card{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-16);
  box-shadow:var(--shadow-md); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:150px; padding:20px; color:var(--blue-600); font-size:1.1rem; font-weight:700; text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.dash-card:hover{ transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,.08); }
.dash-card img{ width:44px; height:44px; margin-bottom:1rem; }
.dash-card i{ font-size:44px; color:var(--blue-600); margin-bottom:1rem; transition:transform .2s ease-in-out; }
.dash-card:hover i{ transform:scale(1.05); }
.dash-card span{ font-size:1rem; line-height:1.3; }
.dash-card svg{ width:48px; height:48px; margin-bottom:1rem; fill:var(--blue-600); transition:transform .2s ease-in-out; }
.dash-card:hover svg{ transform:scale(1.05); }

/* --- 7. TELEMETRIE (lista) ------------------------------------------------ */
.telemetry-table{ width:100%; border-collapse:collapse; }
.telemetry-table th,.telemetry-table td{ padding:10px; border-bottom:1px solid #eef2f7; text-align:left; font-size:14px; vertical-align:middle; }
.telemetry-table thead th{ color:var(--blue-600); font-weight:800; }
.telemetry-table tbody tr:hover{ background:#f9fafb; }
.telemetry-table .note-line{ font-size:12px; color:var(--gray-500); margin-top:2px; }
.telemetry-table .actions{ display:flex; gap:8px; justify-content:flex-end; }

/* Azioni */
.action-badge{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px;
  border-radius:var(--radius-10); box-shadow:0 2px 4px rgba(0,0,0,.06); cursor:pointer; text-decoration:none; border:none;
  transition:filter .15s ease, background-color .15s ease, transform .05s ease;
}
.action-badge:hover{ filter:brightness(.96); }
.action-badge:active{ transform:translateY(.5px); }
.action-badge.view{ background:var(--blue-600); }
.action-badge.csv{ background:var(--success-600); }
.action-badge.delete{ background:#fff; border:2px solid var(--danger-500); }
.action-badge.delete:hover{ background:var(--danger-500); }
.action-badge svg{ width:18px; height:18px; }
.action-badge.view svg path,
.action-badge.csv svg path,
.action-badge.csv svg text{ fill:#fff; }
.action-badge.delete svg{ stroke:var(--danger-500); }
.action-badge.delete:hover svg{ stroke:#fff; }

/* Mappe */
#map{
  height:65vh; min-height:400px; max-height:600px;
  border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; position:relative;
}
.map--sm{ height:520px; } /* Variante per pagina indice telemetrie */

.legend{
  position:absolute; bottom:10px; left:10px; z-index:1000;
  background:rgba(255,255,255,.9); border:1px solid var(--gray-300); border-radius:8px; padding:.5rem .75rem;
  font-size:12px; box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.legend h4{ margin:0 0 4px 0; font-size:13px; font-weight:700; color:#111; }
.legend .row{ display:flex; gap:6px; align-items:center; margin-top:4px; }
.legend .chip{ display:inline-block; width:16px; height:12px; border:1px solid rgba(0,0,0,.1); border-radius:3px; }

.slider-wrap{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:250px; }
.slider-labels{ display:flex; justify-content:space-between; font-size:12px; color:var(--gray-500); }

.telemetry-title{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem;
  color:var(--blue-600); font-weight:800; font-size:1.25rem;
}
#controls{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; }
.picker{ display:flex; align-items:center; gap:.5rem; }
.picker label{ font-weight:700; color:var(--blue-600); font-size:.9rem; }
.picker input[type=color]{ width:36px; height:32px; border:1px solid var(--gray-300); border-radius:6px; padding:2px; cursor:pointer; }

/* --- 8. MASS & BALANCE ---------------------------------------------------- */
.page-title-mb{ margin:0 0 .5rem; font-size:2rem; font-weight:800; color:var(--blue-600); text-align:center; }
.subhead-mb{ text-align:center; color:#1f2a44; font-weight:700; margin-bottom:1rem; }
.subhead-mb small{ display:block; color:var(--gray-500); font-weight:600; margin-top:.25rem; }
.route-line-mb{ text-align:center; color:var(--gray-500); font-weight:600; margin-bottom:1.5rem; }

.toolbar-mb{ text-align:center; margin-bottom:1.5rem; }

.mb-table{
  border-collapse:collapse; width:100%; margin:1.5rem 0; background:#fff;
  border:1px solid var(--gray-200); border-radius:var(--radius-12); overflow:hidden; box-shadow:var(--shadow-md);
}
.mb-table th,.mb-table td{ border-bottom:1px solid var(--gray-200); padding:.75rem 1rem; font-size:.95rem; vertical-align:middle; }
.mb-table tr:last-child th,.mb-table tr:last-child td{ border-bottom:none; }
.mb-table th{ background:var(--gray-50); text-align:left; color:#1e3a8a; font-weight:700; }
.mb-table input[type=number]{
  width:120px; max-width:100%; box-sizing:border-box; padding:6px 8px; border-radius:6px; border:1px solid var(--gray-300);
  font-weight:600; text-align:right; font-size:.95rem;
}
.mb-table input:focus{ border-color:var(--blue-600); box-shadow:var(--focus); outline:none; }

.cg-chart-wrapper{ width:100%; max-width:720px; margin:2rem auto .5rem; }
.note-mb{ font-size:.85rem; color:var(--gray-500); margin-top:-1rem; margin-bottom:1.5rem; }

/* --- 9. PRESSURE & WIND CALCULATOR --------------------------------------- */
.calc-card{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-12); box-shadow:var(--shadow-md); margin-bottom:1.5rem; padding:1.25rem; }
.calc-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.calc-form-grid label{ font-weight:700; color:var(--blue-600); display:block; margin-bottom:.5rem; }
.search-wrap{ position:relative; max-width:560px; display:flex; gap:.5rem; align-items:center; }
.search-wrap input{ flex-grow:1; }
.search-suggestions{
  position:absolute; left:0; top:100%; z-index:1000; min-width:280px; width:100%;
  border:1px solid var(--gray-300); background:#fff; border-radius:0 0 var(--radius-8) var(--radius-8); overflow:hidden;
  box-shadow:0 8px 16px rgba(0,0,0,.1);
}
.search-suggestions div{ padding:8px 12px; cursor:pointer; }
.search-suggestions div:hover{ background:#f1f5f9; }

.info-aero h2{ margin:0 0 .75rem 0; font-size:1.2rem; color:var(--blue-600); }
.info-aero .kpi{ display:flex; flex-wrap:wrap; gap:.5rem; }
.info-aero .pill{ display:inline-block; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:4px 12px; font-size:.9rem; }
.info-aero .piste-list{ margin:.5rem 0 0 1rem; padding:0; font-size:.9rem; line-height:1.5; }

.result-box{ padding:1rem; border-radius:10px; margin:1rem 0; }
.result-box.pa{ background:#e6f7ff; border:1px solid #99d6ff; }
.result-box.da{ background:#fff0f0; border:1px solid #ffb3b3; }
.result-box b{ font-size:1.1rem; }
.result-box input{ max-width:160px; display:inline-block; margin-left:8px; }
.result-box .formula{ font-size:.9rem; color:#555; margin-top:4px; }

.wind-svg-wrap{ border:1px solid var(--gray-200); background:#fafafa; border-radius:var(--radius-12); margin-top:1rem; padding:.5rem; }

/* --- 10. UTILITIES -------------------------------------------------------- */
.w-full{ width:100%; }
.note{ font-size:.85rem; color:var(--gray-500); margin-top:1rem; text-align:center; }
.page-title-mb, .dashboard-title, .auth-title, .page-title{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ==========================================================================
   Pressure & Wind Calculator — CSS bonificato (unico blocco)
   ========================================================================== */

/* --- Info Aeroporto ------------------------------------------------------ */
.info-aero-box .card.hd { padding: .85rem 1.15rem; }
.info-aero-box .card.bd { padding: 1.1rem 1.25rem 1.25rem; }
.info-aero-box .info-aero h2 {
  margin: 0 0 .75rem 0; font-size: 1.25rem; font-weight: 800; color: var(--blue-600);
}
.info-aero-box .info-aero .kpi { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: .5rem; }
.info-aero-box .pill { white-space: nowrap; padding: 6px 12px; border-radius: 999px; }
.info-aero-box .wind-info-piste { margin-top: .75rem; }
.info-aero-box .piste-list { margin: .5rem 0 0 1rem; padding: 0; font-size: .95rem; line-height: 1.5; }
.info-aero-box .piste-list li { margin-bottom: 2px; }
.calc-card.info-aero-box { margin-bottom: 1.25rem; }

/* --- Titoli card --------------------------------------------------------- */
.card-title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--blue-600); }

/* --- Search ICAO --------------------------------------------------------- */
.search-wrap input[type="text"]{
  height: 38px; padding: 0 12px; font-size: 1rem; font-weight: 700;
  border: 1px solid var(--blue-600); border-radius: 8px; background: #fff; color: var(--blue-600);
  transition: border-color .2s, box-shadow .2s;
}
.search-wrap input[type="text"]::placeholder { color: #90b5e0; font-weight: 500; }
.search-wrap input[type="text"]:focus { outline: none; border-color: var(--blue-700); box-shadow: 0 0 0 3px rgba(21,101,192,.20); }

/* --- Riga VRB ------------------------------------------------------------ */
.wind-row { display: flex; align-items: center; gap: .5rem; }

/* --- Etichette SVG ------------------------------------------------------- */
#label_v, #label_vc, #label_vt { fill: var(--ink); }

/* --- Controlli compatti (input/select) ---------------------------------- */
.calc-form-grid input[type="number"],
.calc-form-grid input[type="text"]{
  height: 36px; font-size: .98rem; font-weight: 700;
  color: var(--blue-600); border: 1px solid var(--blue-600); border-radius: 8px;
  padding: 4px 10px; margin: 0; background: #fff; max-width: 140px; box-sizing: border-box;
}
.calc-form-grid input[type="number"]::-webkit-outer-spin-button,
.calc-form-grid input[type="number"]::-webkit-inner-spin-button { margin: 0; }
.calc-form-grid input::placeholder { color: #90b5e0; font-weight: 500; }

.calc-form-grid select,
.select-styled{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  height: 36px; line-height: 36px;
  font-size: 1rem; font-weight: 700; color: var(--blue-600);
  border: 1px solid var(--blue-600); border-radius: 8px; background-color: #fff;
  padding: 0 28px 0 10px; /* spazio per freccia, testo non decentrato */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231565C0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px;
  cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.calc-form-grid select:focus,
.calc-form-grid input:focus { outline: none; border-color: var(--blue-700); box-shadow: 0 0 0 3px rgba(21,101,192,.20); }

/* Select Pista: larghezza consigliata */
#pista_heading { max-width: 120px; }

/* --- Griglia della form (layout fisso) ---------------------------------- */
/* Desktop: 12 colonne.
   R1: 1–4 Elevazione | 5–8 QNH | 9–12 Temp
   R2: 1–6 PA | 7–12 DA
   R3: 1–4 Direzione | 5–8 Intensità | 9–12 Pista
   Tutto il resto full width. */
.calc-form-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.calc-form-grid label{ margin: 2px 0 4px; }
.calc-form-grid > div{ grid-column: 1 / -1; }  /* default mobile */

/* Desktop mapping */
@media (min-width:1024px){
  .calc-form-grid > div:nth-of-type(1){ grid-column: 1 / span 4; }   /* Elevazione */
  .calc-form-grid > div:nth-of-type(2){ grid-column: 5 / span 4; }   /* QNH */
  .calc-form-grid > div:nth-of-type(3){ grid-column: 9 / span 4; }   /* Temperatura */
  .calc-form-grid > div.result-box.pa{  grid-column: 1 / span 6; }   /* PA a sinistra */
  .calc-form-grid > div.result-box.da{  grid-column: 7 / span 6; }   /* DA a destra  */
  .calc-form-grid > div:nth-of-type(6){ grid-column: 1 / span 4; }   /* Direzione    */
  .calc-form-grid > div:nth-of-type(7){ grid-column: 5 / span 4; }   /* Intensità    */
  .calc-form-grid > div:nth-of-type(8){ grid-column: 9 / span 4; }   /* Pista        */
  .wind-graphic-container,
  .calc-form-grid > .full-row{ grid-column: 1 / -1; }                /* resto full   */
}

/* --- Box PA/DA ----------------------------------------------------------- */
.result-box { padding: 10px 12px; margin: 0; }
.result-box.pa b, .result-box.da b { color: var(--ink); font-weight: 800; }
.result-box.pa input[type="number"]{ width: 100px; max-width: 110px; text-align: right; }

/* --- Grafico vento/pista ------------------------------------------------- */
.wind-graphic-container{ margin-top: .5rem; }
.wind-svg-wrap{
  width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 480px;
  border: 1px solid var(--gray-200); background: #fafafa; border-radius: var(--radius-12); padding: .5rem;
}

/* --- Pulsante ------------------------------------------------------------ */
.calc-btn {
  display: inline-block; background: #1565C0; color: #fff; border: none;
  border-radius: 10px; font-weight: 800; padding: 14px 28px; font-size: 1.1rem;
  cursor: pointer; transition: background-color .2s, transform .1s;
}
.calc-btn:hover { background: #0d47a1; }
.calc-btn:active { transform: scale(.98); }

/* Variante XL a tutta riga */
.calc-btn.calc-btn--xl{ grid-column: 1 / -1; width: 100%; text-align: center; }

/* --- Card calcoli padding più compatto ---------------------------------- */
.calc-card .card.bd { padding: 12px 14px; }
.calc-form-grid select { line-height: normal; height: 36px; padding-top: 0; padding-bottom: 0; }

/* ==========================================================================
   Prestazioni P92 — integrazioni
   ========================================================================== */

/* Griglia input della pagina (riusa calc-form-grid) */
.perf-form > div { grid-column: 1 / -1; }
@media (min-width:1024px){
  /* 5 campi su una riga: 12/5 ≈ 2 col cad + piccoli aggiustamenti */
  .perf-form > div:nth-of-type(1){ grid-column: 1 / span 2; }  /* PA */
  .perf-form > div:nth-of-type(2){ grid-column: 3 / span 2; }  /* Temp */
  .perf-form > div:nth-of-type(3){ grid-column: 5 / span 2; }  /* Peso */
  .perf-form > div:nth-of-type(4){ grid-column: 7 / span 3; }  /* Tipo pista */
  .perf-form > div:nth-of-type(5){ grid-column:10 / span 3; }  /* Vento long */
}

/* Box risultati */
.perf-results{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.perf-results h3{
  margin: 0 0 6px 0;
  font-size: 1rem;
  color: var(--blue-600);
  font-weight: 800;
}
.result-box{
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  color: #0f172a;
  font-size: 0.98rem;
}
.result-box .sep{ color:#94a3b8; margin: 0 10px; }
.result-box small{ display:block; margin-top:4px; color:#64748b; }
@media (min-width:768px){
  .perf-results{ grid-template-columns: 1fr 1fr; }
}

/* Grafico prestazioni */
.perf-chart{
  position: relative;
  width: 100%;
  max-width: 1358px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.perf-chart img{ display:block; width:100%; height:auto; }
.perf-chart canvas{
  position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none;
}
/* ================================
   Pianificazione Tratte (P92) – override
   ================================ */

/* Layout righe tratta */
#tratte-wrapper .tratta-row{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
}

/* Header riga (titolo + remove) */
#tratte-wrapper .tratta-row > div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
#tratte-wrapper .tratta-row label{
  color:#1565C0;            /* label blu */
  font-weight:800;
  margin:0 0 6px 0;
  display:block;
}

/* Griglie campi "inline" */
#tratte-wrapper .tratta-row .inline{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin:10px 0;
}

/* Dimensioni UNIFORMI: input & select */
.form-prestazioni input[type="text"],
.form-prestazioni input[type="number"],
.form-prestazioni input[type="email"],
.form-prestazioni input[type="search"],
.form-prestazioni input[type="tel"],
.form-prestazioni select{
  width:100%;
  height:52px;              /* uniforma altezza */
  padding:0 14px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  font-family:'Nunito', Arial, sans-serif;
  font-size:16px;
  font-weight:700;
  color:#1565C0;            /* testo blu */
  outline:none;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}

/* Placeholder leggibile */
.form-prestazioni input::placeholder{ color:#90b5e0; font-weight:500; }

/* Focus “blu” coerente */
.form-prestazioni input:focus,
.form-prestazioni select:focus{
  border-color:#1565C0;
  box-shadow:0 0 0 3px rgba(21,101,192,.20);
  background:#f9fbff;
}

/* Select “blu” anche quando non in focus */
.form-prestazioni select{
  color:#1565C0;
}

/* Bottoni pagina */
#add-tratta-btn,
#btn-mass-balance{
  appearance:none;
  border:1px solid transparent;
  border-radius:10px;
  height:46px;
  padding:0 16px;
  font-weight:800;
  cursor:pointer;
}
#add-tratta-btn{
  background:#fff;
  border-color:#d1d5db;
  color:#374151;
}
#add-tratta-btn:hover{ background:#f9fafb; }
#btn-mass-balance{
  background:#1565C0;
  color:#fff;
}
#btn-mass-balance:hover{ background:#0d47a1; }

/* Pulsante rimozione riga (la X) */
.tratta-row .remove-btn{
  border:0;
  background:#fff;
  width:36px; height:36px;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.06);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:filter .15s ease;
}
.tratta-row .remove-btn:hover{ filter:brightness(.96); }
.tratta-row .remove-btn .x{
  font-size:20px; line-height:1; color:#b91c1c; font-weight:800;
}

/* Box direzionale e mappa */
.tratta-row .mappa-singola{
  min-height:220px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}
.tratta-row .svg-direzionale{ min-width:210px; }
.tratta-row .testo-direzionale{ color:#0f172a; }

/* Riepilogo totali */
#riepilogo-totali{
  font-size:15px;
  color:#0f172a;
}

/* jQuery UI Autocomplete – coerente con il tema */
.ui-autocomplete{
  z-index:10000;           /* sopra le mappe */
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  padding:6px;
  max-height:320px;
  overflow:auto;
}
.ui-autocomplete .ui-menu-item-wrapper{
  padding:8px 10px;
  border-radius:8px;
  color:#0f172a;
}
.ui-autocomplete .ui-state-active{
  background:#eef6ff;
  color:#1565C0;
}

/* Contenitore calcolatore (se vuoi coerenza visuale) */
.calc-card .card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}
.calc-card .card.hd{ border-bottom:1px solid #eef1f4; }
.calc-card .card .card-title{
  margin:0;
  font-weight:800;
  color:#1565C0;
}
/* ===== Tratte: enfatizza i campi "Da" e "A" ===== */
#tratte-wrapper .tratta-row input[name="da[]"],
#tratte-wrapper .tratta-row input[name="a[]"]{
  height: 60px;                 /* più grandi */
  padding: 0 16px;
  font-size: 18px;              /* testo più grande */
  font-weight: 800;             /* come gli altri campi blu */
  color: #1565C0;               /* testo blu */
  border: 2px solid #1565C0;    /* bordo blu */
  border-radius: 12px;
  background: #f3f8ff;          /* leggero azzurrino */
  outline: none;
  transition: box-shadow .2s, border-color .2s, background-color .2s;
}

#tratte-wrapper .tratta-row input[name="da[]"]::placeholder,
#tratte-wrapper .tratta-row input[name="a[]"]::placeholder{
  color: #7aa7db;               /* placeholder blu chiaro */
  font-weight: 600;
}

/* Focus più marcato */
#tratte-wrapper .tratta-row input[name="da[]"]:focus,
#tratte-wrapper .tratta-row input[name="a[]"]:focus{
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(21,101,192,.20);
  background: #eef6ff;
}

/* Su schermi larghi, fai occupare più spazio in griglia alla prima riga (Da/A/Distanza) */
@media (min-width: 900px){
  #tratte-wrapper .tratta-row .inline:nth-of-type(1){
    grid-template-columns: 2fr 2fr 1fr;  /* Da e A più larghi */
  }
}


/* Stili specifici per la pagina Urbe Maps 3D */
.page-urbe-maps-3d,
.page-urbe-maps-3d body {
    height: 100%;
    margin: 0;
}
.page-urbe-maps-3d #cesium {
    width: calc(100% - 40px); /* 20px di margine per lato */
    height: calc(100vh - var(--head, 80px) - var(--foot, 80px));
    background: #000;
    margin: 0 auto; /* Centra il contenitore */
}
.page-urbe-maps-3d .hud {
    position: fixed;
    left: 30px; /* 20px margine pagina + 10px offset originale */
    bottom: calc(var(--foot, 80px) + 10px);
    z-index: 10;
    background: #0b60d1;
    color: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    font: 13px system-ui;
    line-height: 1.35;
}
.page-urbe-maps-3d .hud b {
    font-weight: 700;
}
.page-urbe-maps-3d .hud .row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
}
.page-urbe-maps-3d .hud button,
.page-urbe-maps-3d .hud input,
.page-urbe-maps-3d .hud select,
.page-urbe-maps-3d .hud label {
    font: 13px system-ui;
}
.page-urbe-maps-3d .hud .badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
}
.page-urbe-maps-3d footer.site-footer,
.page-urbe-maps-3d footer {
    position: relative;
    z-index: 5;
}

/* --- 11. PAGINA: PROFILO UTENTE ------------------------------------------- */
.page-profilo .page-wrap {
    max-width: 1000px;
    margin: 24px auto;
    padding: 0 12px;
}
.page-profilo .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 880px) {
    .page-profilo .grid {
        grid-template-columns: 1fr;
    }
}
.page-profilo .form-row {
    margin: 10px 0; /* Override per spaziatura più fitta */
}
.page-profilo .form-row label {
    margin-bottom: 6px;
}
.page-profilo .form-row input[type=password],
.page-profilo .form-row input[type=text] {
    padding: 12px;
    border-radius: var(--radius-10);
}
.page-profilo .strength {
    height: 8px;
    border-radius: 6px;
    background: var(--gray-200);
    margin-top: 8px;
    overflow: hidden;
}
.page-profilo .strength > div {
    height: 100%;
    width: 0%;
    background: var(--blue-600);
    transition: width .25s;
}
.page-profilo .note {
    font-size: .92em;
    color: var(--gray-500);
    margin-top: 8px;
}
.page-profilo .badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--gray-300);
    background: var(--gray-50);
    font-size: .78em;
    margin-left: 6px;
}
.page-profilo .key-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.page-profilo .key-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-10);
    padding: 10px;
}
.page-profilo .key-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.page-profilo .key-name {
    font-weight: 700;
}
.page-profilo .key-sub {
    font-size: .86em;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58vw;
}
.page-profilo .key-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.page-profilo .inline-form {
    display: inline;
}
.page-profilo .passkey-controls {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.page-profilo .input-nick {
    flex: 1;
    min-width: 180px;
    height: 44px;
    line-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-10);
}
.page-profilo .btn-primary {
    height: 44px;
    line-height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-10);
    background: var(--blue-600);
    color: #fff;
    border: 1px solid var(--blue-600);
}
.page-profilo .btn-primary:hover {
    background: var(--blue-700);
    border-color: var(--blue-700);
}
.page-profilo .btn-outline {
    padding: 8px 10px;
    border-radius: var(--radius-8);
    border: 1px solid var(--gray-300);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}
.page-profilo .btn-outline:hover {
    background: var(--gray-100);
}
/* --- 11. PAGINA: PROFILO UTENTE (Aggiornamenti) --- */
.page-profilo .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.25rem;
}
.page-profilo .form-group label {
    font-weight: 700;
    color: var(--blue-600);
}
/* Stile input per la pagina profilo con testo blu */
.page-profilo .input,
.page-profilo input[type=text],
.page-profilo input[type=password],
.page-profilo .input-nick {
    color: var(--blue-600);
    font-weight: 600;
    background-color: #fff; /* Sfondo bianco per contrasto */
}
.page-profilo .input::placeholder,
.page-profilo input[type=text]::placeholder,
.page-profilo input[type=password]::placeholder {
    color: #90b5e0;
    font-weight: 500;
}
/* Nuovo stile per pulsanti "danger" */
.btn--danger {
    background: var(--danger-500);
    color: #fff;
    border-color: transparent;
}
.btn--danger:hover {
    background: #dc2626; /* Versione più scura di --danger-500 */
}
/* Allineamento del nuovo pulsante nella lista passkey */
.page-profilo .key-actions .btn {
    height: 38px;
    padding: 0 12px;
    font-size: 0.9rem;
}

/* --- 12. PAGINA: GESTIONE UTENTI ------------------------------------------ */
.page-gestione-utenti .layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
/* Su schermi larghi, affianca form e lista */
@media (min-width: 1200px) {
    .page-gestione-utenti .layout-grid {
        grid-template-columns: 400px 1fr;
        align-items: flex-start;
    }
}
.page-gestione-utenti .form-card .bd {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.page-gestione-utenti .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.page-gestione-utenti .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}
.page-gestione-utenti input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
}

/* Toolbar di ricerca */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.toolbar .search-form {
    display: flex;
    gap: 8px;
    flex-grow: 1;
    max-width: 500px;
}
.toolbar .counter {
    font-size: 0.9rem;
    color: var(--gray-500);
    text-align: right;
}

/* Tabella Responsive */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
}
.responsive-table th, .responsive-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
}
.responsive-table thead {
    background-color: var(--gray-50);
}
.responsive-table th {
    font-weight: 700;
    color: var(--blue-700);
}
.responsive-table .table-actions {
    text-align: right;
}
@media (max-width: 960px) {
    .responsive-table thead {
        display: none;
    }
    .responsive-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-8);
        overflow: hidden;
    }
    .responsive-table td {
        display: block;
        text-align: right;
        border-bottom: 1px solid var(--gray-100);
        position: relative;
        padding-left: 50%;
    }
    .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        font-weight: bold;
        color: var(--blue-600);
    }
    .responsive-table td:last-child {
        border-bottom: 0;
    }
    .responsive-table .table-actions {
        text-align: right;
    }
}

/* Paginazione */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 1.5rem;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 14px;
    min-width: 40px;
    text-align: center;
    border-radius: var(--radius-8);
    text-decoration: none;
    font-weight: 600;
}
.pagination a {
    background-color: #fff;
    border: 1px solid var(--gray-200);
    color: var(--blue-600);
}
.pagination a:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-300);
}
.pagination a.disabled {
    pointer-events: none;
    opacity: 0.5;
}
.pagination span.active {
    background-color: var(--blue-600);
    color: #fff;
    border: 1px solid var(--blue-600);
}
/* --- 12. PAGINA: GESTIONE UTENTI (Testo Input Blu) --- */
.page-gestione-utenti .form-card .input,
.page-gestione-utenti .form-card .select {
    color: var(--blue-600);
    font-weight: 700;
}

.page-gestione-utenti .form-card .input::placeholder {
    color: #90b5e0; /* Un blu più chiaro per il placeholder */
    font-weight: 500;
}

/* ==========================================================================
   13. PAGINA: NUOVO & MODIFICA QUIZ (Stili Unificati)
   ========================================================================== */

/* --- Layout Principale e Griglia Form --- */
.page-nuovo-quiz .form-card,
.page-modifica-quiz .form-card {
    max-width: none; /* MODIFICATO: Rimosso il limite per un layout a tutta larghezza */
    margin: 0 auto;
}

.page-nuovo-quiz .form-grid,
.page-modifica-quiz .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .page-nuovo-quiz .form-grid,
    .page-modifica-quiz .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.5rem;
    }

    .page-nuovo-quiz .form-group.full-width,
    .page-modifica-quiz .form-group.full-width,
    .page-modifica-quiz .full-width { /* Compatibilità con vecchia classe */
        grid-column: 1 / -1;
    }
}

/* Separatore orizzontale */
.hr-separator {
    height: 1px;
    background-color: var(--gray-200);
    border: 0;
    margin: 1.5rem 0;
    grid-column: 1 / -1; /* Assicura che occupi tutta la larghezza nella griglia */
}


/* --- Componenti Condivisi --- */

/* Gruppo di campi form */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group label {
    font-weight: 700;
    color: var(--blue-600);
}

/* Componente Pills per radio/checkbox */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pills .pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pills .pill span {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    user-select: none;
    cursor: pointer;
    font-weight: 600;
    transition: all .2s;
}

.pills .pill input:checked + span {
    background: var(--blue-600);
    color: #fff;
    border-color: var(--blue-600);
}

/* Contenitore badge METAR */
.kpi {
    display: flex;
    flex-wrap: wrap;       /* forza il ritorno a capo */
    gap: 10px 14px;
    align-items: center;
}

/* METAR RAW sempre da solo sopra */
.kpi .metar-raw {
    flex: 0 0 100%;        /* occupa tutta la riga */
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: #1565C0;        /* blu leggibile */
    margin-bottom: .4rem;
}

/* Badge singolo */
.kpi .pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 14px;
    border: 1px solid #d7dee7;
    border-radius: 999px;
    background: #eef3f9;
    font-weight: 600;
    color: #0f172a;
}

/* Righe per le risposte */
.answer-rows .answer-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.answer-rows .answer-row .input {
    flex: 1;
}

/* Stile per input file */
.page-nuovo-quiz .input[type="file"],
.page-modifica-quiz .input[type="file"] {
    padding: 10px 14px;
    background-color: #fff;
}

/* Badge/Chip per informazioni */
.badge {
  display: inline-block;
  background: #eef2ff;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .85rem;
}

/* --- Componenti Specifici di "Modifica Quiz" --- */

/* Box di ricerca */
.search-box {
  max-width: 1100px;
  margin: 0 auto 1.5rem auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .06);
  padding: 14px;
}
.search-box .btn-primary {
  background: var(--blue-600);
  color: #fff;
}
.search-box .btn-primary:hover { background: var(--blue-700); }
.search-results { margin-top: 1rem; border-top: 1px solid #eef1f6; padding-top: .5rem; }
.search-item { padding: 8px 4px; border-bottom: 1px solid #f1f5f9; }
.search-item a { text-decoration: none; color: var(--ink); }
.search-item small { color: var(--gray-500); }

/* Tabs interni al form */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200);
  grid-column: 1 / -1; /* Occupa tutta la larghezza */
}
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 8px 4px;
  margin-bottom: -1px;
  cursor: pointer;
  font-weight: 600;
  color: var(--gray-500);
}
.tab-btn.active { 
    color: var(--blue-600);
    border-bottom-color: var(--blue-600); 
    font-weight: 700; 
}
.tab-pane { display: none; }
.tab-pane.active { display: contents; } /* Usa 'contents' per integrarsi nella griglia padre */

/* Lista ordinamento risposte (drag&drop) */
.sort-list {
  border: 1px dashed var(--gray-300);
  border-radius: 10px;
  padding: 8px;
  min-height: 100px;
}
.sort-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.sort-handle { cursor: grab; color: var(--gray-500); }
.sort-badge {
  font-size: .8rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
}
.sort-badge.c { background: #dcfce7; color: #166534; border:1px solid #a7f3d0; }
.sort-badge.e { background: #ffedd5; color: #9a3412; border:1px solid #fed7aa; }

/* Riga Audio */
.audio-row { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 10px; 
}

/* --- Modale Editor --- */
.editor-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.7);
    display: none;
    justify-content: center; align-items: center;
    z-index: 1100;
}
.editor-modal-content {
    background: #fff;
    border-radius: var(--radius-12);
    width: 90%; max-width: 900px;
    height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.editor-modal-header {
    flex-shrink: 0; padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
}
.editor-modal-header h3 {
    margin: 0; font-size: 1.2rem;
    color: var(--blue-700);
}
.editor-modal-body {
    flex-grow: 1; padding: 0;
    overflow-y: auto; display: flex;
}
.editor-modal-footer {
    flex-shrink: 0; padding: 1rem;
    display: flex; gap: 10px; justify-content: flex-end;
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

/* --- Utilità per vista Iframe --- */
.is-embed .header, 
.is-embed .secondary-header,
.is-embed .footer,
.is-embed .search-box {
  display: none !important;
}
.is-embed main {
    padding: 0;
}
.is-embed .card.form-card {
  max-width: 100%;
  box-shadow: none;
  border: none;
  border-radius: 0;
}
.is-embed body, .is-embed html { 
    background: #fff; 
}
/* Domanda: textarea più grande e responsive */
.page-modifica-quiz .form-card .bd textarea[name="testo"]{
  width: 100%;
  min-height: 260px;   /* base */
  line-height: 1.5;
  font-size: 1.05rem;
  resize: vertical;    /* l’utente può allungarla se serve */
}
@media (min-width: 768px){
  .page-modifica-quiz .form-card .bd textarea[name="testo"]{
    min-height: 320px; /* tablet/desktop */
  }
}
/* opzionale: allarga leggermente la card su desktop larghi */
@media (min-width: 1200px){
  .page-modifica-quiz .form-card{ max-width: 1200px; margin: 0 auto; }
}
/* ==========================================================================
   14. PAGINA: DASHBOARD COSTI
   ========================================================================== */
.page-costi-dashboard .wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page-costi-dashboard .section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue-700);
    margin: 0;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 0.5rem;
}

.page-costi-dashboard .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.page-costi-dashboard .card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.page-costi-dashboard .card .k {
    font-weight: 700;
    color: var(--blue-600);
    font-size: 0.95rem;
}
.page-costi-dashboard .card .v {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
}
.page-costi-dashboard .card .sub {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-top: 0.5rem;
}
.page-costi-dashboard .card .badge {
    display: inline-block;
    background: #eef2ff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: .85rem;
    margin-right: 6px;
}

.page-costi-dashboard .separator {
    border: 0;
    height: 1px;
    background-color: var(--gray-200);
    margin: 0;
}

.page-costi-dashboard .grid-chart {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}
@media (max-width: 900px) {
    .page-costi-dashboard .grid-chart {
        grid-template-columns: 1fr;
    }
}

.page-costi-dashboard .chart {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-12);
    padding: 1.25rem;
    
    /* --- MODIFICHE FONDAMENTALI --- */
    position: relative; /* Necessario per Chart.js */
    height: 400px;      /* Imposta un'altezza fissa invece di un'altezza minima */
}

.page-costi-dashboard .chart-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blue-600);
    margin: 0 0 1rem 0;
    text-align: center;
}
.page-costi-dashboard .chart--compact {
    height: 400px; /* Mantiene la stessa altezza per allineamento */
}

/* ==========================================================================
   15. PAGINA: STATISTICHE UTENTI
   ========================================================================== */

   /* --- Contenitore Principale e Layout --- */

/* ===== RIEPILOGO GLOBALE (stile identico alle card Connessioni) ===== */
.summary-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap:.8rem;
  margin: .25rem 0 1rem;
}

.summary-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:.85rem .9rem;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.summary-card .kpi-title{
  color:#6b7280;
  font-size:.9rem;
  margin-bottom:.35rem;
}

.summary-card .kpi-value{
  font-size:1.55rem;
  font-weight:800;
  color:#111827;
  line-height:1.1;
}

.summary-card .kpi-sub{
  margin-top:.35rem;
  color:#1565C0;
  font-weight:700;
  font-size:.9rem;
}

@media (max-width:900px){
  .summary-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width:480px){
  .summary-grid{ grid-template-columns: 1fr; }
}

   .page-statistiche main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Selettore Utente (Admin) --- */
.page-statistiche .admin-user-select {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    padding: 1rem;
    border-radius: var(--radius-12);
    border: 1px solid var(--gray-200);
}
.page-statistiche .admin-user-select label {
    font-weight: 700;
    color: var(--blue-600);
}
.page-statistiche .admin-user-select input[type="text"] {
    padding: 10px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-8);
    min-width: 320px;
    font-size: 1rem;
}
.page-statistiche .admin-user-select input[type="text"]:focus {
    border-color: var(--blue-600);
    box-shadow: var(--focus);
    outline: none;
}

/* --- Card per Grafici e Dati --- */
.page-statistiche .chart-box {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-12);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
}
.page-statistiche .chart-box h2 {
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--blue-700);
}
.page-statistiche .chart-box h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-700);
    text-align: center;
}
.page-statistiche .chart-container {
    position: relative;
    height: 400px;
}

/* --- Sezione Connessioni --- */
.page-statistiche .conn-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.page-statistiche .conn-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-10);
    padding: 1rem;
}
.page-statistiche .muted {
    color: var(--gray-500);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.page-statistiche .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink);
}
.page-statistiche .conn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* --- Tabella Ultimi Accessi --- */
.page-statistiche .table-container {
    margin-top: 1.5rem;
}
.page-statistiche .table {
    width: 100%;
    border-collapse: collapse;
}
.page-statistiche .table th,
.page-statistiche .table td {
    border-bottom: 1px solid var(--gray-200);
    padding: 0.75rem;
    text-align: left;
    font-size: 0.92rem;
}
.page-statistiche .table th {
    font-weight: 800;
    color: var(--blue-600);
    background-color: var(--gray-50);
}

/* --- Banner Rotazione Mobile --- */
.rotate-banner {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.rotate-banner.show {
    display: flex;
}
body.rotate-lock {
    overflow: hidden;
}
.rb-box {
    padding: 2rem;
}
.rb-box svg {
    width: 64px;
    height: auto;
    fill: #fff;
    margin-bottom: 1rem;
}
.rb-box h2 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
}

/* ====== VARIABILI & RESET BASE ====== */
:root{
  --bg:#f0f2f5;
  --card-bg:#fff;
  --card-bd:#e5e7eb;
  --muted:#6b7280;
  --brand:#1565C0;
  --brand-2:#2196F3;
  --accent:#2ecc40;
  --shadow:0 2px 10px rgba(0,0,0,.06);
}
html,body{height:100%}
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;
  font:15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:#0f172a;
  background:var(--bg);
}

/* ====== LAYOUT CONTENITORE PRINCIPALE ====== */
#container-main{
  max-width:1440px;
  width:100%;
  margin:0 auto;
  padding:1.5rem .75rem;
  min-height:calc(100vh - 120px); /* lascia spazio a header/footer */
}

/* ====== CARD / SEZIONI GRAFICI ====== */
.chart-box{
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:14px;
  padding:1rem 1rem 1.25rem;
  margin:1rem 0;
  box-shadow:var(--shadow);
}
.chart-box > h2{
  margin:.2rem 0 1rem;
  font-size:1.2rem;
  font-weight:800;
}

/* ====== SELECT ADMIN (autocomplete) ====== */
.admin-user-select{
  display:flex; gap:.5rem; align-items:center; margin:.5rem 0 1rem; flex-wrap:wrap
}
.admin-user-select input[type="text"]{
  padding:.55rem .7rem; border:1px solid #d8e2ef; border-radius:10px; min-width:320px
}
.admin-user-select .pill{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; background:#eef5ff;
  color:var(--brand); font-weight:700; font-size:.85rem
}

/* ====== TABELLA ULTIMI ACCESSI ====== */
.table{ width:100%; border-collapse:collapse; }
.table thead th{
  text-align:left; font-size:.8rem; letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--card-bd); padding:.5rem .4rem;
}
.table td{
  border-bottom:1px solid #eef2f7; padding:.55rem .4rem; font-size:.92rem;
}
.table tr:hover td{ background:#f9fbff; }

/* ====== CARDS KPI CONNESSIONI ====== */
.conn-cards{ display:grid; grid-template-columns: repeat(4, minmax(140px,1fr)); gap:.8rem }
.conn-card{
  background:#f8fafc; border:1px solid var(--card-bd); border-radius:12px; padding:.75rem;
}
.conn-card .muted{ color:var(--muted); font-size:.9rem; margin-bottom:.25rem }
.muted{ color:var(--muted) }

/* ====== GRIGLIE GRAFICI CONNESSIONI ====== */
.conn-flex{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem }
@media (max-width:900px){
  .conn-flex{ grid-template-columns:1fr }
  .conn-cards{ grid-template-columns: repeat(2, minmax(140px,1fr)); }
}
.conn-flex > div {
    position: relative; /* Necessario per il corretto ridimensionamento di Chart.js */
    max-height: 350px;  /* Limita l'altezza massima dei contenitori dei grafici */
}
/* ====== SELECT UNIFICATA (dropdown materie) ====== */
.select-unificata{
  display:inline-block; min-width:260px;
  padding:.55rem .7rem; border-radius:10px;
  border:1px solid #d8e2ef; background:#fff; color:#0f172a;
  font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}

/* ====== BANNER ROTAZIONE (mobile portrait) ====== */
.rotate-banner{
  position:fixed; inset:0; display:none; z-index:9999;
  backdrop-filter:saturate(110%) blur(4px);
  background:rgba(255,255,255,.9);
}
.rotate-banner.show{ display:flex; align-items:center; justify-content:center; }
.rotate-banner .rb-box{
  background:#ffffff; border:1px solid var(--card-bd); border-radius:16px; padding:20px 22px;
  max-width:520px; margin:18px; text-align:center; box-shadow:var(--shadow);
}
.rotate-banner svg{ width:56px; height:56px; fill:var(--brand); display:block; margin:0 auto 10px; }
.rotate-banner h2{ margin:.2rem 0 .4rem; font-size:1.25rem }
.rotate-banner p{ margin:0; color:#334155 }
body.rotate-lock{ overflow:hidden }

/* ====== BOTTONI (opzionali generici) ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem .9rem; border-radius:10px; border:1px solid transparent;
  font-weight:700; cursor:pointer; text-decoration:none; user-select:none;
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ background:#0f4aa5 }
.btn-ghost{ background:#fff; color:#0f172a; border-color:#e2e8f0 }
.btn-ghost:hover{ background:#f8fafc }

/* ====== MODAL SEMPLICE ====== */
/* Markup atteso:
<div class="modal" id="m1">
  <div class="modal__overlay" data-close></div>
  <div class="modal__dialog">
    <div class="modal__hd"><h3>Titolo</h3><button class="modal__x" data-close>&times;</button></div>
    <div class="modal__bd">Contenuto…</div>
    <div class="modal__ft"><button class="btn btn-ghost" data-close>Annulla</button><button class="btn btn-primary">OK</button></div>
  </div>
</div>
*/
.modal{ position:fixed; inset:0; display:none; z-index:10000 }
.modal.is-open{ display:block }
.modal__overlay{ position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px) }
.modal__dialog{
  position:relative; max-width:720px; margin:6vh auto; background:#fff; border-radius:16px;
  border:1px solid var(--card-bd); box-shadow:0 20px 60px rgba(0,0,0,.2); overflow:hidden
}
.modal__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #eef2f7;
}
.modal__hd h3{ margin:0; font-size:1.05rem }
.modal__x{
  appearance:none; border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; padding:4px;
}
.modal__bd{ padding:16px }
.modal__ft{
  display:flex; gap:.5rem; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid #eef2f7;
}

/* ====== ACCESSIBILITÀ UTILI ====== */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }


/* ==========================================================================
   MODAL (popup) – Stile completo e rifinito
   ========================================================================== */
.modal {
  display: none;                      /* default nascosto */
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(33,33,33,0.35) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  backdrop-filter: blur(2px);         /* leggero blur */
}
.modal[style*="display: flex"] {
  display: flex !important;           /* se il JS mette display:flex */
}

.modal-content {
  background: #fff;
  border-radius: 16px;
  max-width: 480px;
  width: min(92vw,480px);
  padding: 20px 18px;
  box-shadow: 0 10px 34px rgba(44,60,77,0.18),
              0 2px 4px rgba(44,60,77,0.12);
}

/* Titoli nei popup */
#materiaTitle,
#popupCerca h3 {
  text-align: left;
  color: #1565C0;
  font-weight: 800;
  font-size: 1.22rem;
  margin: 0 0 14px 0;
}

/* Contenitore opzioni */
#scelteDomande {
  display: flex;
  flex-direction: column;
  gap: 8px;   /* spazio tra bottoni */
}

/* Bottoni generici del modal */
.modal-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;

  border: none;
  background: #2065c0;
  color: #fff;

  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: background .15s ease, transform .08s ease;
  cursor: pointer;
}
.modal-btn:hover {
  background: #10428c;
  transform: translateY(-1px);
}
.modal-btn:active {
  transform: translateY(0);
}

/* Variante Danger (rosso) */
.btn-danger {
  background: #d32f2f !important;
  color: #fff !important;
}
.btn-danger:hover {
  background: #b71c1c !important;
}

/* Variante Cancel (grigia) */
.btn-cancel {
  background: #f1f3f7 !important;
  color: #444 !important;
  border: 1px solid #e1e5ee !important;
  font-weight: 600;
}
.btn-cancel:hover,
.btn-cancel:focus {
  background: #e9edf3 !important;
  color: #333 !important;
  border-color: #d5dbe7 !important;
  transform: none !important;
}

/* Input nel popup Cerca */
#popupCerca .select-unificata {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
}

/* Risultati ricerca */
#risultatiRicerca {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 10px;
}

/* Mobile */
@media (max-width: 480px) {
  .modal-content {
    padding: 16px 14px;
    width: 94vw;
  }
  .modal-btn {
    font-size: 0.95rem;
    padding: 9px 10px;
  }
}
/* Spazio extra sopra il pulsante Annulla */
.modal-btn.btn-cancel {
  margin-top: 14px !important;   /* distanzia dall’ultimo bottone */
}
/* ===== Gestione Utenti – CSS finale stabile ===== */

/* Neutralizza eventuali legacy con data-label */
.gestione-utenti .utenti-table td::before { content: none !important; }


/* === ATC Voice: punteggi + diff (leggeri) ================================ */
.score-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:780px){ .score-grid{ grid-template-columns:1fr 1fr; } }

.panel{
  background:#fff; border:1px solid var(--gray-200);
  border-radius: var(--radius-12); padding:12px 14px;
}
.panel h4{ margin:0 0 8px; font-size:14px; font-weight:800; color: var(--blue-700); }
.big{
  display:inline-flex; align-items:center; gap:8px;
  background:#eef6ff; color:#0f4794; border:1px solid #d4e7ff;
  padding:8px 12px; border-radius:12px; font-weight:800; font-size:18px;
}
.score-breakdown{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.score-chip{
  background:#f6f7fb; border:1px solid #e4e6ef; border-radius:999px;
  padding:6px 10px; font-weight:600; font-size:14px;
}
.score-chip .lab{ color:#475569; margin-right:6px }
.score-chip .val{ color:#0a7c2f; font-weight:800 }

.verdict-pill{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  padding:6px 10px; border:1px solid #e2e8f0; background:#f8fafc; font-weight:700; font-size:13px;
}
.verdict-ok{ background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.verdict-minor{ background:#fef9c3; border-color:#fde68a; color:#713f12; }
.verdict-ko{ background:#fee2e2; border-color:#fecaca; color:#7f1d1d; }

.result-diff{
  white-space:normal; background:#f8fbff; border:1px solid #dbeaff;
  border-radius:12px; padding:12px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px;
}
.diff .row{ margin-top:6px; line-height:1.9 }
.tok{ display:inline-block; padding:1px 6px; border-radius:8px; border:1px solid #e5e7eb; margin:2px 3px }
.tok.ok{ background:#dcfce7; border-color:#bbf7d0 }
.tok.miss{ background:#fee2e2; border-color:#fecaca }
.tok.extra{ background:#fff7d6; border-color:#fde68a }
.legend{ font-size:12px; color:#555; margin-top:8px }
.legend .swatch{ display:inline-block; width:10px; height:10px; border-radius:3px; margin:0 6px -1px 12px }
.swatch.ok{ background:#dcfce7; border:1px solid #bbf7d0 }
.swatch.miss{ background:#fee2e2; border:1px solid #fecaca }
.swatch.extra{ background:#fff7d6; border:1px solid #fde68a }


/* ======================================================================
   MATERIE — pagina Allenamento (3 colonne responsive)
   ====================================================================== */

/* Titolo sezione (se lo usi sopra la griglia) */
.section-title{
  text-align:center;
  color:#1565C0;
  font-weight:800;
  font-size:1.75rem;
  line-height:1.2;
  margin:10px 0 6px;
}

/* ---------------------------
   Griglia delle materie
   --------------------------- */
.materie-grid{
  display:grid !important;                        /* override flex vecchio */
  grid-template-columns: repeat(3, minmax(240px, 1fr)); /* 3 colonne desktop */
  gap: 20px;
  align-items: stretch;
  justify-content: center;
  max-width: 1080px;
  margin: 20px auto 60px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Card materia (default) */
.materia-card{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  min-height: 140px;
  padding: 18px;

  background:#fff;
  color:#1565C0;
  border:2px solid #1565C0;
  border-radius:12px;
  font-weight:800;
  font-size:1.15rem;

  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  cursor:pointer;
  user-select:none;
}

.materia-card:hover{
  transform: translateY(-3px);
  background:#eaf3ff;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

/* Accessibilità tastiera */
.materia-card:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(21,101,192,.22);
}

/* Varianti speciali (Cerca / Recupera) */
.materia-card.cerca{
  background:#2e7d32;
  border-color:#2e7d32;
  color:#fff;
}
.materia-card.recupera{
  background:#ef6c00;
  border-color:#ef6c00;
  color:#fff;
}
.materia-card.cerca:hover,
.materia-card.recupera:hover{
  filter:brightness(1.05);
}

/* ---------------------------
   Responsive
   --------------------------- */
@media (max-width: 1024px){
  .materie-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px){
  .materie-grid{ grid-template-columns: 1fr; }
  .materia-card{
    min-height: 120px;
    font-size: 1.05rem;
  }
}
/* ======================================================================
   RECUPERA TEST — lista sessioni
   ====================================================================== */
.recupera-wrap{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:1rem;
  box-sizing:border-box;
}

.session-card{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-12);
  box-shadow:var(--shadow-md);
  padding:1rem;
  margin-bottom:1rem;
}

.session-card.completed{ border-left:5px solid #22c55e; background:#f0fdf4; }
.session-card.incomplete{ border-left:5px solid #f59e0b; }

.session-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.session-meta{ min-width:220px; }
.session-meta .materia{
  font-weight:800;
  color:var(--blue-600);
  font-size:1.05rem;
}
.session-meta .info{
  margin-top:4px;
  color:var(--gray-500);
  font-size:.95rem;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.session-meta .info .dot{ color:#cbd5e1; }

.session-actions{
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
}

/* Bottoni coerenti col tema */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 14px;
  border-radius:var(--radius-8);
  font-weight:700; font-size:.98rem;
  cursor:pointer; text-decoration:none; border:1px solid transparent;
  transition:background-color .2s, filter .15s;
}
.btn--primary{
  background:var(--blue-600); color:#fff; border-color:transparent;
}
.btn--primary:hover{ background:var(--blue-700); }
.btn--ghost{
  background:#fff; border:1px solid var(--gray-300); color:var(--gray-700);
}
.btn--ghost:hover{ background:#f9fafb; }
.btn--danger{
  background:#ef4444; color:#fff; border-color:transparent;
}
.btn--danger:hover{ background:#dc2626; }

/* Responsive */
@media (max-width:700px){
  .session-hd{ flex-direction:column; align-items:flex-start; }
  .session-actions{ width:100%; justify-content:flex-start; flex-wrap:wrap; }
}
/* =========================================================
   QUIZ PAGE – layout generale e coerenza
   ========================================================= */
.quiz-main{max-width:1440px;width:100%;margin:0 auto;padding:0 .75rem 1.5rem}
.quiz-peggiori body,body.quiz-peggiori{background:#fff2f0}
.quiz-peggiori .test-container{border:2px solid #f44336}

.quiz-headline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.quiz-num-materia{color:#888;font-weight:400;margin-left:6px}
.quiz-materia-cerca{color:#f57c00}

.quiz-answered-at{
  margin-left: 8px;
  font-size: .82rem;
  font-weight: 400;        /* fine, non bold */
  color: #6b7280;          /* grigio soft */
  letter-spacing: .2px;
  white-space: nowrap;
}
/* Click-to-reveal (training) */
.domanda-area.area-cliccabile{cursor:pointer}
#form-risposte.hidden{display:none}

/* Contenitore principale (niente overflow verticale “fantasma”) */
#container-main.quiz-main{flex-grow:1}


/* =======================
   NAV DOMANDE – a caselle
   ======================= */
.nav-domande{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(42px,42px));
  gap:8px;
  justify-content:start;
  align-items:start;
  margin:1.2rem 0 24px!important
}
.nav-numero{
  display:flex!important;align-items:center;justify-content:center;
  width:42px;height:42px;margin:0!important;line-height:1;
  border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#0f172a;
  font-weight:800;font-size:.98rem;text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s
}
.nav-numero:hover{border-color:#1565c0;box-shadow:0 2px 6px rgba(21,101,192,.18);color:#1565c0;cursor:pointer}
.nav-numero.current{background:#1565c0!important;color:#fff!important;border-color:#0d47a1!important;box-shadow:0 0 0 2px #0d47a133 inset}
.nav-numero.correct{background:#8BC34A!important;color:#fff!important;border-color:#689f38!important}
.nav-numero.incorrect{background:#E57373!important;color:#fff!important;border-color:#d32f2f!important}
.nav-numero.unanswered{background:#f1f5f9!important;color:#0f172a!important;border-color:#e2e8f0!important;font-weight:700}
@media (max-width:480px){
  .nav-domande{grid-template-columns:repeat(auto-fill,minmax(36px,36px));gap:6px}
  .nav-numero{width:36px;height:36px;font-size:.9rem;border-radius:8px}
}

/* =======================
   BADGE (difficoltà/importanza)
   ======================= */
.badge{display:inline-block;margin-left:6px;border-radius:4px;padding:2px 6px;font-weight:700;font-size:.72em;color:#fff;vertical-align:middle}
.badge-diff-s{background:#17b90d}
.badge-diff-m{background:#ff9500}
.badge-diff-d{background:#e53935}
.badge-imp-1{background:#0288d1}
.badge-imp-2{background:#fbc02d}
.badge-imp-3{background:#d32f2f}

/* =======================
   AUDIO
   ======================= */
.audio-box{margin-top:12px;padding:12px;border:1px dashed #cbd5e1;border-radius:10px;background:#f8fafc}
.audio-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.audio-badge{display:inline-block;padding:2px 8px;font-size:.8rem;border-radius:999px;background:#e3f2fd;color:#1565c0;font-weight:700}
.audio-note{font-size:.95rem;color:#475569;margin-top:6px}
.audio-ctrl{width:100%}
.audio-oneshot{display:flex;align-items:center;gap:10px}
.audio-hidden{display:none}

/* =======================
   RISPOSTE
   ======================= */
.risposta-label{
  display:block;width:100%;padding:.75rem 1.2rem;margin:.5rem 0;border-radius:9px;
  background:#fafafa;cursor:pointer;font-size:1.05rem;text-align:left;border:1px solid #eaeaea
}
.risposta-label input[type="radio"],.risposta-label input[type="checkbox"]{margin-right:12px;width:18px;height:18px}

.risposta-corretta,.risposta-label.risposta-corretta{background:#C8E6C9!important;border-color:#9bd59e!important;font-weight:700}
.risposta-sbagliata,.risposta-label.risposta-sbagliata{background:#FFCDD2!important;border-color:#f1999f!important;font-weight:700}

/* =======================
   PULSANTI NAVIGAZIONE (Avanti/Riepilogo) – blu istituzionale full width
   ======================= */
.navigation-buttons{margin-top:1.2rem}
.navigation-buttons a{
  display:block;width:100%;text-align:center;background:#1565C0;color:#fff;
  font-weight:700;font-size:1.1rem;border:none;border-radius:8px;
  padding:.9rem 1.2rem;cursor:pointer;margin:.6rem 0;text-decoration:none;
  box-shadow:0 2px 4px rgba(0,0,0,.2);transition:background .2s ease-in-out
}
.navigation-buttons a:hover{background:#0d47a1}

/* Mantieni coerente anche eventuale “Conferma” */
.btn-action.btn-check{
  display:block;width:100%;text-align:center;background:#1565C0;color:#fff;font-weight:700;font-size:1.1rem;
  border:none;border-radius:8px;padding:.85rem 1.2rem;cursor:pointer;margin:1rem 0;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:background .2s
}
.btn-action.btn-check:hover:not(:disabled){background:#0d47a1}
.btn-action.btn-check:disabled{opacity:.6;cursor:default}

/* =======================
   TESTATA/DOMANDA
   ======================= */
/* “Domanda X/Y” in blu */
.numero-domanda-quiz-centrato>div,
.numero-domanda-quiz-centrato>span:not(.feedback-quiz){
  font-size:1.3rem;font-weight:800;color:#1565C0;margin-bottom:.5rem
}
/* Testo domanda in blu */
.testo-domanda-quiz{
  font-size:1.15rem;font-weight:800;color:#1565C0;margin:1rem 0 1.2rem;line-height:1.4;text-align:left
}

/* =======================
   FEEDBACK (Esatto/Errato) – compatto
   ======================= */
.feedback-quiz{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:1.05rem;font-weight:700;border-radius:6px;padding:4px 6px;margin:.5rem 0;min-width:auto;text-align:center
}
.feedback-quiz.corretta{background:#C8E6C9;color:#1B5E20;border:1px solid #2E7D32}
.feedback-quiz.sbagliata{background:#FFCDD2;color:#B71C1C;border:1px solid #D32F2F}

/* =======================
   MODALE SPIEGAZIONE – lettura
   ======================= */
#spiegazione-modal{
  display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);
  align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(2px)
}
#spiegazione-modal .modal-box{
  background:#fff;border-radius:16px;width:min(960px,94vw);max-height:90vh;overflow:auto;padding:0;
  box-shadow:0 18px 50px rgba(0,0,0,.25)
}
#spiegazione-modal .modal-header{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:#1565C0;color:#fff;border-radius:16px 16px 0 0
}
#spiegazione-modal .modal-header h3{margin:0;font-size:1rem;font-weight:800;letter-spacing:.2px}
#spiegazione-modal .close-btn{
  all:unset;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:#fff;color:#d32f2f;font-size:22px;font-weight:700;transition:transform .12s,background .12s
}
#spiegazione-modal .close-btn:hover{transform:scale(1.05);background:#ffebee}
#spiegazione-content{padding:20px 22px;color:#233;line-height:1.55;font-size:1.05rem}
#spiegazione-content h1,#spiegazione-content h2,#spiegazione-content h3{color:#0d47a1;margin:.9em 0 .5em;line-height:1.3;font-weight:800}
#spiegazione-content p{margin:.4em 0}
#spiegazione-content ul,#spiegazione-content ol{margin:.3em 0 .8em 1.25em}
#spiegazione-content code{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:0 .3em}

/* =======================
   AZIONI: Leggi/Modifica (compatte)
   ======================= */
.action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spiegazione-btn{
  display:inline-flex;align-items:center;gap:8px;border:none;background:#eef6ff;color:#1565C0;font-weight:800;
  padding:8px 12px;border-radius:10px;cursor:pointer;box-shadow:0 2px 8px rgba(21,101,192,.12);
  transition:background .15s,transform .06s
}
.spiegazione-btn:hover{background:#e2f0ff}
.spiegazione-btn:active{transform:translateY(1px)}
.btn-modifica-spiegazione,.btn-modifica-domanda{
  position:relative;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  padding:8px 12px;border-radius:10px;font-weight:800;text-decoration:none;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.08);transition:transform .06s,filter .12s,background .15s
}
.btn-modifica-spiegazione{background:#ffe6e6;color:#B71C1C}
.btn-modifica-spiegazione:hover{filter:brightness(.98)}
.btn-modifica-domanda{background:#fff3e0;color:#8B0000}
.btn-modifica-domanda:hover{filter:brightness(.98)}
.btn-modifica-spiegazione svg,.btn-modifica-domanda svg,.spiegazione-btn svg{width:18px;height:18px}
.btn-modifica-spiegazione .tooltip,.btn-modifica-domanda .tooltip{
  position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);
  background:#0f172a;color:#fff;padding:6px 8px;font-size:.8rem;border-radius:6px;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transition:opacity .14s,transform .14s
}
.btn-modifica-spiegazione:hover .tooltip,.btn-modifica-domanda:hover .tooltip{opacity:1;transform:translate(-50%,-1px)}
.btn-modifica-spiegazione .tooltip::after,.btn-modifica-domanda .tooltip::after{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#0f172a
}

/* =======================
   MODAL editor (iframe)
   ======================= */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  align-items:center;justify-content:center;padding:18px
}
.modal-box-large{
  width:min(1200px,96vw);height:min(88vh,920px);background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.35);display:flex;flex-direction:column
}
.modal-header{display:flex;align-items:center;justify-content:space-between;background:#1565C0;color:#fff;padding:12px 16px}
.modal-header h2{margin:0;font-size:1.02rem;font-weight:800}
.modal-close-btn-header{
  width:34px;height:34px;border-radius:50%;border:none;background:#fff;color:#d32f2f;cursor:pointer;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .12s,background .15s
}
.modal-close-btn-header:hover{transform:scale(1.06);background:#ffebee}
.wysiwyg-frame{width:100%;height:100%;border:0}

/* Spaziatura pulsanti accanto al feedback */
#blocco-feedback .spiegazione-btn,#blocco-feedback .btn-modifica-spiegazione,#blocco-feedback .btn-modifica-domanda{margin-left:4px}
@media (max-width:700px){
  #blocco-feedback .spiegazione-btn,#blocco-feedback .btn-modifica-spiegazione,#blocco-feedback .btn-modifica-domanda{margin:4px 4px 0 0}
}

/* Accessibilità focus */
.spiegazione-btn:focus,.btn-modifica-spiegazione:focus,.btn-modifica-domanda:focus,
.modal-close-btn-header:focus,#spiegazione-modal .close-btn:focus{outline:2px solid #1565C0;outline-offset:2px}

/* Responsive fine-tuning */
@media (max-width:700px){
  .quiz-headline{flex-direction:column;align-items:flex-start;gap:6px}
  .audio-oneshot{flex-direction:column;align-items:flex-start}
}
/* 1) Il box bianco non deve “sporgere” */
.quiz-main-bg{
  margin-bottom: 0 !important;     /* niente margine che allunga la pagina */
  min-height: unset !important;     /* rimuove il 540px che forzava lo scroll */
  /* se ti serve aria interna, usa padding, NON margin */
}

/* 2) Il main deve occupare lo spazio e lasciare il footer visibile */
html, body{ height:100%; }
body{ display:flex; flex-direction:column; min-height:100vh; overflow-y:auto; }
main#container-main.quiz-main{ flex:1 0 auto !important; padding-bottom:16px; }

/* 3) Il footer va attaccato in fondo SEMPRE */
footer, .footer{ margin-top:auto !important; }

/* 4) Niente scroll “per colpa” dei modali nascosti */
.modal{ display:none !important; }
.modal[style*="display: flex"]{ display:flex !important; }

/* Extra: griglia numeri senza contributi ai margini */
.nav-domande{ margin-bottom: 16px !important; }
/* Stile per il contenitore delle note nella card passkey */
#card-passkey .note {
  text-align: left; /* Centra il contenuto, incluso il badge */
}

/* Stile per il paragrafo di testo all'interno delle note */
#card-passkey .note p {
  text-align: left; /* Riporta l'allineamento del testo a sinistra */
  margin-top: 0;
  margin-bottom: 0;
}

/* Stile specifico per il badge di accesso Google */
.badge--google-auth {
  display: inline-block; /* Permette di applicare margini e padding */
  background-color: #28a745; /* Sfondo verde */
  color: #ffffff; /* Testo bianco */
  padding: 4px 12px; /* Spaziatura interna */
  border-radius: 16px; /* Bordi arrotondati */
  font-size: 0.8em; /* Dimensione del font ridotta */
  font-weight: bold; /* Testo in grassetto */
  margin-bottom: 12px; /* Spazio tra il badge e il testo sottostante */
}

/* Shell centrata */
.page-nuovo-quiz main{
  display:flex;
  justify-content:center;
  padding:24px 12px 60px;
}
.page-nuovo-quiz .form-card{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  border-radius:12px;
}

/* Griglia del form */
.page-nuovo-quiz .form-card .bd .form-grid{
  display:grid;
  grid-template-columns: minmax(260px,1fr) minmax(260px,1fr);
  gap:16px 20px; /* riga / colonna */
  align-items:start;
}

/* Elementi che devono span-are entrambe le colonne */
.page-nuovo-quiz .form-card .bd .form-grid .full-width{
  grid-column: 1 / -1;
}

/* Testo domanda un po’ più arioso */
.page-nuovo-quiz textarea.input{
  min-height: 110px;
  resize: vertical;
}

/* Allinea bene note sotto i file input */
.page-nuovo-quiz .note{
  color:#6b7280;
  font-size:.9rem;
  margin-top:6px;
}

/* Pulsante submit a larghezza piena e ben allineato */
.page-nuovo-quiz .form-card .bd .form-grid > .full-width:last-child{
  margin-top:8px;
}

/* Pulsanti “pill” uniformi */
.page-nuovo-quiz .pills{
  display:flex; gap:10px; flex-wrap:wrap;
}
.page-nuovo-quiz .pill input{ position:absolute; opacity:0; width:0; height:0; }
.page-nuovo-quiz .pill{
  position:relative; display:inline-flex; align-items:center;
  padding:8px 14px; border:1px solid #e5e7eb; border-radius:999px; cursor:pointer;
}
.page-nuovo-quiz .pill input:checked + span,
.page-nuovo-quiz .pill span{
  font-weight:600;
}
.page-nuovo-quiz .pill input:checked ~ span{
  color:#0b57d0;
}
.page-nuovo-quiz .pill:hover{ background:#f8fafc; }

/* Pulsanti fantasma coerenti */
.page-nuovo-quiz .btn.btn--ghost{
  border:1px solid #e5e7eb; background:#fff;
}

/* Input & select consistenti (se il tuo style.css già li gestisce, questo è innocuo) */
.page-nuovo-quiz .input, .page-nuovo-quiz .select{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px 12px;
  background:#fff;
}

/* Card header un filo più prominente */
.page-nuovo-quiz .form-card .hd{
  font-weight:700;
}

/* Responsivo: 1 colonna sotto 900px */
@media (max-width: 900px){
  .page-nuovo-quiz .form-card .bd .form-grid{
    grid-template-columns: 1fr;
  }
}