/* ==========================================================================
   Console fondateur — js/screens/console.js
   Lisible sur un téléphone : des barres, des tableaux qui défilent seuls,
   aucune bibliothèque.
   ========================================================================== */

.console-page{container-type:inline-size}

.console-section{
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;
  padding:clamp(20px,3vw,30px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  background:var(--color-surface);
  box-shadow:var(--shadow-card);
}
.console-section h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:600;letter-spacing:-.03em}
.console-section h3{margin-top:6px;font-size:.95rem;font-weight:650}

/* --- chiffres clés --------------------------------------------------------- */
.console-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.console-stat{
  display:grid;gap:2px;align-content:start;
  padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-button);
  background:var(--color-bg);
}
.console-stat-value{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;color:var(--color-accent-strong);line-height:1.1}
.console-stat-label{font-size:.8rem;font-weight:600}
.console-stat-detail{font-size:.72rem;color:var(--color-secondary)}

/* --- barres ---------------------------------------------------------------- */
.console-bars{
  display:flex;align-items:flex-end;gap:3px;
  height:120px;padding:8px 2px 0;
  border-bottom:1px solid var(--color-border-strong);
  overflow-x:auto;
}
.console-bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;flex:1 0 18px;height:100%;gap:3px}
.console-bar-fill{width:100%;min-height:2px;border-radius:3px 3px 0 0;background:var(--color-accent)}
.console-bar-label{font-family:var(--font-mono);font-size:9px;color:var(--color-secondary);white-space:nowrap}

/* --- entonnoir ------------------------------------------------------------- */
.console-funnel{display:grid;gap:12px}
.console-funnel-head{display:flex;justify-content:space-between;gap:10px;font-size:.9rem}
.console-funnel-track{height:12px;border-radius:6px;background:var(--color-track);overflow:hidden}
.console-funnel-fill{display:block;height:100%;border-radius:6px;background:var(--color-accent)}
.console-funnel-loss{margin-top:4px;font-size:.78rem;color:var(--color-error)}

/* --- tableaux -------------------------------------------------------------- */
.console-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.console-table{width:100%;border-collapse:collapse;font-size:.85rem}
.console-table th,.console-table td{
  padding:8px 10px;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top;white-space:nowrap;
}
.console-table th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-secondary)}
.console-table tbody tr:last-child td{border-bottom:0}

.console-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}

/* --- comptes et chronologie ------------------------------------------------ */
.console-account{display:inline-flex;align-items:center;gap:8px}
.console-account-open{font-weight:600}
.console-copy{
  min-height:28px;padding:2px 8px;border:1px solid var(--color-border);border-radius:999px;
  background:var(--color-bg);color:var(--color-secondary);
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
}
.console-copy:hover{border-color:var(--color-accent);color:var(--color-accent-strong)}

.console-timeline{
  display:grid;gap:12px;margin-top:8px;padding:16px;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-button);background:var(--color-bg);
}
.console-timeline-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.console-timeline-avis ul{display:grid;gap:6px;margin:6px 0 0;padding-left:18px;font-size:.85rem}
.console-events{display:grid;gap:4px;max-height:420px;margin:0;padding:0;overflow-y:auto;list-style:none}
.console-events li{
  display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto auto;align-items:baseline;gap:8px;
  padding:6px 0;border-bottom:1px solid var(--color-border);font-size:.8rem;
}
.console-event-type{font-family:var(--font-mono);font-size:.7rem;color:var(--color-accent-strong)}
.console-event-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- avis ------------------------------------------------------------------ */
.console-filters{display:flex;flex-wrap:wrap;gap:6px}
.console-filter{
  min-height:34px;padding:5px 12px;border:1px solid var(--color-border);border-radius:999px;
  background:var(--color-surface);font-size:.78rem;cursor:pointer;
}
.console-filter.is-on{border-color:var(--color-text);background:var(--color-text);color:var(--color-on-dark)}
.console-feedback{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.console-feedback li{padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-bg)}
.console-feedback-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.console-rating{padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:650}
.console-rating.is-juste_bien{background:var(--color-success-soft,#EEF3EC);color:var(--color-success)}
.console-rating.is-trop_dur,.console-rating.is-trop_facile{background:var(--color-accent-soft);color:var(--color-accent-strong)}

/* --- confidentialité et avis, côté élève ----------------------------------- */
.privacy-toggle-row{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0;cursor:pointer}
/* Un lien seul sur sa ligne reste une cible : 44 px de haut, comme le reste. */
.privacy-toggle a{display:inline-flex;min-height:44px;align-items:center}
.privacy-toggle-input{width:20px;height:20px;margin-top:2px;accent-color:var(--color-accent)}
.feedback-prompt{display:grid;gap:10px;border-left:3px solid var(--color-accent)}
.feedback-choices{display:flex;flex-wrap:wrap;gap:8px}
.feedback-choice{
  min-height:44px;padding:8px 14px;border:1px solid var(--color-border-strong);border-radius:999px;
  background:var(--color-surface);font-size:.88rem;font-weight:600;cursor:pointer;
}
.feedback-choice[aria-pressed="true"]{border-color:var(--color-text);background:var(--color-text);color:var(--color-on-dark)}
.feedback-label{font-size:.82rem;font-weight:600}
.feedback-note{
  width:100%;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-button);
  background:var(--color-bg);color:var(--color-text);font:inherit;font-size:.9rem;resize:vertical;
}
.feedback-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.profile-feedback{display:grid;gap:10px}
.feedback-open{min-height:44px;justify-self:start}

@media(max-width:520px){
  .console-events li{grid-template-columns:minmax(0,1fr) auto}
  .console-event-type{grid-column:1/-1}
  .console-bars{height:96px}
}