/* ============================================================
   Modulix Manager — Système de design (variables + composants)
   ------------------------------------------------------------
   Source unique de la palette. Chargé partout (admin + public)
   AVANT toute autre feuille du plugin. La page Réglages →
   « Image de marque » surcharge ces variables via
   wp_add_inline_style(), donc aucune autre feuille ne doit
   redéfinir :root.
   ============================================================ */

:root {
    /* Accent follows each admin user's WordPress profile colour scheme
       (--wp-admin-theme-color, set by WP on admin pages). The front-end has no
       scheme, so it falls back to the brand purple. Intentionally NOT a
       configurable setting. */
    --mlx-primary:       var(--wp-admin-theme-color, #6c5ce7);
    --mlx-primary-dark:  var(--wp-admin-theme-color-darker-10, #5a4bd1);
    --mlx-primary-light: #a29bfe;
    --mlx-primary-light: color-mix(in srgb, var(--wp-admin-theme-color, #6c5ce7) 38%, #fff);
    --mlx-success:       #00a32a;
    --mlx-danger:        #d63638;
    --mlx-warning:       #dba617;
    --mlx-info:          #0984e3;
    --mlx-bg:            #f0f2f5;
    --mlx-card:          #ffffff;
    --mlx-border:        #e0e0e0;
    --mlx-text:          #1d2327;
    --mlx-text-muted:    #646970;
    --mlx-radius:        10px;
    --mlx-shadow:        0 2px 12px rgba(0, 0, 0, .07);
    --mlx-shadow-hover:  0 6px 24px rgba(0, 0, 0, .12);
}

/* ── Boutons pleins : glyphes toujours blancs ────────────────
   L'accent suit le schéma de couleurs de l'admin, donc le fond d'un
   .button-primary vaut --mlx-primary. Une icône teintée à l'accent
   disparaîtrait dedans : on force le blanc sur les boutons pleins. */
.button-primary,
a.button-primary,
.button-primary:hover,
.button-primary:focus,
.button-primary:active,
.button-primary .dashicons,
a.button-primary .dashicons,
.button-hero.button-primary .dashicons,
.button-danger,
.button-danger .dashicons,
.button.edit-student .dashicons,
.button.edit-teacher .dashicons,
.button.edit-age-group .dashicons {
    color: #fff !important;
}

/* ── Panneau « zone dangereuse » (actions destructives) ──────── */
.mlx-danger-zone { border-color: var(--mlx-danger); }
.mlx-danger-zone > h2 { color: var(--mlx-danger); margin-top: 0; }

/* ── Bouton avec état de chargement ──────────────────────────
   Ajouter la classe .mlx-loading au bouton pendant un appel
   AJAX : le libellé s'estompe et une roulette apparaît. */
.mlx-loading {
    position: relative;
    pointer-events: none;
    opacity: .7;
}

.mlx-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: mlx-spin .7s linear infinite;
}

@keyframes mlx-spin {
    to { transform: rotate(360deg); }
}

/* ── État vide partagé ───────────────────────────────────── */
.mlx-empty-state {
    padding: 28px 20px;
    text-align: center;
    color: var(--mlx-text-muted);
    background: var(--mlx-bg);
    border: 1px dashed var(--mlx-border);
    border-radius: var(--mlx-radius);
}

/* ── Pastilles d'état partagées ──────────────────────────── */
.mlx-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

.mlx-badge--success { background: rgba(0, 163, 42, .12);  color: var(--mlx-success); }
.mlx-badge--danger  { background: rgba(214, 54, 56, .12); color: var(--mlx-danger); }
.mlx-badge--muted   { background: var(--mlx-bg);          color: var(--mlx-text-muted); }

/* ── Panneau / carte génériques côté public ──────────────── */
.mlx-panel {
    background: var(--mlx-card);
    border: 1px solid var(--mlx-border);
    border-radius: var(--mlx-radius);
    padding: 16px;
    margin-bottom: 16px;
}

/* ── Utilitaires (remplacent les styles en ligne) ────────────
   Petites classes d'usage courant pour que le PHP n'émette
   plus de style="…" décoratif impossible à surcharger. */
.mlx-text-center { text-align: center; }
.mlx-text-right  { text-align: right; }
.mlx-muted       { color: var(--mlx-text-muted); }
.mlx-success-text{ color: var(--mlx-success); }
.mlx-danger-text { color: var(--mlx-danger); }
.mlx-nowrap      { white-space: nowrap; }
.mlx-break       { word-break: break-word; }
.mlx-prewrap     { white-space: pre-wrap; font-size: 13px; }
.mlx-meta        { white-space: nowrap; color: var(--mlx-text-muted); font-size: 12px; }
.mlx-note        { margin-bottom: 15px; font-style: italic; }
.mlx-bg-soft     { background-color: var(--mlx-bg); }
.mlx-mt-0  { margin-top: 0; }
.mlx-mt-8  { margin-top: 8px; }
.mlx-mt-12 { margin-top: 12px; }
.mlx-mt-15 { margin-top: 15px; }
.mlx-mt-16 { margin-top: 16px; }
.mlx-mt-20 { margin-top: 20px; }
.mlx-mt-30 { margin-top: 30px; }
.mlx-ml-4  { margin-left: 4px; }
.mlx-ml-8  { margin-left: 8px; }
.mlx-mb-15 { margin-bottom: 15px; }

/* Pastille "cours assigné" (vue directeur du portail professeur) */
.mlx-class-chip {
    display: inline-block;
    background: var(--mlx-primary-light);
    color: var(--mlx-primary-dark);
    border-radius: 3px;
    padding: 1px 7px;
    margin: 2px;
    font-size: 12px;
}