/* ═══════════════════════════════════════════════════════════════════════════
 * Sapia Academy · UI "Scintilla"
 * Strato grafico comune a tutte le pagine /p/. Si carica DOPO i CSS di pagina
 * e ridefinisce font, forme, icone e componenti. Palette dal logo:
 *   notte #26215C · indaco #534AB7 · lavanda #7F77DD · scintilla #EF9F27
 *   salvia #1D9E75 · carta #F7F6F2
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --s-notte: #26215C;  --s-notte-2: #3C3489;
  --s-indaco: #534AB7; --s-lavanda: #7F77DD; --s-lavanda-50: #EEEDFE; --s-lavanda-100: #E4E2FB;
  --s-scintilla: #EF9F27; --s-scintilla-hover: #DB8B14; --s-scintilla-50: #FDF1DC; --s-scintilla-ink: #633806;
  --s-salvia: #1D9E75; --s-salvia-50: #E1F5EE; --s-salvia-ink: #0F6E56;
  --s-corallo: #D85A30; --s-corallo-50: #FAECE7; --s-corallo-ink: #993C1D;
  --s-carta: #F7F6F2; --s-carta-2: #F4F2FB;
  --s-r-sm: 10px; --s-r: 16px; --s-r-lg: 22px; --s-pill: 999px;
  --s-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s-shadow: 0 1px 2px rgba(38,33,92,.05), 0 8px 24px rgba(38,33,92,.07);
  --s-shadow-hover: 0 2px 4px rgba(38,33,92,.06), 0 14px 34px rgba(38,33,92,.12);

  /* allinea le variabili dei CSS di pagina */
  --font-sans: var(--s-font); --font-display: var(--s-font);
  --radius-sm: var(--s-r-sm); --radius: var(--s-r); --radius-lg: var(--s-r-lg); --radius-xl: 26px;
}

