/**
 * qcm-general/admin/admin.css
 * Feuille de style unique du panel admin (extraite de panel.php). Les couleurs et rayons sont
 * les variables --c-* du reste du portail. Chargée via admin_asset() (_layout.php), donc versionnée
 * automatiquement sur la date du fichier.
 */
  :root {
    --c-blue: #1D6FA5; --c-blue-light: #E5EFF6; --c-blue-dark: #0B2E45;
    --c-teal: #1D9E75; --c-teal-light: #E1F5EE; --c-teal-dark: #04342C;
    --c-red: #E24B4A; --c-red-light: #FCEBEB; --c-red-dark: #501313;
    --c-amber: #BA7517; --c-amber-light: #FAEEDA;
    --c-gray-bg: #F8F7F4; --c-gray-border: #D3D1C7; --c-gray-text: #5F5E5A; --c-text: #1a1a18;
    --radius: 10px; --radius-sm: 6px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: system-ui, -apple-system, sans-serif; background: var(--c-gray-bg); color: var(--c-text); }

  .wrap { max-width: 960px; margin: 0 auto; padding: 1.5rem; }
  .card { background: white; border: 1px solid var(--c-gray-border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
  .card h2 { font-size: 1rem; margin-bottom: 0.75rem; }
  .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; cursor: pointer; border: none; }
  .btn-primary { background: var(--c-blue); color: white; }
  .btn-danger { background: var(--c-red); color: white; }
  .btn-ghost { background: white; border: 1.5px solid var(--c-gray-border); color: var(--c-text); }
  .login-box { max-width: 320px; margin: 3rem auto; background: white; border: 1px solid var(--c-gray-border); border-radius: var(--radius); padding: 1.5rem; }
  .login-box input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); margin-bottom: 0.75rem; font-size: 0.9rem; }
  .error { color: var(--c-red-dark); background: var(--c-red-light); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.82rem; margin-bottom: 0.75rem; }
  .msg { color: var(--c-teal-dark); background: var(--c-teal-light); padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1rem; }
  table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
  th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--c-gray-border); }
  th { color: var(--c-gray-text); font-weight: 600; }
  .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
  .stat-box { background: var(--c-blue-light); border-radius: var(--radius-sm); padding: 0.75rem; text-align: center; }
  .stat-box .val { font-size: 1.3rem; font-weight: 700; color: var(--c-blue-dark); }
  .stat-box .lbl { font-size: 0.72rem; color: var(--c-gray-text); }
  .danger-zone { border-color: var(--c-red); }
  .danger-zone h2 { color: var(--c-red-dark); }

  .visits-chart { width: 100%; height: auto; display: block; margin-top: 0.3rem; }
  .chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--c-gray-text); margin-bottom: 0.4rem; }
  .legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
  .legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }


  .tab-panel { display: none; }
  .tab-panel.active { display: block; }
  .actions-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
  .config-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 0.5rem; }
  .config-row label { font-size: 0.8rem; color: var(--c-gray-text); display: block; margin-bottom: 0.3rem; }
  .config-row input { width: 100px; padding: 0.5rem; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); }
  .config-row select { padding: 0.5rem; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.85rem; }
  .config-group-title { font-size: 0.82rem; font-weight: 700; color: var(--c-blue-dark); margin: 1.1rem 0 0.5rem; padding-top: 0.9rem; border-top: 1px dashed var(--c-gray-border); }
  .config-group-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  .config-hint { font-size: 0.72rem; color: var(--c-gray-text); margin-top: -0.2rem; margin-bottom: 0.6rem; }
  .pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
  .pill-weak { background: var(--c-red-light); color: var(--c-red-dark); }
  .pill-ok { background: var(--c-teal-light); color: var(--c-teal-dark); }
  .pill-count { background: var(--c-amber-light); color: var(--c-amber); }
  .pill-danger { background: var(--c-red-light); color: var(--c-red-dark); }
  /* Barre de progression colorée — réutilisée dans Apprenants, Modules faibles, Stats du
     portail. Largeur pilotée par une variable CSS (--pct) fixée en style inline sur chaque
     instance, pas par une classe par palier : évite de générer une classe par valeur de %
     possible. Couleur en revanche reste par classe (mêmes seuils que .pill-weak/.pill-ok :
     <60% = faible, sinon correct) pour rester cohérente avec le code couleur déjà utilisé. */
  .bar-track { background: var(--c-gray-border); border-radius: 20px; height: 8px; overflow: hidden; min-width: 70px; }
  .bar-fill { height: 100%; border-radius: 20px; width: var(--pct, 0%); transition: width 0.3s; }
  .bar-fill.bar-weak { background: var(--c-red); }
  .bar-fill.bar-ok { background: var(--c-teal); }

  /* Badge admin — purement visuel (cf. api.php action=submit, adminUser), jamais utilisé
     pour exclure quoi que ce soit des stats. Violet pour rester distinct des couleurs
     seen/weak/ok déjà utilisées ailleurs dans le panel. */
  .badge-admin { display: inline-block; background: var(--c-indigo, #5B3A9E); color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; border-radius: 20px; padding: 0.08rem 0.5rem; margin-left: 0.4rem; vertical-align: middle; }
  .bar-cell { display: flex; align-items: center; gap: 0.5rem; }
  .bar-cell .bar-track { flex: 1; }
  .bar-cell .bar-label { font-size: 0.78rem; font-weight: 600; white-space: nowrap; min-width: 2.4em; text-align: right; }

  .lb-group-title { font-size: 0.85rem; font-weight: 700; color: var(--c-blue-dark); margin: 1.2rem 0 0.5rem; }
  .lb-group-title:first-of-type { margin-top: 0; }

  .report-card { border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
  .report-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
  .report-question { font-size: 0.88rem; font-weight: 600; }
  .report-meta { font-size: 0.72rem; color: var(--c-gray-text); margin-top: 0.15rem; }
  .report-options { font-size: 0.78rem; color: var(--c-gray-text); margin: 0.5rem 0; padding-left: 1.1rem; }
  .report-options li { margin-bottom: 0.1rem; }
  .report-entries { margin-top: 0.5rem; border-top: 1px dashed var(--c-gray-border); padding-top: 0.5rem; }
  .report-entry { font-size: 0.78rem; padding: 0.3rem 0; border-bottom: 1px solid var(--c-gray-border); }
  .report-entry:last-child { border-bottom: none; }
  .report-entry .motif { font-weight: 600; color: var(--c-red-dark); }
  .report-entry .who { color: var(--c-gray-text); font-size: 0.72rem; }

  .news-toolbar { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
  .news-tb-btn { width: 34px; height: 34px; border: 1px solid var(--c-gray-border); background: white; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
  .news-tb-btn:hover { background: var(--c-blue-light); border-color: var(--c-blue); }
  .news-tb-sep { width: 1px; height: 22px; background: var(--c-gray-border); margin: 0 0.3rem; }
  .news-editor { min-height: 70px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; font-size: 0.9rem; line-height: 1.5; background: white; }
  .news-editor:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; }
  .news-line-count { font-size: 0.72rem; color: var(--c-gray-text); margin-top: 0.35rem; }
  .news-publish-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0; font-size: 0.85rem; }
  .news-preview-wrap { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px dashed var(--c-gray-border); }
  .news-preview-label { font-size: 0.75rem; color: var(--c-gray-text); margin-bottom: 0.5rem; font-weight: 600; }
  .news-preview { display: flex; align-items: flex-start; gap: 0.6rem; background: var(--c-amber-light); border: 1px solid var(--c-amber); border-left: 4px solid var(--c-amber); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.85rem; line-height: 1.5; color: #412402; }
  .news-preview-empty { color: var(--c-gray-text); font-style: italic; }
  .news-draft-notice { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; background: var(--c-amber-light); border: 1px solid var(--c-amber); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; font-size: 0.78rem; color: #412402; flex-wrap: wrap; }
  .news-draft-notice button { font-size: 0.72rem; padding: 0.35rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid var(--c-amber); background: white; cursor: pointer; color: #412402; }

  .tool-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
  .tool-card-text { min-width: 200px; flex: 1; }
  .tool-card-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.2rem; }
  .tool-card-desc { font-size: 0.78rem; color: var(--c-gray-text); line-height: 1.4; }

  .qe-modal-overlay { position: fixed; inset: 0; background: rgba(11,46,69,0.55); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
  .qe-modal-overlay.open { display: flex; }
  .qe-modal { background: white; border-radius: var(--radius); max-width: 560px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
  .qe-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-gray-border); flex-shrink: 0; }
  .qe-modal-header h3 { font-size: 1rem; }
  .qe-modal-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--c-gray-text); line-height: 1; }
  .qe-modal-body { padding: 1.1rem 1.25rem; overflow-y: auto; }
  .qe-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--c-gray-border); flex-shrink: 0; flex-wrap: wrap; }

  .fe-subtab { width: auto; padding: 0 0.9rem; font-size: 0.8rem; font-weight: 600; }
  .fe-subtab.active { background: var(--c-blue); color: white; border-color: var(--c-blue); }
  .fe-block { display: flex; gap: 0.5rem; align-items: flex-start; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); padding: 0.6rem; margin-bottom: 0.6rem; background: white; }
  .fe-block.fe-dragover { border-color: var(--c-blue); box-shadow: 0 0 0 2px var(--c-blue-light); }
  .fe-block-locked { background: var(--c-gray-bg); }
  .fe-block-handle { cursor: grab; color: var(--c-gray-text); font-size: 1rem; padding-top: 0.3rem; user-select: none; flex-shrink: 0; }
  .fe-block-body { flex: 1; min-width: 0; }
  .fe-card-title { width: 100%; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; margin-bottom: 0.4rem; }
  .fe-mini-toolbar { display: flex; gap: 0.3rem; margin-bottom: 0.35rem; }
  .fe-mini-toolbar button { width: 26px; height: 26px; border: 1px solid var(--c-gray-border); background: white; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.75rem; }
  .fe-mini-toolbar button:hover { background: var(--c-blue-light); border-color: var(--c-blue); }
  .fe-card-content { min-height: 50px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; font-size: 0.83rem; line-height: 1.5; background: white; }
  .fe-card-content:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; }
  .fe-block-delete { background: none; border: none; cursor: pointer; font-size: 0.9rem; color: var(--c-red); flex-shrink: 0; padding-top: 0.3rem; }
  .fe-raw-label { font-size: 0.72rem; color: var(--c-gray-text); font-weight: 600; margin-bottom: 0.3rem; }
  .fe-raw-preview { font-size: 0.7rem; background: white; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); padding: 0.5rem; max-height: 90px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: var(--c-gray-text); margin: 0; }
  .fe-tree-espace { border: 1px solid var(--c-gray-border); border-radius: var(--radius); margin-bottom: 0.6rem; }
  .fe-tree-espace > summary { padding: 0.65rem 0.9rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--c-blue-dark); list-style: none; display: flex; align-items: center; justify-content: space-between; }
  .fe-tree-espace > summary::-webkit-details-marker { display: none; }
  .fe-tree-espace > summary::before { content: '▸'; margin-right: 0.5rem; }
  .fe-tree-espace[open] > summary::before { content: '▾'; }
  .fe-tree-module { border-top: 1px solid var(--c-gray-border); margin: 0 0.9rem; }
  .fe-tree-module > summary { padding: 0.55rem 0.4rem; font-weight: 600; font-size: 0.82rem; cursor: pointer; color: var(--c-text); list-style: none; display: flex; align-items: center; justify-content: space-between; }
  .fe-tree-module > summary::-webkit-details-marker { display: none; }
  .fe-tree-module > summary::before { content: '▸'; margin-right: 0.5rem; color: var(--c-gray-text); }
  .fe-tree-module[open] > summary::before { content: '▾'; }
  .fe-tree-module:last-child { padding-bottom: 0.5rem; }
  .fe-tree-count { font-size: 0.7rem; font-weight: 400; color: var(--c-gray-text); background: var(--c-gray-bg); border-radius: 20px; padding: 0.1rem 0.55rem; }
  .qe-save-msg { font-size: 0.78rem; color: var(--c-gray-text); margin-right: auto; }
  .qe-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--c-blue-dark); margin: 0.9rem 0 0.35rem; }
  .qe-label:first-child { margin-top: 0; }
  .qe-textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.87rem; resize: vertical; }
  .qe-option-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
  .qe-option-row input[type="text"] { flex: 1; padding: 0.5rem 0.65rem; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); font-size: 0.85rem; }
  .qe-option-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
  .qe-publish-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.82rem; }
  .qe-loading, .qe-error { font-size: 0.85rem; padding: 1rem 0; text-align: center; }
  .qe-error { color: var(--c-red-dark); }
  .cf-message { font-size: 0.9rem; line-height: 1.55; color: var(--c-text); }

