/* ============================================================
   Nexalys — Bibliothèque (Explorer les cours) · v2
   Scopé sous .nxl-root. Couleurs : tokens de theme.css (--nx-*).
   ============================================================ */

#tab-library { background: var(--nx-bg); }

.nxl-root {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px 28px;
  box-sizing: border-box;
  background: var(--nx-bg);
  color: var(--nx-text);
  font-family: "Geist", "Geist Variable", "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}
.nxl-root *, .nxl-root *::before, .nxl-root *::after { box-sizing: border-box; }
.nxl-root button:focus-visible { outline: none; box-shadow: var(--nx-focus); }

/* ───────── En-tête ───────── */
.nxl-root .nxl-header { display: flex; flex-direction: column; gap: 12px; }
.nxl-root .nxl-head-titles { display: flex; flex-direction: column; gap: 3px; }
.nxl-root .nxl-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--nx-green-700);
}
.nxl-root .nxl-title {
  margin: 2px 0 0; font-size: 21px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.035em; color: var(--nx-ink);
}
.nxl-root .nxl-sub { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--nx-muted); }

/* ───────── Lien d'action (erreur de chargement) ───────── */
.nxl-root .nxl-link {
  flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 650; color: var(--nx-green-700);
}
.nxl-root .nxl-link:hover { color: var(--nx-green-900); text-decoration: underline; }

/* ───────── Recherche ───────── */
.nxl-root .nxl-search {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px;
  border: 1px solid var(--nx-border-strong); border-radius: 11px;
  background: var(--nx-surface); color: var(--nx-faint); cursor: text;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.nxl-root .nxl-search:focus-within { border-color: var(--nx-green-400); box-shadow: var(--nx-focus); color: var(--nx-green-700); }
.nxl-root .nxl-search-ico { flex: 0 0 auto; display: grid; }
.nxl-root .nxl-search input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0;
  background: transparent; font: inherit; font-size: 13px; color: var(--nx-ink);
}
.nxl-root .nxl-search input::placeholder { color: var(--nx-faint); }
.nxl-root .nxl-search input::-webkit-search-cancel-button { cursor: pointer; }

/* ───────── Filtres (même style que Entraînement) ───────── */
.nxl-root .nxl-filters {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px;
  padding: 4px; border: 1px solid var(--nx-border); border-radius: 12px; background: var(--nx-surface-3);
}
.nxl-root .nxl-filter {
  min-width: 0; height: 32px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--nx-muted); font: inherit; font-size: 12px; font-weight: 650; white-space: nowrap;
  cursor: pointer; transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.nxl-root .nxl-filter > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nxl-root .nxl-filter:hover { color: var(--nx-green-900); }
.nxl-root .nxl-filter.is-active {
  color: var(--nx-green-900); background: var(--nx-surface);
  border-color: var(--nx-green-200); box-shadow: var(--nx-shadow-1);
}
.nxl-root .nxl-filter-n {
  flex: 0 0 auto; min-width: 17px; padding: 0 5px; border-radius: 999px;
  font-style: normal; font-size: 10.5px; font-weight: 650; line-height: 16px;
  color: var(--nx-faint); background: rgba(255,255,255,.7); font-variant-numeric: tabular-nums;
}
.nxl-root .nxl-filter-n:empty { display: none; }
.nxl-root .nxl-filter.is-active .nxl-filter-n { color: var(--nx-green-800); background: var(--nx-green-50); }

/* ───────── État vide ───────── */
.nxl-root .nxl-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 18px; text-align: center;
  border: 1px dashed var(--nx-border-strong); border-radius: var(--nx-r-lg);
  background: var(--nx-surface); color: var(--nx-muted); font-size: 12.5px; line-height: 1.55;
}
.nxl-root .nxl-empty[hidden] { display: none; }
.nxl-root .nxl-empty-ico {
  width: 40px; height: 40px; margin-bottom: 4px; display: grid; place-items: center;
  border: 1px solid var(--nx-green-200); border-radius: 12px;
  background: var(--nx-green-50); color: var(--nx-green-700);
}
.nxl-root .nxl-empty b { font-size: 13.5px; font-weight: 700; color: var(--nx-ink); }