/* ── Icone Tabler senza virgolette nella classe: <i class=ti-NOME> ───────── */
i[class^="ti-"], i[class*=" ti-"] {
  font-family: "tabler-icons-outline" !important;
  font-style: normal; font-weight: normal !important; font-variant: normal;
  text-transform: none; line-height: 1; display: inline-block; vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ── Tipografia ─────────────────────────────────────────────────────────── */
html, body, button, input, select, textarea { font-family: var(--s-font); }
body { letter-spacing: -0.005em; }
h1, h2, h3, h4, .display, [class*="title"], [class*="-name"] { font-family: var(--s-font) !important; letter-spacing: -0.02em; }
h1, h2 { font-weight: 600; }
code, pre, kbd, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── Pulsanti a pillola ─────────────────────────────────────────────────── */
.btn, .login-btn, .btn-quiz-next, .btn-quiz-submit, .purchase-cta, .modal-buy-btn,
.home-btn-primary, .home-btn-ghost, .send-btn, button.primary {
  border-radius: var(--s-pill) !important;
  font-weight: 600;
}
.btn-primary, .login-btn, .btn-quiz-next, .btn-quiz-submit, .purchase-cta, .modal-buy-btn, .home-btn-primary, #al-btn {
  background: var(--s-scintilla) !important; color: var(--s-notte) !important;
  box-shadow: 0 6px 18px rgba(239,159,39,.28) !important; border: none !important;
}
.btn-primary:hover, .login-btn:hover, .btn-quiz-next:hover, .btn-quiz-submit:hover, .purchase-cta:hover,
.modal-buy-btn:hover, .home-btn-primary:hover, #al-btn:hover {
  background: var(--s-scintilla-hover) !important; transform: translateY(-1px);
}
.btn-ghost, .home-btn-ghost {
  background: #fff; color: var(--s-notte); border: 1.5px solid var(--s-lavanda-100) !important;
}
.btn-ghost:hover, .home-btn-ghost:hover { border-color: var(--s-lavanda) !important; background: var(--s-lavanda-50); }
.btn-danger { background: var(--s-corallo-50) !important; color: var(--s-corallo-ink) !important; }
.btn-danger:hover { background: var(--s-corallo) !important; color: #fff !important; }
.btn-warn { background: var(--s-scintilla-50) !important; color: var(--s-scintilla-ink) !important; }
.btn i[class^="ti-"], button i[class^="ti-"] { font-size: 1.15em; }

/* ── Campi ──────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"], select, textarea {
  border-radius: var(--s-r-sm) !important;
  border: 1.5px solid #E4E1EE !important;
  background-color: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none !important; border-color: var(--s-indaco) !important;
  box-shadow: 0 0 0 4px rgba(83,74,183,.14) !important;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.form-card, .table-card, .corso-card, .kpi, .card, .success-card, .modal-card, .home-tile,
.preview-modal-box, .callout, .key-takeaways, .did-you-know {
  border-radius: var(--s-r-lg) !important;
}
.form-card, .table-card, .corso-card, .card, .home-tile {
  border: 1px solid #ECEAF4 !important; box-shadow: var(--s-shadow) !important; background: #fff;
}
.corso-card:hover, .home-tile:hover { box-shadow: var(--s-shadow-hover) !important; transform: translateY(-2px); }
.form-card-title, .table-title { display: flex; align-items: center; gap: 10px; font-weight: 600 !important; color: var(--s-notte); }
.form-card-title > i[class^="ti-"]:first-child, .table-title > i[class^="ti-"]:first-child {
  width: 34px; height: 34px; display: inline-grid; place-items: center; font-size: 18px;
  border-radius: 11px; background: var(--s-lavanda-50); color: var(--s-indaco); flex: none;
}

/* KPI pieni e colorati (sequenza indaco → scintilla → salvia → notte) */
.kpi { border: none !important; box-shadow: var(--s-shadow) !important; }
.kpi::before, .kpi::after { display: none !important; }
.kpi:nth-of-type(4n+1) { background: var(--s-indaco) !important; }
.kpi:nth-of-type(4n+2) { background: var(--s-scintilla) !important; }
.kpi:nth-of-type(4n+3) { background: var(--s-salvia) !important; }
.kpi:nth-of-type(4n+4) { background: var(--s-notte) !important; }
.kpi, .kpi * { color: #fff !important; }
.kpi:nth-of-type(4n+2), .kpi:nth-of-type(4n+2) * { color: var(--s-notte) !important; }

/* ── Tabelle ────────────────────────────────────────────────────────────── */
table { border-collapse: separate; border-spacing: 0; }
thead tr, .table-header { background: var(--s-carta-2) !important; }
thead th { font-weight: 600; color: #6B687A; text-transform: none !important; letter-spacing: 0 !important; }
tbody tr:hover { background: #FAF9FE; }

/* ── Badge, chip, tab ───────────────────────────────────────────────────── */
.badge, .chip, .cat-chip, .tag, .pill { border-radius: var(--s-pill) !important; font-weight: 600; }
.nav-tab, .phase-tab { border-radius: var(--s-pill) !important; }
.nav-tab[aria-selected="true"], .nav-tab.active, .phase-tab.active {
  background: var(--s-notte) !important; color: #fff !important;
}

/* ── Admin corsi: sidebar con tasselli colorati ─────────────────────────── */
.admin-sb { background: #fff !important; border-right: 1px solid #ECEAF4 !important; font-family: var(--s-font); }
.admin-sb .sb-sec { color: #9A97A6 !important; letter-spacing: .08em !important; }
.admin-sb .sb-item { border-radius: 14px !important; color: var(--s-notte) !important; font-weight: 500; padding: 7px 10px !important; }
.admin-sb .sb-item:hover { background: var(--s-carta-2) !important; }
.admin-sb .sb-item .ic {
  width: 30px !important; height: 30px; flex: none; display: inline-grid !important; place-items: center;
  border-radius: 10px; font-size: 17px; background: var(--s-lavanda-50); color: var(--s-indaco);
}
.admin-sb .sb-item:nth-of-type(3n+2) .ic { background: var(--s-scintilla-50); color: #BA7517; }
.admin-sb .sb-item:nth-of-type(3n+3) .ic { background: var(--s-salvia-50); color: var(--s-salvia-ink); }
.admin-sb .sb-item.active { background: var(--s-notte) !important; color: #fff !important; font-weight: 600 !important; }
.admin-sb .sb-item.active .ic { background: var(--s-scintilla) !important; color: var(--s-notte) !important; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar, .shop-topbar { box-shadow: 0 1px 0 #ECEAF4 !important; border-bottom: none !important; }

/* ── Player corsi ───────────────────────────────────────────────────────── */
.toc-item { border-radius: 14px !important; }
.toc-item.active { background: var(--s-lavanda-50) !important; color: var(--s-notte) !important; }
.course-cover { border-radius: var(--s-r-lg) !important; }
.quiz-opt, .mini-quiz-opt { border-radius: var(--s-r) !important; border-width: 1.5px !important; }
.quiz-opt:hover, .mini-quiz-opt:hover { border-color: var(--s-lavanda) !important; background: var(--s-lavanda-50) !important; }
.msg-bubble { border-radius: 18px !important; }
.flashcard-face { border-radius: var(--s-r-lg) !important; }
.slide { border-radius: var(--s-r-lg); }

/* ── Shop e home ────────────────────────────────────────────────────────── */
.cat-chip.active, .cat-chip[aria-pressed="true"] { background: var(--s-notte) !important; color: #fff !important; }
.stars-row, .cx-rating { color: var(--s-scintilla) !important; }

/* ── Icone in tassello (uso generico) ───────────────────────────────────── */
.s-tile { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; font-size: 20px;
  background: var(--s-lavanda-50); color: var(--s-indaco); }
.s-tile--amber { background: var(--s-scintilla-50); color: #BA7517; }
.s-tile--sage { background: var(--s-salvia-50); color: var(--s-salvia-ink); }

/* ── Scrollbar morbide ──────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #D9D6EC transparent; }

/* ── Landing: tasselli icona colorati a rotazione ───────────────────────── */
.feat .ic { border-radius: 14px !important; background: var(--s-lavanda-50) !important; color: var(--s-indaco) !important; }
.feat:nth-child(3n+2) .ic { background: var(--s-scintilla-50) !important; color: #BA7517 !important; }
.feat:nth-child(3n+3) .ic { background: var(--s-salvia-50) !important; color: var(--s-salvia-ink) !important; }
.feat .ic svg { stroke: currentColor !important; }
.feat { border-radius: var(--s-r-lg) !important; }