/* =====================================================================================
   Coque du panel (v2) : hero compact + sidebar + zone de contenu.
   Tout ce qui est au-dessus est le CSS historique de panel.php, repris tel quel
   (cartes, tableaux, pastilles, éditeurs, modales…) pour que les onglets ne changent pas.
   ===================================================================================== */
:root {
  --c-indigo: #5B3A9E;
  --sidebar-w: 240px;
}
body { min-height: 100vh; }

/* Focus clavier visible partout où le CSS historique ne le prévoyait pas */
.nav-item:focus-visible, .nav-toggle:focus-visible, .back-link:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}
.hero .back-link:focus-visible, .hero .nav-toggle:focus-visible { outline-color: #fff; }

/* --- Hero compact : même dégradé et même bannière que le reste du portail --- */
.hero { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 56px; padding: 0.55rem 1.25rem; color: white; background: linear-gradient(160deg, #2E1D53 0%, #5B3A9E 55%, #8A6FC4 100%); }
.hero-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.hero-right { justify-self: end; display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.hero-text { min-width: 0; }
.hero-title { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.hero-sub { font-size: 0.72rem; color: rgba(255,255,255,0.78); line-height: 1.2; margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-banner-img { height: 40px; width: auto; justify-self: center; object-fit: contain; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,0.3); }
.hero-user { font-size: 0.75rem; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.back-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); border-radius: 30px; font-family: inherit; font-size: 0.72rem; font-weight: 600; color: white; text-decoration: none; cursor: pointer; white-space: nowrap; }
.back-link:hover { background: rgba(255,255,255,0.24); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; padding: 0; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius-sm); color: white; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.nav-toggle:hover { background: rgba(255,255,255,0.24); }

/* --- Coque : sidebar à gauche, contenu à droite --- */
.admin-shell { display: flex; align-items: stretch; min-height: calc(100vh - 58px); } /* 58 px = hauteur du hero : la sidebar descend jusqu'en bas même sur un onglet court */
.admin-sidebar { flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); background: white; border-right: 1px solid var(--c-gray-border); }
.admin-sidebar-inner { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 0.9rem 0.7rem 1.4rem; }
.admin-main { flex: 1 1 0; min-width: 0; max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
/* Un tableau large (Apprenants, Logs) défile dans sa carte au lieu d'élargir toute la page */
.admin-main .card { overflow-x: auto; }
.admin-scrim { display: none; }

.nav-group { margin-bottom: 0.9rem; }
.nav-group-label { padding: 0 0.7rem; margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 700; color: var(--c-gray-text); }
.nav-group-danger { margin: 1rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--c-gray-border); }

.nav-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.7rem; background: none; border: none; border-left: 3px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.84rem; font-weight: 500; color: var(--c-text); text-align: left; cursor: pointer; }
.nav-item:hover { background: var(--c-gray-bg); }
.nav-item.active { background: var(--c-blue-light); border-left-color: var(--c-blue); color: var(--c-blue-dark); font-weight: 700; }
.nav-ico { flex: 0 0 1.3em; text-align: center; font-size: 0.95rem; }
.nav-txt { flex: 1; min-width: 0; }
.nav-item .pill { margin-left: auto; flex-shrink: 0; }
.nav-item-danger { color: var(--c-red-dark); }
.nav-item-danger:hover { background: var(--c-red-light); }
.nav-item-danger.active { background: var(--c-red-light); border-left-color: var(--c-red); color: var(--c-red-dark); }

/* --- Petit écran : la sidebar devient un tiroir --- */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .admin-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 900; width: 270px; max-width: 85vw; flex: none; box-shadow: 6px 0 24px rgba(0,0,0,0.18); transform: translateX(-105%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
  .admin-sidebar-inner { position: static; max-height: none; height: 100%; }
  body.nav-open .admin-sidebar { transform: none; visibility: visible; transition-delay: 0s; }
  .admin-scrim { position: fixed; inset: 0; z-index: 899; background: rgba(11,46,69,0.45); }
  body.nav-open .admin-scrim { display: block; }
  body.nav-open { overflow: hidden; }
  .admin-main { padding: 1rem; }
}
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr auto; padding: 0.5rem 0.9rem; gap: 0.6rem; }
  .hero-banner-img { display: none; }
  .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-sidebar { transition: none; }
}