/* ───────── Chargement ───────── */
.nxl-root .nxl-skel {
  height: 62px; border: 1px solid var(--nx-border); border-radius: 14px;
  background: linear-gradient(90deg, var(--nx-surface-3) 0%, #fafcfb 50%, var(--nx-surface-3) 100%);
  background-size: 200% 100%; animation: nxl-shimmer 1.3s ease-in-out infinite;
}
@keyframes nxl-shimmer { to { background-position: -200% 0; } }

/* ───────── Domaines ───────── */
.nxl-root .nxl-domains { display: flex; flex-direction: column; gap: 8px; }
.nxl-root .nxl-domain {
  overflow: hidden; border: 1px solid var(--nx-border); border-radius: 14px;
  background: var(--nx-surface); box-shadow: var(--nx-shadow-1);
  transition: border-color .15s, box-shadow .15s;
}
.nxl-root .nxl-domain:hover { border-color: var(--nx-border-strong); }
.nxl-root .nxl-domain.is-open { border-color: var(--nx-green-200); box-shadow: var(--nx-shadow-2); }

.nxl-root .nxl-domain-head {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 13px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.nxl-root .nxl-domain-code {
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--nx-border); border-radius: 10px; background: var(--nx-surface-2);
  color: var(--nx-muted); font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 650; transition: background-color .15s, border-color .15s, color .15s;
}
.nxl-root .nxl-domain.is-open .nxl-domain-code,
.nxl-root .nxl-domain.is-complete .nxl-domain-code {
  color: var(--nx-green-800); background: var(--nx-green-50); border-color: var(--nx-green-200);
}
.nxl-root .nxl-domain-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nxl-root .nxl-domain-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; color: var(--nx-ink);
}
.nxl-root .nxl-domain-sub { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--nx-muted); }
.nxl-root .nxl-domain-sub > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxl-root .nxl-domain-bar {
  flex: 0 0 64px; height: 4px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden;
}
.nxl-root .nxl-domain-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--nx-green-500); }
.nxl-root .nxl-domain.is-complete .nxl-domain-sub { color: var(--nx-green-700); font-weight: 600; }
.nxl-root .nxl-domain-chev { flex: 0 0 auto; display: grid; place-items: center; color: var(--nx-faint); transition: transform .2s ease, color .15s; }
.nxl-root .nxl-domain.is-open .nxl-domain-chev { transform: rotate(180deg); color: var(--nx-green-700); }

.nxl-root .nxl-domain-body { display: none; padding: 4px 6px 6px; border-top: 1px solid var(--nx-border); }
.nxl-root .nxl-domain.is-open .nxl-domain-body { display: block; animation: nxl-in .2s ease; }
@keyframes nxl-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ───────── Lignes de cours ───────── */
.nxl-root .nxl-modules { display: flex; flex-direction: column; gap: 2px; }
.nxl-root .nxl-mod {
  display: flex; align-items: center; gap: 11px; padding: 9px 8px;
  border-radius: 10px; transition: background-color .14s;
}
.nxl-root .nxl-mod:hover { background: var(--nx-surface-2); }

/* Pastille d'état */
.nxl-root .nxl-st {
  flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center;
  border: 1.5px solid var(--nx-border-strong); border-radius: 50%; background: #fff;
  color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
}
.nxl-root .nxl-st--current,
.nxl-root .nxl-st--started { border-color: var(--nx-warn-dot); }
.nxl-root .nxl-st--current::after,
.nxl-root .nxl-st--started::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-warn-dot); }
.nxl-root .nxl-st--ahead { border-color: var(--nx-navy-600); }
.nxl-root .nxl-st--ahead::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-navy-600); }
.nxl-root .nxl-st--done { border-color: var(--nx-green-500); background: var(--nx-green-500); }
.nxl-root .nxl-st--done::after { content: "✓"; }
.nxl-root .nxl-st--mastered { border-color: var(--nx-green-700); background: var(--nx-green-700); }
.nxl-root .nxl-st--mastered::after { content: "★"; font-size: 9px; }
.nxl-root .nxl-st--known { border-color: var(--nx-green-300); background: var(--nx-green-50); color: var(--nx-green-700); }
.nxl-root .nxl-st--known::after { content: "✓"; }

