/* ============================================================================
   SKOLMAN UI — couche de composants premium (chargée APRÈS app.css)
   Visuel uniquement. Ne modifie ni structure de page AdminLTE, ni logique,
   ni identifiants/hooks JS. Réutilise les tokens de tokens.css et d'app.css.
   ========================================================================= */

/* ── Socle ─────────────────────────────────────────────────────────────── */
body { font-family: var(--sk-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, .btn, .nav-link, .form-control, .form-select) { transition:
  background-color var(--sk-t-fast) var(--sk-ease), border-color var(--sk-t-fast) var(--sk-ease),
  color var(--sk-t-fast) var(--sk-ease), box-shadow var(--sk-t-fast) var(--sk-ease); }
:where(a, button, .btn, .form-control, .form-select, .nav-link, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--sk-focus-ring); }

/* ── Cartes ────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-md);
  box-shadow: var(--sk-shadow-sm);
  background: var(--sk-surface);
}
.card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--sk-border);
  font-weight: var(--sk-fw-semibold);
  color: var(--sk-text);
  padding: var(--sk-space-4) var(--sk-space-5);
}
.card > .card-body { padding: var(--sk-space-5); }
.sk-card-hover { transition: box-shadow var(--sk-t-base) var(--sk-ease), transform var(--sk-t-base) var(--sk-ease); }
.sk-card-hover:hover { box-shadow: var(--sk-shadow-md); transform: translateY(-2px); }

/* ── Boutons — hiérarchie (§57) ────────────────────────────────────────── */
.btn { border-radius: var(--sk-radius-sm); font-weight: var(--sk-fw-medium); font-size: var(--sk-fs-body);
  padding: .5rem .95rem; display: inline-flex; align-items: center; gap: .45rem; line-height: 1.2; }
.btn-primary { background: var(--sk-navy); border-color: var(--sk-navy); color: #fff; }
.btn-primary:hover { background: #142d47; border-color: #142d47; }
.btn-gold { background: var(--sk-gold); border-color: var(--sk-gold); color: var(--sk-dark); font-weight: var(--sk-fw-semibold); }
.btn-gold:hover { background: var(--sk-gold-dark); border-color: var(--sk-gold-dark); color: var(--sk-dark); }
.btn-outline-secondary { border-color: var(--sk-border); color: var(--sk-text); background: var(--sk-surface); }
.btn-outline-secondary:hover { background: var(--sk-bg); border-color: #cbd5e1; color: var(--sk-text); }
.sk-btn-ghost { background: transparent; border: 1px solid transparent; color: var(--sk-muted); border-radius: var(--sk-radius-sm);
  padding: .4rem .6rem; display: inline-flex; align-items: center; gap: .4rem; }
.sk-btn-ghost:hover { background: var(--sk-muted-soft); color: var(--sk-text); }
.btn-danger { background: var(--sk-danger); border-color: var(--sk-danger); }
.btn-icon { padding: .45rem; width: 2.1rem; height: 2.1rem; justify-content: center; }

/* ── Badges de statut (§63) ────────────────────────────────────────────── */
.sk-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--sk-fs-caption);
  font-weight: var(--sk-fw-semibold); padding: .22rem .6rem; border-radius: var(--sk-radius-pill); line-height: 1.4; }
.sk-badge::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.sk-badge--success { background: var(--sk-success-soft); color: #0a7a55; }
.sk-badge--danger  { background: var(--sk-danger-soft);  color: #b42318; }
.sk-badge--warning { background: var(--sk-warning-soft);  color: #b45309; }
.sk-badge--info    { background: var(--sk-info-soft);     color: #0369a1; }
.sk-badge--neutral { background: var(--sk-muted-soft);    color: var(--sk-muted); }
.sk-badge--primary { background: var(--sk-primary-soft);  color: var(--sk-navy); }
.sk-badge--gold    { background: var(--sk-gold-soft);     color: var(--sk-gold-dark); }
.sk-badge--plain::before { display: none; }

/* ── En-tête de page (§34) ─────────────────────────────────────────────── */
.sk-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--sk-space-4); margin-bottom: var(--sk-space-5); }
.sk-page-header__titles { min-width: 0; }
.sk-page-header__title { font-size: var(--sk-fs-h3); font-weight: var(--sk-fw-black); color: var(--sk-dark);
  margin: 0; line-height: 1.15; letter-spacing: -.01em; }
.sk-page-header__desc { color: var(--sk-muted); font-size: var(--sk-fs-body); margin: .25rem 0 0; }
.sk-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-space-2); }
.sk-breadcrumb { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; list-style: none; padding: 0;
  margin: 0 0 .35rem; font-size: var(--sk-fs-caption); color: var(--sk-muted); }
.sk-breadcrumb a { color: var(--sk-muted); text-decoration: none; }
.sk-breadcrumb a:hover { color: var(--sk-navy); }
.sk-breadcrumb li::after { content: "›"; margin-inline-start: .35rem; color: #cbd5e1; }
.sk-breadcrumb li:last-child::after { content: ""; }
.sk-breadcrumb li:last-child { color: var(--sk-text); font-weight: var(--sk-fw-medium); }

/* ── Carte KPI (§8, §52) ───────────────────────────────────────────────── */
.sk-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sk-space-4); }
.sk-stat { display: flex; align-items: center; gap: var(--sk-space-4); padding: var(--sk-space-5);
  background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-md);
  box-shadow: var(--sk-shadow-sm); }
