/* ==========================================================================
   LeCoach — Admin / Dashboard
   ========================================================================== */
:root { --lc-sidebar-w: 256px; }

.lc-admin { background: #f4f5f7; min-height: 100vh; min-height: 100dvh; }

/* Login — `align-items: center` centre la carte, mais si celle-ci dépasse la
   hauteur de l'écran (petit mobile, clavier ouvert) le centrage rogne le haut
   ET le bas, sans possibilité de défiler. `overflow-y: auto` + marge auto
   conservent le centrage tant que ça tient, et laissent défiler sinon. */
.lc-login-body { background: linear-gradient(135deg, #1c1c1e, #141414); min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.lc-login-body > * { margin-block: auto; }
.lc-login-card { background: #fff; border-radius: 20px; padding: 40px; width: 100%; max-width: 410px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }

/* Sidebar */
/* `100dvh` = hauteur RÉELLEMENT visible : sur Safari iOS et Chrome Android, la
   barre d'adresse rétractable rend `100vh` plus haut que l'écran, ce qui pousse
   le bas de la barre latérale hors de vue. `100vh` reste en repli pour les
   navigateurs anciens (une déclaration invalide est simplement ignorée). */
.lc-sidebar { position: fixed; top: 0; left: 0; width: var(--lc-sidebar-w); height: 100vh; height: 100dvh; background: #16181d; color: #b9bcc4; display: flex; flex-direction: column; z-index: 1040; transition: transform .3s ease; }
.lc-sidebar-brand { padding: 24px 22px; border-bottom: 1px solid rgba(255,255,255,.06); flex: 0 0 auto; }
.lc-sidebar-brand img { height: 36px; filter: brightness(0) invert(1); }

/* `min-height: 0` EST INDISPENSABLE ici — ne pas le retirer.
   Un élément flex a `min-height: auto` par défaut : il refuse de rétrécir sous
   la hauteur de son contenu. Sans cette ligne, `overflow-y: auto` ne s'active
   JAMAIS ; le menu garde sa hauteur intégrale et repousse `.lc-sidebar-foot`
   (Déconnexion) hors de l'écran. Le symptôme est net dès que le menu est long —
   l'espace formateur compte 25 entrées : ses dernières rubriques et le bouton
   de déconnexion étaient inaccessibles.
   `overscroll-behavior: contain` empêche le défilement de « déborder » sur la
   page quand on atteint le bas du menu. */
.lc-sidebar-nav { flex: 1 1 auto; min-height: 0; padding: 16px 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.lc-sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: #b9bcc4; font-weight: 600; font-size: .92rem; margin-bottom: 4px; transition: all .2s; }
.lc-sidebar-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.lc-sidebar-nav a.active { background: var(--lc-red); color: #fff; }
.lc-sidebar-nav a i { font-size: 1.1rem; }
.lc-sidebar-foot { padding: 16px 12px; border-top: 1px solid rgba(255,255,255,.06); flex: 0 0 auto; }
.lc-sidebar-foot a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #9296a0; font-size: .88rem; border-radius: 8px; }
.lc-sidebar-foot a:hover { color: #fff; background: rgba(255,255,255,.05); }

/* Main */
.lc-admin-main { margin-left: var(--lc-sidebar-w); min-height: 100vh; min-height: 100dvh; }
.lc-admin-top { background: #fff; border-bottom: 1px solid #e8e9ec; padding: 16px 28px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 1020; }
.lc-admin-pagetitle { font-size: 1.25rem; font-weight: 800; margin: 0; flex: 1; }
.lc-admin-user { display: flex; align-items: center; gap: 12px; }
.lc-admin-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--lc-red); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.lc-admin-content { padding: 28px; }

/* KPI cards */
.lc-kpi { background: #fff; border-radius: 16px; padding: 22px; height: 100%; border: 1px solid #eceef1; }
.lc-kpi-ico { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 14px; }
.lc-kpi-ico.red { background: var(--lc-red-soft); color: var(--lc-red); }
.lc-kpi-ico.dark { background: #ecedf0; color: #16181d; }
.lc-kpi-ico.green { background: #e3f6ec; color: #16a34a; }
.lc-kpi-num { font-size: 1.7rem; font-weight: 800; color: var(--lc-black); line-height: 1; }
.lc-kpi-label { color: var(--lc-muted); font-size: .85rem; margin-top: 4px; }

/* Panels & tables */
.lc-panel { background: #fff; border-radius: 16px; border: 1px solid #eceef1; }
.lc-panel-head { padding: 18px 22px; border-bottom: 1px solid #eceef1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.lc-panel-head h5 { margin: 0; font-size: 1.05rem; }
.lc-panel-body { padding: 22px; }
.lc-table { width: 100%; margin: 0; }
.lc-table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lc-muted); font-weight: 700; padding: 12px 16px; border-bottom: 2px solid #eceef1; text-align: left; }
.lc-table td { padding: 14px 16px; border-bottom: 1px solid #f0f1f4; font-size: .92rem; vertical-align: middle; }
.lc-table tr:last-child td { border-bottom: none; }
.lc-table tbody tr:hover { background: #fafbfc; }

.lc-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.lc-pill.green { background: #e3f6ec; color: #16a34a; }
.lc-pill.amber { background: #fff3e0; color: #d97706; }
.lc-pill.red { background: var(--lc-red-soft); color: var(--lc-red); }
.lc-pill.gray { background: #eef0f3; color: #6b7280; }
.lc-pill.blue { background: #e6effe; color: #2563eb; }

/* Forms */
.lc-admin .form-label { font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.lc-admin .form-control, .lc-admin .form-select { border-radius: 10px; padding: 10px 13px; border-color: #e2e4e8; }
.lc-admin .form-control:focus, .lc-admin .form-select:focus { border-color: var(--lc-red); box-shadow: 0 0 0 .2rem rgba(232,37,43,.1); }
.lc-form-section { background:#fff; border:1px solid #eceef1; border-radius:16px; padding:24px; margin-bottom:22px; }
.lc-form-section h6 { font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; color:var(--lc-muted); margin-bottom:18px; }

.lc-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.lc-actions a { color: var(--lc-muted); font-size: 1.05rem; margin: 0 4px; }
.lc-actions a:hover { color: var(--lc-red); }

@media (max-width: 991px) {
  .lc-sidebar { transform: translateX(-100%); }
  .lc-sidebar.open { transform: translateX(0); }
  .lc-admin-main { margin-left: 0; }
}

/* ==========================================================================
   RAFFINEMENTS UI — alignement des listes & formulaires (admin + formateur)
   CSS uniquement, scopé .lc-admin (n'affecte jamais le site public).
   Corrige : décalages des cellules d'action (liens/boutons/formulaires
   inline), alignement des pills, hauteurs de champs hétérogènes.
   ========================================================================== */

/* --- Tables : contenu centré verticalement de façon homogène --- */
.lc-admin .lc-table th,
.lc-admin .lc-table td { vertical-align: middle; }
.lc-admin .lc-table td .lc-pill,
.lc-admin .lc-table td .badge,
.lc-admin .lc-table td .btn,
.lc-admin .lc-table td > a,
.lc-admin .lc-table td i,
.lc-admin .lc-table td small,
.lc-admin .lc-table td img { vertical-align: middle; }

/* --- Cellules d'action : liens + boutons + <form.d-inline> sur une seule
       ligne, centrés (c'était la source principale des décalages) --- */
.lc-admin .lc-actions,
.lc-admin .lc-table td.text-end { white-space: nowrap; }
.lc-admin .lc-table td form { margin: 0; }
.lc-admin .lc-table td form.d-inline { display: inline-flex !important; align-items: center; margin: 0; vertical-align: middle; }
.lc-admin .lc-actions > *,
.lc-admin .lc-table td.text-end > * { vertical-align: middle; }
.lc-admin .lc-actions a,
.lc-admin .lc-actions button { display: inline-flex; align-items: center; justify-content: center; }
.lc-admin .lc-table td .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; line-height: 1.15; }
/* Espacement régulier entre actions successives, quel que soit le HTML */
.lc-admin .lc-table td.text-end .btn + .btn,
.lc-admin .lc-table td.text-end .btn + form,
.lc-admin .lc-table td.text-end form + form,
.lc-admin .lc-table td.text-end form + .btn,
.lc-admin .lc-table td.text-end a + .btn,
.lc-admin .lc-table td.text-end a + a,
.lc-admin .lc-table td.text-end a + form,
.lc-admin .lc-actions form + form,
.lc-admin .lc-actions a + form { margin-left: .3rem; }

/* --- Formulaires : hauteurs de champs homogènes => fin des décalages en grille --- */
.lc-admin .form-control,
.lc-admin .form-select { min-height: 44px; }
.lc-admin .form-control-sm,
.lc-admin .form-select-sm { min-height: 34px; }
.lc-admin textarea.form-control { min-height: 90px; }
.lc-admin .form-control-color { min-height: 44px; padding: 5px; }
.lc-admin .form-control-sm.form-control-color { min-height: 34px; }
.lc-admin .form-label { margin-bottom: .4rem; }

/* Cases à cocher / interrupteurs : alignés proprement avec leur libellé */
.lc-admin .form-check-input { margin-top: .16em; }
.lc-admin .form-check-label { line-height: 1.35; }
.lc-admin .form-switch .form-check-input { margin-top: .12em; }

/* Dans les sections de formulaire, aligner le bas des champs de la même ligne
   (les hauteurs uniformes ci-dessus font déjà l'essentiel ; scope prudent). */
.lc-admin .lc-form-section > .row { align-items: flex-end; }
.lc-admin .lc-form-section > .row > [class*="col"] > .form-check:only-child { margin-bottom: .5rem; }

/* --- Panneaux-formulaires : padding pour ne pas coller aux bords ni rogner les
       titres (« Informations »/« Paramètres » tronqués par le coin arrondi +
       overflow:hidden). Ciblage UNIQUEMENT des panneaux sans en-tête ni tableau,
       via :not(:has()) : un navigateur sans :has() ignore la règle (listes
       intactes), un moderne applique le padding aux seuls formulaires. --- */
.lc-admin .lc-panel:not(:has(> .lc-panel-head)):not(:has(> .lc-panel-body)):not(:has(> .table-responsive)) {
  padding: 22px 24px;
}

/* Panneaux-listes à EN-TÊTE INLINE (titre/bouton + description au-dessus d'un
   tableau, sans .lc-panel-head) : aligner cet en-tête et la description sur les
   colonnes du tableau (22px) + décoller du bord haut. Corrige le décalage
   « en-tête collé au bord vs colonnes indentées ». */
.lc-admin .lc-panel:has(> .table-responsive):not(:has(> .lc-panel-head)) > *:not(.table-responsive) {
  padding-left: 22px;
  padding-right: 22px;
}
.lc-admin .lc-panel:has(> .table-responsive):not(:has(> .lc-panel-head)) > *:first-child {
  padding-top: 20px;
}

/* ==========================================================================
   Usurpation : décalage des éléments FIXES / COLLANTS
   --------------------------------------------------------------------------
   Le bandeau est `position: fixed; top: 0`. La barre latérale l'est aussi, et
   l'en-tête est `position: sticky; top: 0` — sans correctif, le bandeau
   recouvre le logo de la barre latérale et l'en-tête vient se coller DERRIÈRE
   lui, rendant son contenu illisible.
   `--lc-imp-h` est mesurée en JavaScript par le bandeau lui-même (il passe à la
   ligne sur petit écran, une valeur fixe masquerait du contenu). La classe
   `lc-impersonating` n'est posée que pendant une usurpation : hors de ce cas,
   aucune de ces règles ne s'applique.
   ========================================================================== */
.lc-impersonating .lc-sidebar {
  top: var(--lc-imp-h, 0px);
  height: calc(100vh - var(--lc-imp-h, 0px));
  height: calc(100dvh - var(--lc-imp-h, 0px));
}
.lc-impersonating .lc-admin-top { top: var(--lc-imp-h, 0px); }

/* --- Panneaux : la table épouse les coins arrondis --- */
/* ATTENTION — ne JAMAIS remettre `overflow: hidden` ici.
   Cette règle servait à faire épouser les coins arrondis au tableau, mais elle
   s'applique à l'élément même qui doit défiler : sa spécificité (0,3,0) écrase
   le `.table-responsive { overflow-x: auto }` de style.css (0,1,0), et admin.css
   est chargée après. Résultat : plus aucun défilement horizontal sur mobile,
   les colonnes hors écran devenaient simplement inaccessibles.
   `overflow-x: auto` conserve le rognage nécessaire aux coins arrondis tout en
   rétablissant le défilement. */
.lc-admin .lc-panel > .table-responsive {
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.lc-admin .lc-panel > .table-responsive > .lc-table th:first-child,
.lc-admin .lc-panel > .table-responsive > .lc-table td:first-child { padding-left: 22px; }
.lc-admin .lc-panel > .table-responsive > .lc-table th:last-child,
.lc-admin .lc-panel > .table-responsive > .lc-table td:last-child { padding-right: 22px; }

/* --- Tuiles KPI : contenu centré verticalement (hauteurs égales en ligne) --- */
.lc-admin .lc-kpi { display: flex; flex-direction: column; justify-content: center; }
.lc-admin .lc-kpi.text-center { align-items: center; }
.lc-admin .lc-kpi .lc-kpi-num { line-height: 1.1; }