.nxl-root .nxl-mod-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nxl-root .nxl-mod-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--nx-ink);
}
.nxl-root .nxl-mod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11px; }
.nxl-root .nxl-mod-state { font-weight: 650; color: var(--nx-faint); white-space: nowrap; }
.nxl-root .nxl-mod-state--current,
.nxl-root .nxl-mod-state--started { color: var(--nx-warn-ink); }
.nxl-root .nxl-mod-state--ahead { color: var(--nx-navy-700); }
.nxl-root .nxl-mod-state--done { color: var(--nx-green-700); }
.nxl-root .nxl-mod-state--mastered,
.nxl-root .nxl-mod-state--known { color: var(--nx-green-800); }

.nxl-root .nxl-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px;
  border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface-2);
  color: var(--nx-muted); font-size: 10.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.nxl-root .nxl-tag--path::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--nx-navy-600); }

/* Actions */
.nxl-root .nxl-mod-end { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.nxl-root .nxl-save {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--nx-faint); cursor: pointer; opacity: 0;
  transition: opacity .14s, color .14s, background-color .14s, border-color .14s;
}
.nxl-root .nxl-mod:hover .nxl-save,
.nxl-root .nxl-save:focus-visible,
.nxl-root .nxl-save.is-on { opacity: 1; }
.nxl-root .nxl-save:hover { color: var(--nx-ink); background: var(--nx-surface-3); border-color: var(--nx-border); }
.nxl-root .nxl-save.is-on { color: var(--nx-navy-700); background: var(--nx-navy-50); border-color: var(--nx-navy-100); }
.nxl-root .nxl-save.is-on:hover { background: var(--nx-navy-100); }
@media (hover: none) { .nxl-root .nxl-save { opacity: 1; } }

.nxl-root .nxl-open {
  display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 7px 0 11px;
  border: 1px solid var(--nx-border); border-radius: 9px; background: var(--nx-surface);
  color: var(--nx-text); font: inherit; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer;
  transition: color .14s, background-color .14s, border-color .14s;
}
.nxl-root .nxl-open svg { color: var(--nx-faint); transition: transform .14s, color .14s; }
.nxl-root .nxl-open:hover:not(:disabled) { color: var(--nx-green-900); background: var(--nx-green-50); border-color: var(--nx-green-300); }
.nxl-root .nxl-open:hover:not(:disabled) svg { color: var(--nx-green-700); transform: translateX(1px); }
.nxl-root .nxl-open--primary {
  color: var(--nx-btn-primary-fg); background: var(--nx-btn-primary-bg);
  border-color: var(--nx-btn-primary-bd); box-shadow: var(--nx-shadow-green);
}
.nxl-root .nxl-open--primary svg { color: var(--nx-green-800); }
.nxl-root .nxl-open--primary:hover:not(:disabled) { background: var(--nx-btn-primary-bg-hover); border-color: var(--nx-btn-primary-bd-hover); }
.nxl-root .nxl-open:disabled { padding: 0 10px; cursor: default; color: var(--nx-faint); background: var(--nx-surface-2); }

/* Cours pas encore disponible */
.nxl-root .nxl-mod.is-unavailable .nxl-mod-name { color: var(--nx-muted); }

/* ───────── Petits écrans ───────── */
@media (max-width: 360px) {
  .nxl-root { padding: 16px 10px 24px; }
  .nxl-root .nxl-filter { font-size: 11px; padding: 0 4px; }
  .nxl-root .nxl-filter-n { display: none; }
  .nxl-root .nxl-domain-head { gap: 10px; padding: 11px 10px; }
  .nxl-root .nxl-domain-code { width: 32px; height: 32px; font-size: 10px; }
  .nxl-root .nxl-domain-bar { flex-basis: 44px; }
  .nxl-root .nxl-mod { gap: 9px; padding: 9px 5px; }
  .nxl-root .nxl-open { padding: 0 6px 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .nxl-root *, .nxl-root *::before, .nxl-root *::after { animation: none !important; transition: none !important; }
}