.sk-stat__icon { flex: none; width: 3rem; height: 3rem; border-radius: var(--sk-radius-md);
  display: grid; place-items: center; font-size: 1.35rem; }
.sk-stat__icon--primary { background: var(--sk-primary-soft); color: var(--sk-navy); }
.sk-stat__icon--gold    { background: var(--sk-gold-soft);    color: var(--sk-gold-dark); }
.sk-stat__icon--success { background: var(--sk-success-soft); color: #0a7a55; }
.sk-stat__icon--danger  { background: var(--sk-danger-soft);  color: #b42318; }
.sk-stat__icon--info    { background: var(--sk-info-soft);    color: #0369a1; }
.sk-stat__icon--warning { background: var(--sk-warning-soft); color: #b45309; }
.sk-stat__body { min-width: 0; }
.sk-stat__value { font-size: var(--sk-fs-h3); font-weight: var(--sk-fw-black); color: var(--sk-dark);
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.sk-stat__label { font-size: var(--sk-fs-caption); color: var(--sk-muted); text-transform: uppercase;
  letter-spacing: .04em; font-weight: var(--sk-fw-semibold); margin-top: .15rem; }
.sk-stat__trend { display: inline-flex; align-items: center; gap: .2rem; font-size: var(--sk-fs-caption);
  font-weight: var(--sk-fw-semibold); margin-top: .3rem; }
.sk-stat__trend--up { color: #0a7a55; } .sk-stat__trend--down { color: #b42318; }

/* ── Tableaux (§28) ────────────────────────────────────────────────────── */
.table { --bs-table-hover-bg: var(--sk-bg); margin-bottom: 0; }
.table > thead th { text-transform: uppercase; font-size: var(--sk-fs-caption); letter-spacing: .04em;
  color: var(--sk-muted); font-weight: var(--sk-fw-semibold); border-bottom: 1px solid var(--sk-border);
  padding: var(--sk-space-3) var(--sk-space-4); white-space: nowrap; }
.table > tbody td { padding: var(--sk-space-3) var(--sk-space-4); vertical-align: middle;
  border-bottom: 1px solid var(--sk-border); color: var(--sk-text); font-size: var(--sk-fs-body); }
.table > tbody tr:last-child td { border-bottom: 0; }
.sk-table-card { border: 1px solid var(--sk-border); border-radius: var(--sk-radius-md); overflow: hidden;
  box-shadow: var(--sk-shadow-sm); background: var(--sk-surface); }
.sk-table-scroll { overflow-x: auto; }
.sk-table-sticky > thead th { position: sticky; top: 0; background: var(--sk-surface); z-index: 1; }

/* ── Menu d'actions de ligne (§29) ─────────────────────────────────────── */
.sk-actions { display: inline-flex; align-items: center; gap: .25rem; }
.sk-actions .dropdown-menu { border: 1px solid var(--sk-border); border-radius: var(--sk-radius-md);
  box-shadow: var(--sk-shadow-md); padding: .35rem; min-width: 11rem; }
.sk-actions .dropdown-item { border-radius: var(--sk-radius-sm); font-size: var(--sk-fs-body); padding: .5rem .7rem;
  display: flex; align-items: center; gap: .55rem; }
.sk-actions .dropdown-item.text-danger:hover { background: var(--sk-danger-soft); }

/* ── Barre d'outils & filtres (§21-25) ─────────────────────────────────── */
.sk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-space-2);
  margin-bottom: var(--sk-space-4); }
.sk-toolbar__search { position: relative; flex: 1 1 16rem; min-width: 12rem; }
.sk-toolbar__search .bi-search { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--sk-muted); pointer-events: none; }
.sk-toolbar__search input { padding-inline-start: 2.25rem; }
.sk-toolbar__spacer { flex: 1 1 auto; }
.sk-filter-count { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem;
  border-radius: var(--sk-radius-pill); background: var(--sk-gold); color: var(--sk-dark);
  font-size: .7rem; font-weight: var(--sk-fw-bold); margin-inline-start: .35rem; }
.sk-filter-panel { min-width: 20rem; padding: var(--sk-space-4); border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-md); box-shadow: var(--sk-shadow-md); }
.sk-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--sk-space-4); }
.sk-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--sk-primary-soft);
  color: var(--sk-navy); border-radius: var(--sk-radius-pill); font-size: var(--sk-fs-caption);
  font-weight: var(--sk-fw-semibold); padding: .25rem .35rem .25rem .7rem; }
