/* ============================================================================
   Design system Skillopolis — publie depuis src/styles/components.css.
   Version 4. Ne pas editer ce fichier directement : republier via
   scripts/publish-design-system.mjs dans le depot skillopolis.
   ============================================================================ */
/* ============================================================================
   Bibliotheque de composants partagee.

   Nommage repris tel quel d'ecole-api (`.card`, `.btn-primary`, `.badge-success`,
   `.modal-header`…) : le balisage des ecrans ecole existants peut etre colle ici
   sans retouche. Les composants issus du HUD d'ItCity suivent la meme convention.

   Aucun `display:grid` (convention projet) — flexbox uniquement.
   ========================================================================= */

/* --- Carte --------------------------------------------------------------- */

.card {
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    box-shadow: var(--ui-shadow);
    backdrop-filter: var(--ui-backdrop);
    -webkit-backdrop-filter: var(--ui-backdrop);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--ui-border);
}

.card-title { font-size: var(--text-title); font-weight: 700; margin: 0; }
.card-subtitle { font-size: var(--text-meta); color: var(--ui-fg-muted); margin: 2px 0 0; }
.card-title .card-subtitle { margin-left: var(--space-2); }
.card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* --- Bouton -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-body);
    font-weight: 600;
    border: 1px solid transparent;
    background: none;
    color: var(--ui-fg);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.btn-primary { background: var(--ui-accent); color: var(--ui-accent-fg); }
.btn-primary:hover:not(:disabled) { background: var(--ui-accent-hover); }

.btn-secondary { background: var(--ui-bg); border-color: var(--ui-border-strong); color: var(--ui-fg); }
.btn-secondary:hover:not(:disabled) { background: var(--ui-hover); }

.btn-ghost { color: var(--ui-fg-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--ui-hover); color: var(--ui-fg); }

.btn-danger { background: var(--status-danger-bg); color: var(--status-danger); }
.btn-danger:hover:not(:disabled) { background: var(--status-danger); color: var(--white); }

.btn-sm { padding: 6px 10px; font-size: var(--text-meta); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Badge --------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    font-size: var(--text-eyebrow);
    font-weight: 700;
    white-space: nowrap;
}

.badge-success { background: var(--status-success-bg); color: var(--status-success); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning); }
.badge-danger { background: var(--status-danger-bg); color: var(--status-danger); }
.badge-help { background: var(--status-help-bg); color: var(--status-help); }
.badge-accent { background: var(--ui-accent-soft); color: var(--ui-accent); }
.badge-neutral { background: var(--status-neutral-bg); color: var(--status-neutral); }

/* --- Interrupteur -------------------------------------------------------- */

.toggle {
    position: relative;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--ui-border-strong);
    cursor: pointer;
    transition: background var(--transition);
}

.toggle.on { background: var(--ui-accent); }
.toggle .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: left var(--transition);
}
.toggle.on .knob { left: 20px; }

/* --- Tableau de donnees -------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }

th {
    text-align: left;
    padding: 10px var(--space-5);
    font-size: var(--text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-fg-muted);
    background: var(--ui-bg-subtle);
    border-bottom: 1px solid var(--ui-border);
}

td {
    padding: 13px var(--space-5);
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-fg);
    vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

.name-cell { display: flex; flex-direction: column; gap: 2px; }
.name-cell .email { font-size: 11.5px; color: var(--ui-fg-muted); }

/* --- Modale -------------------------------------------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 19, 26, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

/* `.modal-overlay` impose `display:flex`, qui l'emporte sur le `display:none`
   de la feuille de l'agent : sans cette regle, `hidden` n'a aucun effet. */
.modal-overlay[hidden] { display: none; }

.modal {
    width: min(520px, 92vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--ui-shadow);
    backdrop-filter: var(--ui-backdrop);
    -webkit-backdrop-filter: var(--ui-backdrop);
    animation: ui-pop-in 180ms ease-out;
}
.modal-lg { width: min(900px, 94vw); }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 18px 22px;
    border-bottom: 1px solid var(--ui-border);
    flex-shrink: 0;
}

