:root{
  /* Base */
  --bg:#f6f7fb;
  --card:#ffffff;

  /* Text */
  --text:#0f172a;
  --muted:#64748b;

  /* Accent */
  --accent:#8F55A2; /*#16a34a;*/

  /* States */
  --danger:#dc2626;

  /* UI */
  --border:rgba(15,23,42,.10);
  --shadow:0 10px 30px rgba(15,23,42,.08);
}

/* RESET */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}

.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:#fff;backdrop-filter: blur(10px);
}

/* LAYOUT */
.container{max-width:1400px;margin:0 auto;padding:20px}

.brand{font-weight:800;letter-spacing:.3px;font-size:18px}
.tenant{margin-left:10px;color:var(--muted);font-size:12px}

/* CARDS */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
}

/* GRID */
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:1fr}
@media(min-width:900px){ .grid.cols-2{grid-template-columns:1.1fr .9fr} }

/* TYPO */
h2,h3{margin:0 0 8px;font-weight:800}
.small{font-size:13px;color:var(--muted)}
.label{font-size:12px;color:var(--muted);margin:12px 0 6px}
.hr{height:1px;background:var(--border);margin:16px 0}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:14px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.08)}
.btn.primary{
  background:var(--accent);
  border-color:rgba(22,163,74,.25);
  color:#fff;
}
.btn.primary:hover{filter:brightness(1.03)}
.btn.danger{
  background:var(--danger);
  border-color:rgba(220,38,38,.25);
  color:#fff;
}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* INPUT */
.input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  font-size:14px;
}
.input::placeholder{color:#94a3b8}

/* LIST */
.list{display:flex;flex-direction:column;gap:12px}
.item{
  display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#ffffff;
  transition:background .12s ease, transform .12s ease;
}
.item:hover{background:#f8fafc;transform:translateY(-1px)}
.item .meta{color:var(--muted);font-size:12px}

/* BADGE */
.badge{
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  background:#ffffff;
}
.badge.ok{
  color:#166534;
  border-color:rgba(22,163,74,.25);
  background:rgba(22,163,74,.08);
}
.badge.expired{
  color:#991b1b;
  border-color:rgba(220,38,38,.25);
  background:rgba(220,38,38,.08);
}

/* KPI */
.kpi{display:flex;gap:10px;flex-wrap:wrap}
.kpi .pill{
  padding:8px 12px;border-radius:999px;
  background:#ffffff;
  border:1px solid var(--border);
  font-size:12px;color:var(--muted);
}

/* VIDEO */
.video{
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  border:1px solid var(--border);
  background:#000;
}

/* NAVBAR */
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid var(--border);
}
.navbar__title{font-weight:800}

/* MENU */
.menu{position:relative}
.menu__btn{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);
  padding:8px 10px;
  cursor:pointer;
}
.menu__panel{
  position:absolute;right:0;top:42px;
  min-width:160px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;
  display:none;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.menu__panel.open{display:block}
.menu__panel a{display:block;padding:10px 14px}
.menu__panel a:hover{background:#f1f5f9}

/* TOAST */
.toast{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  background:#ffffff;
  border:1px solid var(--border);
  padding:12px 16px;
  border-radius:16px;
  font-weight:600;
  display:none;
  box-shadow:var(--shadow);
}
.toast.show{display:block}

/* --- CORSI SCADUTI --- */
.item-expired {
  opacity: 0.45;
  filter: grayscale(1);
  background: #f1f5f9;
}

.item-expired .course-title {
  text-decoration: line-through;
}

.course-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.expired-label {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}