.sk-chip a { color: inherit; opacity: .7; text-decoration: none; display: inline-grid; place-items: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; }
.sk-chip a:hover { opacity: 1; background: rgba(26,58,92,.12); }

/* ── État vide (§58) ───────────────────────────────────────────────────── */
.sk-empty { text-align: center; padding: var(--sk-space-12) var(--sk-space-6); color: var(--sk-muted); }
.sk-empty__icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--sk-bg);
  display: inline-grid; place-items: center; font-size: 1.5rem; color: var(--sk-muted); margin-bottom: var(--sk-space-3); }
.sk-empty__title { color: var(--sk-text); font-weight: var(--sk-fw-semibold); font-size: var(--sk-fs-h6); margin: 0 0 .25rem; }
.sk-empty__desc { font-size: var(--sk-fs-body); margin: 0 0 var(--sk-space-4); }

/* ── Formulaires (§16-19) ──────────────────────────────────────────────── */
.form-label { font-size: var(--sk-fs-label); font-weight: var(--sk-fw-semibold); color: var(--sk-text); margin-bottom: .3rem; }
.form-control, .form-select { border-radius: var(--sk-radius-sm); border-color: var(--sk-border);
  font-size: var(--sk-fs-body); color: var(--sk-text); }
.form-control:focus, .form-select:focus { border-color: var(--sk-blue); box-shadow: var(--sk-focus-ring); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--sk-danger); }
.invalid-feedback { font-size: var(--sk-fs-caption); }
.sk-form-section { margin-bottom: var(--sk-space-6); }
.sk-form-section__title { font-size: var(--sk-fs-h6); font-weight: var(--sk-fw-semibold); color: var(--sk-dark);
  padding-bottom: var(--sk-space-2); margin-bottom: var(--sk-space-4); border-bottom: 1px solid var(--sk-border); }
.sk-form-section__desc { color: var(--sk-muted); font-size: var(--sk-fs-caption); margin: -.5rem 0 var(--sk-space-4); }

/* ── Toasts (Django messages, §40/§95) ─────────────────────────────────── */
.sk-toasts { position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: var(--sk-z-toast);
  display: flex; flex-direction: column; gap: .6rem; max-width: min(92vw, 24rem); }
.sk-toast { display: flex; align-items: flex-start; gap: .65rem; background: var(--sk-surface);
  border: 1px solid var(--sk-border); border-inline-start: 4px solid var(--sk-muted);
  border-radius: var(--sk-radius-md); box-shadow: var(--sk-shadow-lg); padding: .8rem 1rem;
  font-size: var(--sk-fs-body); animation: sk-toast-in var(--sk-t-slow) var(--sk-ease); }
