/* ============================================================
   MMC · Restyle drop-in  —  mmc-restyle.css
   ------------------------------------------------------------
   COME SI USA (dev): includere QUESTO file DOPO il foglio di
   stile esistente dell'app, su OGNI pagina. Non cambia il
   markup: agisce sulle stesse classi già in uso
   (.btn, .card, .table, .badge-*, .mgmt-nav, …) e ridefinisce
   le variabili CSS legacy. Risultato: tutte le pagine Askama
   passano al linguaggio unificato "Caldo · compatta".

   Funziona per le 3 app (LMS, Portale, Management):
   ridefinisce sia i token --mmc-* (LMS) sia --primary/--gradient
   (Portale) sia --primary/blu (Management → oro).

   Solo grafica: nessuna modifica funzionale.
   ============================================================ */

/* ---- 1. Palette unificata (valori condivisi) ---- */
:root {
  --u-gold:        #FFC648;
  --u-gold-hover:  #E6B242;
  --u-gold-deep:   #8A6A0F;   /* oro come TESTO/azione — WCAG AA su bianco */
  --u-gold-light:  #FFF6E2;
  --u-red:         #ED1C24;
  --u-red-hover:   #C41920;
  --u-grad:        linear-gradient(135deg, #FFC648 0%, #ED1C24 100%);
  --u-ink:         #232323;
  --u-body:        #525252;
  --u-muted:       #767676;   /* AA su bianco (4.54:1) */
  --u-border:      #ECE8E1;   /* hairline caldo */
  --u-border-2:    #E0DBD2;
  --u-bg:          #FAF9F7;   /* off-white caldo */
  --u-radius:      10px;      /* controlli */
  --u-radius-lg:   14px;      /* card */
  --u-radius-xs:   7px;       /* chip/badge */
  --u-shadow-sm:   0 1px 2px rgba(45,33,8,.05);
  --u-shadow:      0 1px 2px rgba(45,33,8,.05), 0 12px 30px -16px rgba(45,33,8,.20);
  --u-shadow-lg:   0 2px 6px rgba(45,33,8,.06), 0 22px 48px -22px rgba(45,33,8,.28);
}

/* ---- 2. Override delle variabili legacy delle 3 app ---- */
:root {
  /* LMS (lms-style.css) — già token-driven */
  --mmc-dark:       var(--u-ink);
  --mmc-gray-600:   var(--u-body);
  --mmc-gray-400:   var(--u-muted);
  --mmc-gray-200:   var(--u-border);
  --mmc-gray-100:   var(--u-bg);
  --mmc-gold-muted: var(--u-gold-deep);
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-full: 999px;
  --shadow-sm: var(--u-shadow-sm);
  --shadow-md: var(--u-shadow);
  --shadow-lg: var(--u-shadow-lg);

  /* Portale (portal.css) */
  --primary:     var(--u-ink);
  --primary-dark:#000;
  --accent-gold: var(--u-gold);
  --gradient:    var(--u-grad);
  --text:        var(--u-ink);
  --text-muted:  var(--u-muted);
  --text-light:  var(--u-muted);
  --bg:          var(--u-bg);
  --border:      var(--u-border);
  --radius:      10px;
  --shadow:      var(--u-shadow);
}

/* Management (management-style.css) usa --primary per QUASI tutto il blu:
   riassegnandolo all'oro-deep, nav attiva/focus/tab/chip/timeline/link
   diventano oro automaticamente. Scope su .mgmt-nav per non toccare il
   Portale (che pure usa --primary, ma come ink). */
.mgmt-nav,
.mgmt-nav ~ main,
body:has(.mgmt-nav) {
  --primary:       var(--u-gold-deep);
  --primary-hover: #6F560B;
  --bg:            var(--u-bg);
  --text:          var(--u-ink);
  --text-muted:    var(--u-muted);
  --border:        var(--u-border);
  --radius:        10px;
  --shadow:        var(--u-shadow-sm);
}

/* ---- 3. Tipografia ---- */
body { background: var(--u-bg); color: var(--u-body); }
h1, h2, h3, h4, h5, h6 { color: var(--u-ink); }
/* Display sottile per i titoli grandi (mantiene il DNA MMC) */
h1 { font-weight: 300; letter-spacing: -0.02em; }

/* ---- 4. Bottoni — rettangolari, primario a gradiente ---- */
.btn {
  border-radius: var(--u-radius) !important;
  font-weight: 600;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn-primary,
.btn-gradient,
.btn-hero {
  background: var(--u-grad) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: var(--u-radius) !important;
}
.btn-hero { text-transform: uppercase; }
.btn-primary:hover,
.btn-gradient:hover,
.btn-hero:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(237,28,36,.40) !important; }
.btn-secondary {
  background: #fff !important;
  border: 1px solid var(--u-border-2) !important;
  color: var(--u-ink) !important;
}
.btn-secondary:hover { border-color: var(--u-gold) !important; background: var(--u-gold-light) !important; }
.btn-outline { border-radius: var(--u-radius) !important; }
.btn-google, .google-btn { border-radius: var(--u-radius) !important; }

/* ---- 5. Card — angoli generosi, ombra a strati, hairline caldo ---- */
.card, .stat-card, .dashboard-card, .feature-card, .home-service-card,
.auth-card, .login-card, .consent-card, .test-card, .result-card,
.gdpr-section, .lesson-card {
  border-radius: var(--u-radius-lg) !important;
  border-color: var(--u-border) !important;
}
.card { box-shadow: var(--u-shadow); }
.card-header { border-bottom: 1px solid var(--u-border) !important; }

/* ---- 6. Badge — chip morbido, sentence case (non maiuscolo) ---- */
.badge {
  border-radius: var(--u-radius-xs) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;
}

/* ---- 7. Tabelle — header chiaro caldo, hover oro ---- */
.table { border-radius: var(--u-radius-lg); overflow: hidden; box-shadow: var(--u-shadow-sm); }
.table th,
thead th {
  background: #FBFAF7 !important;
  color: var(--u-muted) !important;
  border-bottom: 1px solid var(--u-border) !important;
}
.table tr:hover td,
tbody tr:hover { background: var(--u-gold-light) !important; }

/* ---- 8. Form — focus ring oro ---- */
.form-input:focus, .form-select:focus, .form-textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--u-gold) !important;
  box-shadow: 0 0 0 3px var(--u-gold-light) !important;
  outline: none;
}
.form-input, .form-select, .form-textarea,
.form-group input, .form-group select, .form-group textarea {
  border-radius: var(--u-radius) !important;
}