.modal-title { font-size: var(--text-title); font-weight: 700; margin: 0; }
.modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; }
.modal-footer {
    padding: var(--space-4) 22px;
    border-top: 1px solid var(--ui-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ui-fg-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.close-btn:hover { background: var(--ui-hover); color: var(--ui-fg); }

/* --- Formulaire ---------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--text-meta); font-weight: 600; color: var(--ui-fg-muted); }

.field input,
.field select,
.field textarea {
    padding: 8px 10px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-sm);
    background: var(--ui-bg);
    color: var(--ui-fg);
    font-family: inherit;
    font-size: var(--text-body);
}

.field textarea { resize: vertical; }
.field-row { display: flex; gap: var(--space-3); }
.field-row .field { flex: 1; min-width: 0; }

/* --- Selecteur segmente et etiquettes ------------------------------------ */

.pill-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pill {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-bg);
    color: var(--ui-fg-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.pill.selected { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-fg); }
.pill:disabled { opacity: 0.5; cursor: not-allowed; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--ui-bg-subtle);
    border: 1px solid var(--ui-border);
    font-size: var(--text-label);
    color: var(--ui-fg-muted);
}

/* --- Bandeaux et vides --------------------------------------------------- */

.banner { padding: 10px var(--space-4); border-radius: var(--radius-md); font-size: var(--text-body); display: none; }
.banner.visible { display: block; }
.banner-error { background: var(--status-danger-bg); color: var(--status-danger); }
.banner-success { background: var(--status-success-bg); color: var(--status-success); }
.banner-warning { background: var(--status-warning-bg); color: var(--status-warning); }
.banner-info { background: var(--ui-accent-soft); color: var(--ui-accent); }

.empty-state { padding: 40px var(--space-5); text-align: center; color: var(--ui-fg-muted); font-size: var(--text-body); }

/* --- Mise en page de page (ecrans ecole) --------------------------------- */

.page { flex: 1; min-width: 0; padding: var(--space-6) 40px; display: flex; flex-direction: column; gap: var(--space-5); }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.page-title-group { display: flex; flex-direction: column; gap: var(--space-1); }
.page-title { font-size: var(--text-page-title); font-weight: 700; margin: 0; }
.page-subtitle { font-size: var(--text-body); color: var(--ui-fg-muted); margin: 0; }

/* --- Liste CRUD : barre d'outils, tri, pagination, actions de ligne ------ */

.dt-controls { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dt-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dt-toolbar svg { color: var(--ui-fg-faint); }
.dt-toolbar input {
    padding: 7px 10px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-sm);
    background: var(--ui-bg);
    color: var(--ui-fg);
    font-family: inherit;
    font-size: var(--text-body);
    width: 230px;
}
.dt-select {
    padding: 7px 8px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-sm);
    background: var(--ui-bg);
    color: var(--ui-fg);
    font-family: inherit;
    font-size: var(--text-meta);
}
th.dt-sortable { cursor: pointer; user-select: none; white-space: nowrap; vertical-align: middle; }
th.dt-sortable:hover { color: var(--ui-accent); }
th.dt-sortable i { font-size: 10px; color: var(--ui-fg-faint); margin-left: 4px; }
.dt-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--ui-border); }
.dt-footer .meta { font-size: var(--text-meta); color: var(--ui-fg-muted); }
.dt-empty-state {
    padding: 40px var(--space-5);
    text-align: center;
    color: var(--ui-fg-muted);
    font-size: var(--text-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.dt-empty-state i { font-size: 28px; color: var(--ui-fg-faint); }
.dt-empty-state p { margin: 0; }

.pagination { display: flex; gap: 4px; }
.page-ellipsis { align-self: center; padding: 0 4px; color: var(--ui-fg-muted); }
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-sm);
    background: var(--ui-bg);
    color: var(--ui-fg-muted);
    font-family: inherit;
    font-size: var(--text-meta);
    font-weight: 600;
    cursor: pointer;
}
.page-btn:hover:not(:disabled) { background: var(--ui-hover); color: var(--ui-fg); }
.page-btn.selected { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-fg); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.row-actions { display: flex; gap: 4px; }
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    color: var(--ui-fg-muted);
    padding: 0;
}
.icon-btn:hover { background: var(--ui-hover); color: var(--ui-fg); }
.icon-btn.edit:hover { color: var(--ui-accent); }
.icon-btn.warn:hover { color: var(--status-warning); }
.icon-btn.danger:hover { color: var(--status-danger); }
.icon-btn.ok { color: var(--ui-accent); }
.icon-btn.ok:hover { color: var(--ui-accent); background: var(--ui-hover); }
.icon-btn.off { opacity: 0.5; }
.icon-btn.off:hover { opacity: 1; color: var(--ui-fg); }

/* --- Onglets : traitement unique souligne --------------------------------- */

.tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--ui-border); }
.tab {
    padding: 9px 2px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ui-fg-muted);
    font-family: inherit;
    font-size: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: -1px;
}
.tab:hover { color: var(--ui-fg); }
.tab.selected { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }

/* --- Tuiles de statistiques (dashboards) ---------------------------------- */

.stat-tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stat-tile {
    flex: 1 1 0;
    min-width: 150px;
    padding: 14px 12px;
    text-align: center;
    border-radius: var(--radius-sm);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
}
.stat-tile .n { font-size: 24px; font-weight: 800; line-height: 1.05; }
.stat-tile .k {
    margin-top: 6px;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-fg-muted);
}
.stat-tile .s { margin-top: 3px; font-size: 11px; color: var(--ui-fg-muted); }
.stat-tile.is-success .n { color: var(--status-success); }
.stat-tile.is-warning .n { color: var(--status-warning); }
.stat-tile.is-danger .n { color: var(--status-danger); }
a.stat-tile { text-decoration: none; color: inherit; transition: border-color var(--transition); }
a.stat-tile:hover { border-color: var(--ui-accent); }

/* --- Champs : etat focus (manquait, ajoute pour l'accessibilite) --------- */

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.field input[type=color] { width: 56px; padding: 2px 3px; cursor: pointer; }
.field-hint { font-size: var(--text-meta); color: var(--ui-fg-muted); }

/* --- Case a cocher inline (remplace form-check/form-switch Bootstrap) ---- */

.check-field { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: var(--text-body); font-weight: 600; color: var(--ui-fg); cursor: pointer; }
.check-field input { width: 16px; height: 16px; accent-color: var(--ui-accent); }

/* --- Ligne d'edition de liste (options, listes d'objectifs...) ---------- */

.opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.opt-row .opt-idx { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 11px; font-weight: 700; }
.opt-row .opt-val { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--ui-border-strong); border-radius: var(--radius-sm); background: var(--ui-bg); color: var(--ui-fg); font-family: inherit; font-size: var(--text-body); }
.opt-row .icon-btn { flex: none; }

.mono-ta { font-family: var(--font-mono); font-size: 12.5px; }

/* --- Etat de chargement (remplace text-center + p-5 Bootstrap) ----------- */

.loading-state { padding: 28px; text-align: center; }

/* --- Texte de statut (remplace text-success/text-danger/... Bootstrap) --- */

.text-success { color: var(--status-success); }
.text-warning { color: var(--status-warning); }
.text-danger { color: var(--status-danger); }
.fw-bold { font-weight: 700; }

/* --- Indicateur de chargement circulaire (remplace .spinner-border Bootstrap) --- */
/* Reprend le nom Bootstrap : purement un identifiant desormais. */

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

.spinner-border {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ui-border-strong);
    border-top-color: var(--ui-accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    vertical-align: -4px;
}
.spinner-border-sm { width: 14px; height: 14px; vertical-align: -2px; border-width: 2px; }

/* --- Bug Reports View : classes spécifiques (ajoutées pour T6.3) ---------- */

/* Email dans la table : monospace pour lisibilité */
.email-code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ui-fg-muted); }

/* Cellule de message dans la table : truncate avec ellipsis */
.msg-cell { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Contrôles de pagination : centre et espacement */
.pagination-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; }

/* Détails du contexte technique : styling pour l'accordéon */
.context-details { margin: 8px 0; }
.context-details summary { cursor: pointer; color: var(--ui-accent); font-weight: 600; user-select: none; }
/* --ui-accent-hover et non --ui-accent-soft : ce dernier est un token de FOND
   (quasi-blanc en thème clair, 18 % d'opacité en sombre), le libellé
   disparaîtrait au survol. Même motif que a:hover (base.css). */
.context-details summary:hover { color: var(--ui-accent-hover); }

/* Visualiseur du contexte : background contraste pour le JSON.
   --ui-bg-sunken et non --ui-bg-overlay : ce dernier n'est défini dans aucun
   thème, la déclaration serait invalide et le fond retomberait à transparent. */
.context-viewer { background: var(--ui-bg-sunken); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--ui-border); margin-top: 8px; }
.context-viewer pre { font-size: 12px; line-height: 1.4; color: var(--ui-fg-muted); margin: 0; overflow-x: auto; }

/* Conteneur de capture : flexbox centré pour l'image */
.screenshot-container { display: flex; justify-content: center; align-items: center; margin: 12px 0; }

/* Image de capture : dimensionnée responsif sans débordement */
.screenshot-img { max-width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--ui-shadow); }

/* Bloc de code : affiche le texte libre du joueur avec retours à la ligne */
.code-block { background: var(--ui-bg-sunken); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--ui-border); white-space: pre-wrap; word-wrap: break-word; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ui-fg); }