.sk-toast--success { border-inline-start-color: var(--sk-success); }
.sk-toast--danger, .sk-toast--error { border-inline-start-color: var(--sk-danger); }
.sk-toast--warning { border-inline-start-color: var(--sk-warning); }
.sk-toast--info { border-inline-start-color: var(--sk-info); }
.sk-toast__icon { flex: none; font-size: 1.1rem; margin-top: .05rem; }
.sk-toast--success .sk-toast__icon { color: var(--sk-success); }
.sk-toast--danger .sk-toast__icon, .sk-toast--error .sk-toast__icon { color: var(--sk-danger); }
.sk-toast--warning .sk-toast__icon { color: var(--sk-warning); }
.sk-toast--info .sk-toast__icon { color: var(--sk-info); }
.sk-toast__close { margin-inline-start: auto; background: none; border: 0; color: var(--sk-muted); cursor: pointer; }
@keyframes sk-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Modales (§38) ─────────────────────────────────────────────────────── */
.modal-content { border: 0; border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--sk-border); padding: var(--sk-space-4) var(--sk-space-5); }
.modal-title { font-weight: var(--sk-fw-bold); color: var(--sk-dark); }
.modal-footer { border-top: 1px solid var(--sk-border); padding: var(--sk-space-4) var(--sk-space-5); }

/* ── Chargement / anti double-clic (§41-42) ────────────────────────────── */
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading .sk-spinner { display: inline-block; }
.sk-spinner { display: none; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: sk-spin .6s linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* ── Réduction d'animation (accessibilité) ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── Zone d'accueil du dashboard (§8) ──────────────────────────────────── */
.sk-welcome { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-4);
  margin-bottom: var(--sk-space-5); }
.sk-welcome__title { font-size: var(--sk-fs-h3); font-weight: var(--sk-fw-black); color: var(--sk-dark);
  margin: 0; line-height: 1.15; letter-spacing: -.01em; }
.sk-welcome__sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--sk-muted);
  font-size: var(--sk-fs-body); margin: .3rem 0 0; text-transform: capitalize; }
.sk-welcome__dot { color: #cbd5e1; }
.sk-welcome__logo { height: 44px; width: auto; border-radius: var(--sk-radius-sm); flex: none; }
@media (max-width: 575.98px) { .sk-welcome__logo { display: none; } .sk-welcome__title { font-size: var(--sk-fs-h4); } }

/* ── Pagination premium (§32) — cascade sur les 81 listes inline ────────── */
.pagination { gap: .25rem; }
.pagination .page-link { border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm);
  color: var(--sk-text); font-size: var(--sk-fs-body); font-weight: var(--sk-fw-medium);
  min-width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .5rem; }
.pagination .page-link:hover { background: var(--sk-bg); border-color: #cbd5e1; color: var(--sk-navy); }
.pagination .page-item.active .page-link { background: var(--sk-navy); border-color: var(--sk-navy); color: #fff;
  box-shadow: var(--sk-shadow-xs); }
.pagination .page-item.disabled .page-link { color: var(--sk-muted); opacity: .5; }
.pagination .page-link:focus-visible { box-shadow: var(--sk-focus-ring); z-index: 1; }

/* ── Conteneur de liste : carte + table sans double bordure ─────────────── */
.card > .table-responsive { border-radius: inherit; }
.card > .table-responsive > .table { margin-bottom: 0; }
.card > .table-responsive > .table > thead th:first-child,
.card > .table > thead th:first-child { padding-inline-start: var(--sk-space-5); }
.card > .table-responsive > .table > tbody td:first-child,
.card > .table > tbody td:first-child { padding-inline-start: var(--sk-space-5); }
.card > .table-responsive > .table > thead th:last-child,
.card > .table > thead th:last-child { padding-inline-end: var(--sk-space-5); }
.card > .table-responsive > .table > tbody td:last-child,
.card > .table > tbody td:last-child { padding-inline-end: var(--sk-space-5); }

/* Compteur de résultats (en-tête de liste) */
.sk-result-count { font-size: var(--sk-fs-caption); color: var(--sk-muted); font-weight: var(--sk-fw-medium); }

/* Boutons d'action de ligne existants (.sk-btn-action) — variante « ⋮ » cohérente */
.sk-btn-action.more { background: transparent; border-color: transparent; }
.sk-btn-action.more:hover { background: var(--sk-muted-soft); color: var(--sk-navy); border-color: transparent; }