/* ---- 9. LMS — header scuro: logo bianco resta; nav active oro ---- */
.table th { /* LMS aveva header scuro #333 → ora chiaro (vedi §7) */ }

/* ---- 10. Progress — gradiente oro→rosso, pillola ---- */
.progress-bar, .progress-fill { border-radius: 999px !important; }
.progress-fill { background: var(--u-grad) !important; }
.progress-fill.complete { background: #1E7A46 !important; }

/* ---- 11. Management — bonifica dei blu hardcoded (#eff6ff → oro-light) ---- */
.nav-menu .nav-link:hover, .nav-menu .nav-link.active,
.nav-group-toggle:hover, .nav-group.active .nav-group-toggle,
.mega-panel a:hover, .mega-panel a.active,
.nav-logout:hover,
tr.selected-row,
.drop-zone:hover, .drop-zone.dragover,
.tag-badge,
.related-link:hover,
.chat-user { background: var(--u-gold-light) !important; }

.mega-panel a.active { border-left-color: var(--u-gold-deep) !important; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--u-gold) !important; }
.ai-result, .related-link:hover { border-color: var(--u-gold) !important; }

/* Bottone primario Management (era blu pieno) → gradiente */
.mgmt-nav ~ main .btn-primary,
body:has(.mgmt-nav) .btn-primary { background: var(--u-grad) !important; color: #fff !important; }

/* Tab/chip attivi: oro-deep con testo bianco (contrasto AA) */
.tab-item.active,
.type-chip.active { background: var(--u-gold-deep) !important; border-color: var(--u-gold-deep) !important; color: #fff !important; }

/* Timeline / spinner / focus accent ereditano da --primary (= oro-deep) */

/* ---- 12. Motion ---- */
.card { transition: transform .2s, box-shadow .2s; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }