/* =============================================================================
   MONEXA — Design System (v1)
   Couche de thème ADDITIVE, chargée APRÈS bootstrap.min.css / app.min.css.
   Dérivée du logo (azur → cyan). Bi-thème : clair (primaire) + sombre.
   Stratégie : tokens namespacés --mnx-* → pontés sur les variables Bootstrap 5.3
   (--bs-*), puis quelques overrides de composants ciblés. Non destructif :
   se retire en enlevant le <link> dans base.html.
   ========================================================================== */

/* ------------------------------------------------------------- FONT (locale) */
@font-face{
  font-family:"Clash Display";
  src:url("../fonts/ClashDisplay-Variable.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:swap;
}

/* ================================================================= TOKENS */
:root{
  /* Marque — extraite du logo Monexa */
  --mnx-azure-50:#EAF3FF; --mnx-azure-100:#D3E6FF; --mnx-azure-200:#A9CCFF;
  --mnx-azure-300:#6FA9FF; --mnx-azure-400:#2E90FC; --mnx-azure-500:#0A80FC;
  --mnx-azure-600:#0763E0; --mnx-azure-700:#064FBB; --mnx-azure-800:#083F92; --mnx-azure-900:#0A2F66;
  --mnx-cyan-300:#5EE4FD; --mnx-cyan-400:#2ED9FC; --mnx-cyan-500:#12BEEC;

  --mnx-brand:var(--mnx-azure-500);
  --mnx-brand-rgb:10,128,252;
  --mnx-grad:linear-gradient(118deg,#0763E0 0%,#0A80FC 42%,#2ED9FC 100%);
  --mnx-grad-soft:linear-gradient(118deg,rgba(10,128,252,.14),rgba(46,217,252,.10));

  /* Sémantique (distincte de l'accent) */
  --mnx-success:#12B886; --mnx-success-rgb:18,184,134;
  --mnx-warning:#E8930C; --mnx-warning-rgb:232,147,12;
  --mnx-danger:#EE384B;  --mnx-danger-rgb:238,56,75;
  --mnx-info:#12BEEC;    --mnx-info-rgb:18,190,236;

  /* Neutres froids (biais bleu léger) — thème CLAIR */
  --mnx-bg:#F1F5FB;
  --mnx-surface:#FFFFFF;
  --mnx-surface-2:#F6F9FE;
  --mnx-surface-3:#EDF2FA;
  --mnx-border:#E1E9F3;
  --mnx-border-strong:#CDD9E8;
  --mnx-ink:#0E1726;
  --mnx-ink-2:#33435B;
  --mnx-muted:#657590;
  --mnx-faint:#93A2B8;
  --mnx-ring:rgba(10,128,252,.32);
  --mnx-shadow-1:0 1px 2px rgba(16,30,54,.06),0 1px 3px rgba(16,30,54,.05);
  --mnx-shadow-2:0 4px 12px rgba(16,30,54,.08),0 2px 4px rgba(16,30,54,.05);
  --mnx-shadow-3:0 18px 40px rgba(13,40,84,.14);

  /* Type */
  --mnx-display:"Clash Display",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mnx-body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---- Pont vers Bootstrap 5.3 (thème clair) ---- */
  --bs-primary:var(--mnx-azure-500);
  --bs-primary-rgb:var(--mnx-brand-rgb);
  --bs-primary-text-emphasis:var(--mnx-azure-700);
  --bs-primary-bg-subtle:var(--mnx-azure-50);
  --bs-primary-border-subtle:var(--mnx-azure-200);

  --bs-link-color:var(--mnx-azure-600);
  --bs-link-color-rgb:7,99,224;
  --bs-link-hover-color:var(--mnx-azure-700);
  --bs-link-hover-color-rgb:6,79,187;

  --bs-success:var(--mnx-success); --bs-success-rgb:var(--mnx-success-rgb);
  --bs-warning:var(--mnx-warning); --bs-warning-rgb:var(--mnx-warning-rgb);
  --bs-danger:var(--mnx-danger);   --bs-danger-rgb:var(--mnx-danger-rgb);
  --bs-info:var(--mnx-info);       --bs-info-rgb:var(--mnx-info-rgb);

  --bs-body-bg:var(--mnx-bg);
  --bs-body-color:var(--mnx-ink-2);
  --bs-body-color-rgb:51,67,91;
  --bs-emphasis-color:var(--mnx-ink);
  --bs-heading-color:var(--mnx-ink);
  --bs-secondary-bg:var(--mnx-surface-2);
  --bs-tertiary-bg:var(--mnx-surface-3);
  --bs-border-color:var(--mnx-border);
  --bs-border-color-translucent:var(--mnx-border);

  --bs-border-radius:.6rem;
  --bs-border-radius-sm:.45rem;
  --bs-border-radius-lg:.9rem;
  --bs-border-radius-xl:1.15rem;
  --bs-border-radius-pill:999px;

  --bs-body-font-family:var(--mnx-body);
  --bs-body-font-size:.875rem;  /* 14px — base du design system (Bootstrap = 16px) */

  /* Topbar / sidebar / footer du thème de base → pilotés par tokens (suivent le
     thème). Définis dans :root avec des var() thème-réactives : battent les valeurs
     du thème de base (chargé avant) par ordre de source. */
  --bs-header-bg:var(--mnx-surface);
  --bs-header-item-color:var(--mnx-ink-2);
  --bs-header-dark-bg:var(--mnx-surface);
  --bs-header-dark-item-color:var(--mnx-ink-2);
  --bs-topbar-search-bg:var(--mnx-surface-3);
  --bs-menu-item-color:var(--mnx-ink-2);
  --bs-menu-item-active-color:var(--mnx-azure-600);
  --bs-footer-bg:var(--mnx-surface);
  --bs-footer-color:var(--mnx-muted);
}

/* ================================================================= DARK */
/* Toggle actif (topbar) : pose data-bs-theme=dark sur <html> et, en ceinture-
   bretelles, data-layout-mode/data-sidebar=dark sur <body> (composants du thème
   de base non tokenisés). Les deux voies basculent les tokens ci-dessous. */
[data-bs-theme="dark"],
body[data-layout-mode="dark"]{
  --mnx-bg:#0A0E17;
  --mnx-surface:#111725;
  --mnx-surface-2:#161E30;
  --mnx-surface-3:#1E2942;
  --mnx-border:rgba(255,255,255,.09);
  --mnx-border-strong:rgba(255,255,255,.17);
  --mnx-ink:#E7EEF7;
  --mnx-ink-2:#B7C4D8;
  --mnx-muted:#8494AC;
  --mnx-faint:#5D6C85;
  --mnx-ring:rgba(46,217,252,.42);
  --mnx-shadow-1:0 1px 2px rgba(0,0,0,.5);
  --mnx-shadow-2:0 6px 20px rgba(0,0,0,.55);
  --mnx-shadow-3:0 22px 55px rgba(0,0,0,.62);
  --mnx-grad-soft:linear-gradient(118deg,rgba(10,128,252,.26),rgba(46,217,252,.14));

  --bs-primary-text-emphasis:#89B7FF;
  --bs-primary-bg-subtle:rgba(10,128,252,.18);
  --bs-primary-border-subtle:rgba(127,180,255,.42);
  --bs-body-bg:var(--mnx-bg);
  --bs-body-color:var(--mnx-ink-2);
  --bs-emphasis-color:var(--mnx-ink);
  --bs-heading-color:var(--mnx-ink);
  --bs-secondary-bg:var(--mnx-surface-2);
  --bs-tertiary-bg:var(--mnx-surface-3);
  --bs-border-color:var(--mnx-border);
  --bs-border-color-translucent:var(--mnx-border);
}

/* ================================================================= TYPO */
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,
.card-title,.card-header h4,.card-header h5{
  font-family:var(--mnx-display);
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--mnx-ink);
}
.text-uppercase{letter-spacing:.06em;}
/* Gras adouci (moins prononcé) : on descend d'un cran les poids « bold ».
   fw-bold/strong/b : 700 → 600 ; fw-semibold : 600 → 500. Les titres et les
   nombres en display (h1-h5, KPI, stats, titre de page, fil d'Ariane) sont
   passés de 600 → 500 (Clash Display Medium) — moins prononcé. */
b, strong, .fw-bold{font-weight:600!important;}
.fw-semibold{font-weight:500!important;}
/* Chiffres alignés partout où ça compte (montants, soldes, KPI) */
.font-size-14,.font-size-16,.font-size-18,.font-size-20,.font-size-22,.font-size-24,
td,.card-title,.fw-bold,.fw-semibold{font-variant-numeric:tabular-nums;}

/* ================================================================= BOUTONS */
.btn{
  /* Aligné sur le design system validé : pilule, 13.5px / poids 600, padding
     9×18. Sans --bs-btn-font-size, Bootstrap imposait 16px → boutons trop
     prononcés. */
  --bs-btn-border-radius:var(--bs-border-radius-pill);
  --bs-btn-padding-y:.5625rem;   /* 9px  */
  --bs-btn-padding-x:1.125rem;   /* 18px */
  --bs-btn-font-size:.844rem;    /* 13.5px */
  --bs-btn-font-weight:600;
  font-family:var(--mnx-body);
  transition:filter .16s,transform .16s,box-shadow .16s,background-color .16s,border-color .16s,color .16s;
}
.btn-sm{--bs-btn-padding-y:.375rem;--bs-btn-padding-x:.8125rem;--bs-btn-font-size:.781rem;} /* 6×13, 12.5px */
.btn-lg{--bs-btn-padding-y:.75rem;--bs-btn-padding-x:1.5rem;--bs-btn-font-size:.9375rem;}   /* 12×24, 15px  */

.btn-primary{
  --bs-btn-bg:var(--mnx-azure-500);
  --bs-btn-border-color:var(--mnx-azure-500);
  --bs-btn-hover-bg:var(--mnx-azure-600);
  --bs-btn-hover-border-color:var(--mnx-azure-600);
  --bs-btn-active-bg:var(--mnx-azure-700);
  --bs-btn-active-border-color:var(--mnx-azure-700);
  --bs-btn-disabled-bg:var(--mnx-azure-500);
  --bs-btn-disabled-border-color:var(--mnx-azure-500);
  --bs-btn-focus-shadow-rgb:var(--mnx-brand-rgb);
  /* Aplat solide (proposition A, validée 2026-07-22) : couleur de marque PLEINE,
     sans dégradé ni halo — réponse au « bouton de validation trop prononcé ».
     Le dégradé redevient un signal fort réservé aux KPI/hero. Micro-ombre seule. */
  box-shadow:0 1px 2px rgba(10,128,252,.18);
}
.btn-primary:hover{transform:translateY(-1px);}

.btn-success{--bs-btn-bg:var(--mnx-success);--bs-btn-border-color:var(--mnx-success);--bs-btn-hover-bg:#0FA377;--bs-btn-hover-border-color:#0FA377;--bs-btn-active-bg:#0C8C66;--bs-btn-focus-shadow-rgb:var(--mnx-success-rgb);}
.btn-danger{--bs-btn-bg:var(--mnx-danger);--bs-btn-border-color:var(--mnx-danger);--bs-btn-hover-bg:#DA2A3D;--bs-btn-hover-border-color:#DA2A3D;--bs-btn-active-bg:#C21F31;--bs-btn-focus-shadow-rgb:var(--mnx-danger-rgb);}
.btn-warning{--bs-btn-bg:var(--mnx-warning);--bs-btn-border-color:var(--mnx-warning);--bs-btn-color:#fff;--bs-btn-hover-bg:#CE8009;--bs-btn-hover-border-color:#CE8009;--bs-btn-hover-color:#fff;--bs-btn-focus-shadow-rgb:var(--mnx-warning-rgb);}
.btn-info{--bs-btn-bg:var(--mnx-info);--bs-btn-border-color:var(--mnx-info);--bs-btn-color:#063845;--bs-btn-hover-bg:#0FA9D2;--bs-btn-hover-border-color:#0FA9D2;--bs-btn-focus-shadow-rgb:var(--mnx-info-rgb);}

.btn-outline-primary{--bs-btn-color:var(--mnx-azure-600);--bs-btn-border-color:var(--mnx-border-strong);--bs-btn-hover-bg:var(--mnx-azure-500);--bs-btn-hover-border-color:var(--mnx-azure-500);--bs-btn-active-bg:var(--mnx-azure-600);--bs-btn-focus-shadow-rgb:var(--mnx-brand-rgb);}
.btn-outline-success{--bs-btn-color:#0B7355;--bs-btn-border-color:var(--mnx-border-strong);--bs-btn-hover-bg:var(--mnx-success);--bs-btn-hover-border-color:var(--mnx-success);}
.btn-outline-danger{--bs-btn-color:#B01324;--bs-btn-border-color:var(--mnx-border-strong);--bs-btn-hover-bg:var(--mnx-danger);--bs-btn-hover-border-color:var(--mnx-danger);}
.btn-outline-warning{--bs-btn-color:#9A5B00;--bs-btn-border-color:var(--mnx-border-strong);--bs-btn-hover-bg:var(--mnx-warning);--bs-btn-hover-border-color:var(--mnx-warning);--bs-btn-hover-color:#fff;}
.btn-outline-secondary{--bs-btn-color:var(--mnx-ink-2);--bs-btn-border-color:var(--mnx-border-strong);--bs-btn-hover-bg:var(--mnx-surface-3);--bs-btn-hover-color:var(--mnx-ink);--bs-btn-hover-border-color:var(--mnx-border-strong);}
.btn-secondary{--bs-btn-bg:var(--mnx-surface);--bs-btn-color:var(--mnx-ink);--bs-btn-border-color:var(--mnx-border-strong);--bs-btn-hover-bg:var(--mnx-surface-3);--bs-btn-hover-color:var(--mnx-azure-600);--bs-btn-hover-border-color:var(--mnx-azure-500);}

.btn:focus-visible{outline:none;box-shadow:0 0 0 .2rem var(--mnx-ring);}

/* ================================================================= CARTES */
.card{
  --bs-card-border-radius:var(--bs-border-radius-lg);
  --bs-card-inner-border-radius:calc(var(--bs-border-radius-lg) - 1px);
  --bs-card-border-color:var(--mnx-border);
  --bs-card-bg:var(--mnx-surface);
  --bs-card-cap-bg:transparent;
  background-color:var(--mnx-surface);
  border:1px solid var(--mnx-border);
  box-shadow:var(--mnx-shadow-1);
}
.card-header{border-bottom-color:var(--mnx-border);}

/* ================================================================= TABLEAUX */
.table{
  --bs-table-bg:transparent;
  --bs-table-hover-bg:var(--mnx-surface-2);
  --bs-table-border-color:var(--mnx-border);
  color:var(--mnx-ink-2);
}
.table>thead,.table-light,.table>thead.table-light{
  --bs-table-bg:var(--mnx-surface-2);
  --bs-table-color:var(--mnx-muted);
  color:var(--mnx-muted);
}
.table>thead th,.table thead th{
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.06em;
  font-weight:600;
  color:var(--mnx-muted);
  background-color:var(--mnx-surface-2);
  border-bottom:1px solid var(--mnx-border);
  white-space:nowrap;
}
.table td{border-color:var(--mnx-border);vertical-align:middle;}

/* ================================================================= BADGES */
.badge{border-radius:var(--bs-border-radius-pill);font-weight:600;letter-spacing:.01em;padding:.35em .7em;}
.badge.bg-success{background-color:rgba(var(--mnx-success-rgb),.14)!important;color:#0B7355;}
.badge.bg-warning{background-color:rgba(var(--mnx-warning-rgb),.16)!important;color:#9A5B00;}
.badge.bg-danger{background-color:rgba(var(--mnx-danger-rgb),.14)!important;color:#B01324;}
.badge.bg-info{background-color:rgba(var(--mnx-info-rgb),.14)!important;color:#0A7A96;}
.badge.bg-primary{background-color:var(--mnx-azure-50)!important;color:var(--mnx-azure-700);}
.badge.bg-secondary,.badge.bg-light{background-color:var(--mnx-surface-3)!important;color:var(--mnx-ink-2);}
/* Le badge « IP autorisées (actif) » et autres badges solides gardent du blanc si demandé explicitement */
.badge.text-white{color:#fff!important;}

/* Teintes texte utilitaires alignées marque */
.text-primary{color:var(--mnx-azure-600)!important;}
.bg-primary{background-color:var(--mnx-azure-500)!important;}
.bg-soft-primary{background-color:var(--mnx-azure-50)!important;}

/* ================================================================= FORMULAIRES */
.form-control,.form-select{
  border-radius:var(--bs-border-radius);
  border-color:var(--mnx-border-strong);
  background-color:var(--mnx-surface-2);
  color:var(--mnx-ink);
}
.form-control::placeholder{color:var(--mnx-faint);}
.form-control:focus,.form-select:focus{
  border-color:var(--mnx-azure-500);
  background-color:var(--mnx-surface);
  box-shadow:0 0 0 .2rem var(--mnx-ring);
  color:var(--mnx-ink);
}
.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--mnx-danger);}
.form-check-input:checked{background-color:var(--mnx-azure-500);border-color:var(--mnx-azure-500);}
.form-check-input:focus{border-color:var(--mnx-azure-400);box-shadow:0 0 0 .2rem var(--mnx-ring);}
.form-switch .form-check-input:checked{background-color:var(--mnx-azure-500);}
.form-label,.form-control-label{color:var(--mnx-ink-2);font-weight:600;}

/* ================================================================= PAGINATION */
.pagination{--bs-pagination-color:var(--mnx-ink-2);--bs-pagination-border-color:var(--mnx-border);--bs-pagination-hover-color:var(--mnx-azure-600);--bs-pagination-hover-border-color:var(--mnx-azure-300);--bs-pagination-hover-bg:var(--mnx-surface-2);--bs-pagination-focus-box-shadow:0 0 0 .2rem var(--mnx-ring);--bs-pagination-active-bg:var(--mnx-azure-500);--bs-pagination-active-border-color:var(--mnx-azure-500);--bs-pagination-border-radius:var(--bs-border-radius);}
.page-item.active .page-link{background-image:var(--mnx-grad);border-color:transparent;}

/* ================================================================= ALERTES */
.alert{border-radius:var(--bs-border-radius);}
.alert-success{--bs-alert-color:#0B7355;--bs-alert-bg:rgba(var(--mnx-success-rgb),.12);--bs-alert-border-color:rgba(var(--mnx-success-rgb),.30);}
.alert-warning{--bs-alert-color:#8A5200;--bs-alert-bg:rgba(var(--mnx-warning-rgb),.13);--bs-alert-border-color:rgba(var(--mnx-warning-rgb),.30);}
.alert-danger{--bs-alert-color:#A5182A;--bs-alert-bg:rgba(var(--mnx-danger-rgb),.12);--bs-alert-border-color:rgba(var(--mnx-danger-rgb),.30);}
.alert-info{--bs-alert-color:#0A7A96;--bs-alert-bg:rgba(var(--mnx-info-rgb),.12);--bs-alert-border-color:rgba(var(--mnx-info-rgb),.30);}
.alert-secondary{--bs-alert-color:var(--mnx-ink-2);--bs-alert-bg:var(--mnx-surface-3);--bs-alert-border-color:var(--mnx-border);}

/* ================================================================= NAV / SIDEBAR */
/* Refonte du sidebar Minible (metismenu) — design Monexa. */
.vertical-menu{
  background:var(--mnx-surface);
  /* Île flottante : bordure sur les 4 côtés + coins arrondis + ombre douce.
     La géométrie (position/marges) est posée plus bas (fondation layout). */
  border:1px solid var(--mnx-border);
  border-radius:var(--bs-border-radius-xl);
  box-shadow:var(--mnx-shadow-3);
  display:flex;flex-direction:column;
}
/* La zone scrollable (SimpleBar) prend l'espace ; le bloc user reste en pied. */
.vertical-menu>[data-simplebar]{flex:1 1 auto;min-height:0;}
#sidebar-menu{padding:10px 0 6px;}

/* Catégories */
#sidebar-menu .menu-title{
  padding:16px 22px 7px;
  font-size:.66rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--mnx-faint);
}

/* Items de 1er niveau */
#sidebar-menu ul li a{
  display:flex;align-items:center;gap:12px;
  margin:2px 12px;padding:10px 12px;
  border-radius:.6rem;
  color:var(--mnx-ink-2);
  font-size:.86rem;font-weight:500;font-family:var(--mnx-body);
  transition:background-color .15s,color .15s,box-shadow .15s;
}
#sidebar-menu ul li a i{
  font-size:1.15rem;min-width:22px;text-align:center;
  color:var(--mnx-muted);transition:color .15s;
}
#sidebar-menu ul li a span{flex:1 1 auto;}
#sidebar-menu ul li a:hover{background:var(--mnx-surface-3);color:var(--mnx-ink);}
#sidebar-menu ul li a:hover i{color:var(--mnx-azure-600);}

/* Item / parent actif — pill dégradé blanc (maquette) */
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active>a,
#sidebar-menu ul li a.mm-active{
  color:#fff;
  background-image:var(--mnx-grad);
  box-shadow:0 4px 14px rgba(10,128,252,.28);
}
#sidebar-menu ul li a.active i,
#sidebar-menu ul li.mm-active>a i,
#sidebar-menu ul li a.mm-active i{color:#fff;}

/* Flèche des groupes dépliables */
#sidebar-menu ul li a.has-arrow:after{color:currentColor;opacity:.7;}

/* Sous-menus */
#sidebar-menu ul ul.sub-menu{padding:2px 0 4px;}
#sidebar-menu ul ul.sub-menu li a{
  padding:8px 12px 8px 46px;margin:1px 12px;
  font-size:.82rem;font-weight:500;color:var(--mnx-muted);
  border-radius:.5rem;
}
#sidebar-menu ul ul.sub-menu li a:hover{color:var(--mnx-ink);background:var(--mnx-surface-3);}
#sidebar-menu ul ul.sub-menu li a.active,
#sidebar-menu ul ul.sub-menu li.mm-active>a{
  color:var(--mnx-azure-700);background:var(--mnx-grad-soft);box-shadow:none;font-weight:600;
}
#sidebar-menu ul ul.sub-menu li a.active i,
#sidebar-menu ul ul.sub-menu li.mm-active>a i{color:var(--mnx-azure-600);}

/* Bloc utilisateur en pied de sidebar */
.mnx-side-user{
  margin:6px 12px 10px;padding:10px 12px;
  display:flex;align-items:center;gap:11px;
  border-top:1px solid var(--mnx-border);
  border-radius:.6rem;
}
.mnx-side-user .av{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background-image:var(--mnx-grad);color:#fff;
  font-family:var(--mnx-display);font-weight:600;font-size:.9rem;
}
.mnx-side-user .meta{min-width:0;line-height:1.25;}
.mnx-side-user .nm{font-size:.85rem;font-weight:600;color:var(--mnx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mnx-side-user .rl{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mnx-muted);font-weight:600;}

/* Liens & focus génériques */
a{color:var(--mnx-azure-600);}
a:hover{color:var(--mnx-azure-700);}

/* Barre de progression */
.progress{background-color:var(--mnx-surface-3);border-radius:var(--bs-border-radius-pill);}
.progress-bar{background-image:var(--mnx-grad);background-color:var(--mnx-azure-500);}

/* Offcanvas / modales : rayon adouci */
.offcanvas{background-color:var(--mnx-surface);color:var(--mnx-ink-2);}
.modal-content{border-radius:var(--bs-border-radius-lg);border-color:var(--mnx-border);background-color:var(--mnx-surface);}
.dropdown-menu{--bs-dropdown-border-color:var(--mnx-border);--bs-dropdown-border-radius:var(--bs-border-radius);--bs-dropdown-bg:var(--mnx-surface);--bs-dropdown-link-active-bg:var(--mnx-azure-500);box-shadow:var(--mnx-shadow-2);}

/* Pastille logo (bandeau) si utilisée */
.navbar-brand-box{background:transparent;}

/* ================================================================= KPI / STATS (patterns dashboard & stats) */
.mnx-kpi{
  position:relative;overflow:hidden;height:100%;
  background:var(--mnx-surface);border:1px solid var(--mnx-border);
  border-radius:var(--bs-border-radius-lg);padding:20px;box-shadow:var(--mnx-shadow-1);
}
.mnx-kpi .lab{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mnx-muted);font-weight:600;}
.mnx-kpi .val{font-family:var(--mnx-display);font-weight:500;font-size:1.75rem;line-height:1.1;letter-spacing:-.02em;color:var(--mnx-ink);margin-top:8px;font-variant-numeric:tabular-nums;word-break:break-word;}
.mnx-kpi .hint{font-size:.72rem;color:var(--mnx-faint);margin-top:5px;}
.mnx-kpi .ic{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.mnx-kpi .ic.i-brand{background:var(--mnx-azure-50);color:var(--mnx-azure-600);}
.mnx-kpi .ic.i-success{background:rgba(var(--mnx-success-rgb),.14);color:var(--mnx-success);}
.mnx-kpi .ic.i-danger{background:rgba(var(--mnx-danger-rgb),.14);color:var(--mnx-danger);}
.mnx-kpi .ic.i-info{background:rgba(var(--mnx-info-rgb),.14);color:var(--mnx-info);}
.mnx-kpi .ic.i-warning{background:rgba(var(--mnx-warning-rgb),.16);color:var(--mnx-warning);}
.mnx-kpi .ic.i-secondary{background:var(--mnx-surface-3);color:var(--mnx-ink-2);}
.mnx-kpi.brand{background-image:var(--mnx-grad);border:0;color:#fff;box-shadow:0 8px 22px rgba(10,128,252,.28);}
.mnx-kpi.brand .lab,.mnx-kpi.brand .hint{color:rgba(255,255,255,.85);}
.mnx-kpi.brand .val{color:#fff;}
.mnx-kpi.brand .ic{background:rgba(255,255,255,.18);color:#fff;}
.mnx-kpi.hover-zoom{transition:transform .2s,box-shadow .2s;}
.mnx-kpi.hover-zoom:hover{transform:translateY(-2px);box-shadow:var(--mnx-shadow-2);}

.mnx-stat{
  height:100%;text-align:center;
  background:var(--mnx-surface);border:1px solid var(--mnx-border);
  border-radius:var(--bs-border-radius-lg);padding:16px;box-shadow:var(--mnx-shadow-1);
}
.mnx-stat .lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;color:var(--mnx-muted);}
.mnx-stat .num{font-family:var(--mnx-display);font-weight:500;font-size:1.55rem;line-height:1.15;margin-top:4px;color:var(--mnx-ink);font-variant-numeric:tabular-nums;}
.mnx-stat.success .num,.mnx-stat.success .lab{color:var(--mnx-success);}
.mnx-stat.warning .num,.mnx-stat.warning .lab{color:var(--mnx-warning);}
.mnx-stat.danger .num,.mnx-stat.danger .lab{color:var(--mnx-danger);}

/* Indicateur "données en direct" */
.mnx-live-dot{width:9px;height:9px;border-radius:50%;background:var(--mnx-success);box-shadow:0 0 0 0 rgba(var(--mnx-success-rgb),.5);animation:mnxpulse 1.4s infinite;display:inline-block;}
@keyframes mnxpulse{0%{box-shadow:0 0 0 0 rgba(var(--mnx-success-rgb),.5)}70%{box-shadow:0 0 0 8px rgba(var(--mnx-success-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--mnx-success-rgb),0)}}
@media (prefers-reduced-motion:reduce){.mnx-live-dot{animation:none}}

/* Badges "soft" (dashboard live + listes) alignés sur la palette */
.badge-soft-success{background-color:rgba(var(--mnx-success-rgb),.14)!important;color:var(--mnx-success)!important;}
.badge-soft-warning{background-color:rgba(var(--mnx-warning-rgb),.16)!important;color:#9A5B00!important;}
.badge-soft-danger{background-color:rgba(var(--mnx-danger-rgb),.14)!important;color:var(--mnx-danger)!important;}
.badge-soft-info{background-color:rgba(var(--mnx-info-rgb),.14)!important;color:var(--mnx-info)!important;}
.badge-soft-primary{background-color:var(--mnx-azure-50)!important;color:var(--mnx-azure-700)!important;}
.badge-soft-dark,.badge-soft-secondary{background-color:var(--mnx-surface-3)!important;color:var(--mnx-ink-2)!important;}

/* Charts ApexCharts : fond/typo cohérents (couleurs fixées via window.Apex global) */
.apexcharts-tooltip{border:1px solid var(--mnx-border)!important;box-shadow:var(--mnx-shadow-2)!important;background:var(--mnx-surface)!important;color:var(--mnx-ink)!important;}
.apexcharts-text,.apexcharts-legend-text{fill:var(--mnx-muted)!important;color:var(--mnx-muted)!important;}

/* ================================================================= TOPBAR (coquille possédée) */
#page-topbar.mnx-topbar{
  background:color-mix(in srgb,var(--mnx-surface) 88%,transparent);
  backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  border:1px solid var(--mnx-border);
  border-radius:var(--bs-border-radius-lg);
  box-shadow:var(--mnx-shadow-1);
  /* Pas d'overflow:hidden sur la topbar ni ses conteneurs : cela clipperait les
     menus déroulants (langue, utilisateur) qui débordent en dessous. Les coins
     sont arrondis par border-radius seul (il clippe fond + bordure + backdrop). */
}
.mnx-topbar-inner{
  height:var(--mnx-nbh);display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:0 16px;
}
.mnx-topbar-left{display:flex;align-items:center;gap:12px;min-width:0;}
.mnx-topbar-right{display:flex;align-items:center;gap:6px;}
.mnx-brand{display:inline-flex;align-items:center;}
.mnx-brand img{display:block;}
.mnx-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;min-width:40px;padding:0 10px;border:0;background:transparent;
  color:var(--mnx-ink-2);border-radius:var(--bs-border-radius-pill);font-size:20px;cursor:pointer;transition:.15s;
}
.mnx-icon-btn:hover{background:var(--mnx-surface-3);color:var(--mnx-azure-600);}
.mnx-icon-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mnx-ring);}
.mnx-lang{font-size:18px;}
.mnx-lang .mnx-lang-code{font-size:12.5px;font-weight:600;font-family:var(--mnx-body);}
.mnx-user-btn{
  display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 8px;margin-left:4px;
  border:0;background:transparent;cursor:pointer;border-radius:var(--bs-border-radius-pill);transition:.15s;color:var(--mnx-ink);
}
.mnx-user-btn:hover{background:var(--mnx-surface-3);}
.mnx-user-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mnx-ring);}
.mnx-user-av{
  width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background-image:var(--mnx-grad);color:#fff;font-family:var(--mnx-display);font-weight:600;font-size:.85rem;
}
.mnx-user-meta{flex-direction:column;align-items:flex-start;line-height:1.15;}
.mnx-user-meta .nm{font-size:.82rem;font-weight:600;color:var(--mnx-ink);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mnx-user-meta .rl{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mnx-muted);font-weight:600;}
.mnx-topbar .dropdown-menu{margin-top:8px;}
.navbar-brand-box{background:transparent;}

/* ================================================================= PAGE TITLE / BREADCRUMB */
.page-title-box h4,.page-title-box .h4{font-family:var(--mnx-display);font-weight:500;letter-spacing:-.01em;color:var(--mnx-ink);}
.breadcrumb{background:transparent;margin-bottom:0;}
.breadcrumb-item,.breadcrumb-item a{color:var(--mnx-muted);font-size:.82rem;}
.breadcrumb-item a:hover{color:var(--mnx-azure-600);}
.breadcrumb-item.active{color:var(--mnx-ink-2);font-weight:600;}
.breadcrumb-item+.breadcrumb-item::before{color:var(--mnx-faint);}

/* ================================================================= DATATABLES / LISTES */
.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--mnx-border-strong);border-radius:var(--bs-border-radius-pill);
  background:var(--mnx-surface-2);color:var(--mnx-ink);padding:.4rem .9rem;min-width:220px;margin-left:.5rem;
}
.dataTables_wrapper .dataTables_filter input:focus{outline:none;border-color:var(--mnx-azure-500);box-shadow:0 0 0 .2rem var(--mnx-ring);background:var(--mnx-surface);}
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--mnx-border-strong);border-radius:var(--bs-border-radius);
  background:var(--mnx-surface-2);color:var(--mnx-ink);padding:.3rem 2rem .3rem .7rem;
}
.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_info{color:var(--mnx-muted);font-size:.82rem;}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:var(--bs-border-radius)!important;color:var(--mnx-ink-2)!important;border:1px solid transparent!important;
  padding:.35rem .7rem!important;margin:0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--mnx-surface-3)!important;border-color:var(--mnx-border)!important;color:var(--mnx-azure-600)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background-image:var(--mnx-grad)!important;color:#fff!important;border-color:transparent!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{color:var(--mnx-faint)!important;}
table.dataTable thead th,table.dataTable thead td{border-bottom:1px solid var(--mnx-border);}
table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after{opacity:.4;}

/* Boutons d'export DataTables (Buttons) */
div.dt-buttons .dt-button,.dt-button{
  background:var(--mnx-surface)!important;border:1px solid var(--mnx-border-strong)!important;
  border-radius:var(--bs-border-radius-pill)!important;color:var(--mnx-ink-2)!important;
  padding:.4rem .9rem!important;font-size:.8rem!important;font-weight:600!important;
}
div.dt-buttons .dt-button:hover,.dt-button:hover{border-color:var(--mnx-azure-500)!important;color:var(--mnx-azure-600)!important;background:var(--mnx-surface-2)!important;}

/* ================================================================= SELECT2 (aligné inputs) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  min-height:42px;border:1px solid var(--mnx-border-strong)!important;border-radius:var(--bs-border-radius)!important;
  background:var(--mnx-surface-2)!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--mnx-ink);line-height:40px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:40px;}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple{border-color:var(--mnx-azure-500)!important;box-shadow:0 0 0 .2rem var(--mnx-ring);}
.select2-dropdown{background:var(--mnx-surface);border:1px solid var(--mnx-border);border-radius:var(--bs-border-radius);box-shadow:var(--mnx-shadow-2);}
.select2-container--default .select2-results__option{color:var(--mnx-ink-2);}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--mnx-azure-500);color:#fff;}
.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid var(--mnx-border-strong);border-radius:var(--bs-border-radius);background:var(--mnx-surface-2);color:var(--mnx-ink);}
.select2-container--default .select2-selection--multiple .select2-selection__choice{background:var(--mnx-azure-50);border-color:var(--mnx-azure-200);color:var(--mnx-azure-700);border-radius:var(--bs-border-radius-pill);}

/* ================================================================= DIVERS */
.text-muted{color:var(--mnx-muted)!important;}
.bg-light,.bg-light-subtle{background-color:var(--mnx-surface-2)!important;}
.border,.border-top,.border-bottom,.border-start,.border-end{border-color:var(--mnx-border)!important;}
hr{border-color:var(--mnx-border);}
.modal-header,.modal-footer,.offcanvas-header{border-color:var(--mnx-border);}
.nav-tabs{border-bottom-color:var(--mnx-border);}
.nav-tabs .nav-link.active{color:var(--mnx-azure-600);border-color:var(--mnx-border) var(--mnx-border) var(--mnx-surface);}
.nav-tabs .nav-link{color:var(--mnx-muted);}

/* ================================================================= LOGO thème-aware */
/* Le mot-symbole change selon le thème : texte foncé sur topbar claire,
   texte clair sur topbar sombre. Piloté par data-bs-theme (seul interrupteur). */
.logo .logo-light,
.logo.logo-light{display:none;}
.logo .logo-dark,
.logo.logo-dark{display:block;}
[data-bs-theme="dark"] .logo .logo-dark,
[data-bs-theme="dark"] .logo.logo-dark{display:none;}
[data-bs-theme="dark"] .logo .logo-light,
[data-bs-theme="dark"] .logo.logo-light{display:block;}

/* ================================================================= SIDEBAR (reset metismenu) */
#sidebar-menu ul{list-style:none;margin:0;padding-left:0;}
#sidebar-menu ul li{position:relative;}
/* neutralise les puces/indentations par défaut de metismenu */
#sidebar-menu .metismenu li:before{content:none;}
.vertical-menu{width:236px;}
/* survol/focus accessibles */
#sidebar-menu ul li a:focus-visible{outline:2px solid var(--mnx-azure-400);outline-offset:-2px;}

/* ================================================================= EN-TÊTES DE TABLEAUX (conformité) */
/* Design system : pas de gros titre "carte" au-dessus des listes. En-tête discret. */
.mnx-list-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:2px 2px 14px;
}
.mnx-list-head .t{font-family:var(--mnx-display);font-weight:500;font-size:1rem;color:var(--mnx-ink);letter-spacing:-.01em;margin:0;}
.mnx-list-head .sub{font-size:.8rem;color:var(--mnx-muted);}

/* ================================================================= SIDEBAR — RÈGLES AUTORITAIRES (chargées en dernier)
   Corrige : (1) icônes pilotées par tokens => s'adaptent au thème clair/sombre ;
   (2) tout item SÉLECTIONNÉ (top-level ET sous-menu) => texte + icône BLANCS
   sur pill dégradé. On bat les sélecteurs Minible (#sidebar-menu ul li a i =
   couleur codée en dur) avec une spécificité au moins égale + ordre de source. */

/* Icônes au repos : couleur token (change avec le thème) */
#sidebar-menu ul li a i{color:var(--mnx-muted);}
/* Texte au repos : couleur token */
#sidebar-menu ul li a{color:var(--mnx-ink-2);}
/* Survol */
#sidebar-menu ul li a:hover{color:var(--mnx-ink);}
#sidebar-menu ul li a:hover i{color:var(--mnx-azure-600);}

/* SÉLECTIONNÉ — top-level : lien actif OU parent d'un actif */
#sidebar-menu ul li a.active,
#sidebar-menu ul li a.mm-active,
#sidebar-menu ul li.mm-active > a{
  color:#fff !important;
  background-image:var(--mnx-grad);
  box-shadow:0 4px 14px rgba(10,128,252,.28);
}
#sidebar-menu ul li a.active i,
#sidebar-menu ul li a.mm-active i,
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li a.active span,
#sidebar-menu ul li.mm-active > a span{color:#fff !important;}
/* la flèche des groupes dépliés suit la couleur du texte (blanche) */
#sidebar-menu ul li.mm-active > a.has-arrow:after,
#sidebar-menu ul li a.mm-active.has-arrow:after{color:#fff !important;}

/* SÉLECTIONNÉ — sous-menu : même traitement (texte + icône blancs sur dégradé) */
#sidebar-menu ul ul.sub-menu li a.active,
#sidebar-menu ul ul.sub-menu li.mm-active > a{
  color:#fff !important;
  background-image:var(--mnx-grad);
  box-shadow:0 3px 10px rgba(10,128,252,.25);
}
#sidebar-menu ul ul.sub-menu li a.active i,
#sidebar-menu ul ul.sub-menu li.mm-active > a i,
#sidebar-menu ul ul.sub-menu li a.active span,
#sidebar-menu ul ul.sub-menu li.mm-active > a span{color:#fff !important;}

/* ================================================================= BOUTONS — variantes restantes (conformité) */
/* btn-light : bouton neutre sur surface */
.btn-light{
  --bs-btn-bg:var(--mnx-surface-2);--bs-btn-border-color:var(--mnx-border-strong);--bs-btn-color:var(--mnx-ink-2);
  --bs-btn-hover-bg:var(--mnx-surface-3);--bs-btn-hover-border-color:var(--mnx-border-strong);--bs-btn-hover-color:var(--mnx-ink);
  --bs-btn-active-bg:var(--mnx-surface-3);--bs-btn-active-color:var(--mnx-ink);
}
/* btn-dark : encre */
.btn-dark{
  --bs-btn-bg:var(--mnx-ink);--bs-btn-border-color:var(--mnx-ink);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--mnx-ink-2);--bs-btn-hover-border-color:var(--mnx-ink-2);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--mnx-ink-2);
}
/* btn-outline-dark → aligné secondaire */
.btn-outline-dark{
  --bs-btn-color:var(--mnx-ink-2);--bs-btn-border-color:var(--mnx-border-strong);
  --bs-btn-hover-bg:var(--mnx-ink);--bs-btn-hover-border-color:var(--mnx-ink);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--mnx-ink);
}
/* btn-link : lien azur */
.btn-link{--bs-btn-color:var(--mnx-azure-600);--bs-btn-hover-color:var(--mnx-azure-700);text-decoration:none;}
.btn-link:hover{text-decoration:underline;}

/* btn-soft-* (Skote) : fond teinté + texte de la teinte, pill */
.btn-soft-primary{background-color:var(--mnx-azure-50);color:var(--mnx-azure-700);border-color:transparent;}
.btn-soft-primary:hover{background-color:var(--mnx-azure-500);color:#fff;}
.btn-soft-secondary{background-color:var(--mnx-surface-3);color:var(--mnx-ink-2);border-color:transparent;}
.btn-soft-secondary:hover{background-color:var(--mnx-border-strong);color:var(--mnx-ink);}
.btn-soft-success{background-color:rgba(var(--mnx-success-rgb),.14);color:#0B7355;border-color:transparent;}
.btn-soft-success:hover{background-color:var(--mnx-success);color:#fff;}
.btn-soft-danger{background-color:rgba(var(--mnx-danger-rgb),.14);color:#B01324;border-color:transparent;}
.btn-soft-danger:hover{background-color:var(--mnx-danger);color:#fff;}
.btn-soft-warning{background-color:rgba(var(--mnx-warning-rgb),.16);color:#9A5B00;border-color:transparent;}
.btn-soft-warning:hover{background-color:var(--mnx-warning);color:#fff;}
.btn-soft-info{background-color:rgba(var(--mnx-info-rgb),.14);color:#0A7A96;border-color:transparent;}
.btn-soft-info:hover{background-color:var(--mnx-info);color:#fff;}

/* ================================================================= INPUTS — compléments */
/* Champs "sm", groupes, fichiers, textarea : héritent des règles form-control ;
   on garantit radius/couleurs cohérents pour les variantes. */
.form-control-sm,.form-select-sm{border-radius:var(--bs-border-radius-sm);}
.input-group-text{background:var(--mnx-surface-3);border-color:var(--mnx-border-strong);color:var(--mnx-muted);}
textarea.form-control{min-height:80px;}
.form-control[type="file"]::file-selector-button{background:var(--mnx-surface-3);border:0;color:var(--mnx-ink-2);border-radius:var(--bs-border-radius-sm);margin-right:10px;padding:.4rem .8rem;}
.form-control:disabled,.form-control[readonly]{background:var(--mnx-surface-3);color:var(--mnx-muted);}

/* ================================================================= FLATPICKR (calendrier conforme) */
.flatpickr-calendar{background:var(--mnx-surface);border:1px solid var(--mnx-border);box-shadow:var(--mnx-shadow-2);border-radius:var(--bs-border-radius);color:var(--mnx-ink);}
.flatpickr-months .flatpickr-month,.flatpickr-current-month,.flatpickr-weekday{color:var(--mnx-ink);fill:var(--mnx-ink);}
.flatpickr-day{color:var(--mnx-ink-2);border-radius:var(--bs-border-radius-sm);}
.flatpickr-day:hover{background:var(--mnx-surface-3);border-color:var(--mnx-surface-3);}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--mnx-azure-500);border-color:var(--mnx-azure-500);color:#fff;}
.flatpickr-day.today{border-color:var(--mnx-azure-300);}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{fill:var(--mnx-muted);}
.flatpickr-day.flatpickr-disabled{color:var(--mnx-faint);}

/* ================================================================= CODE / KBD (puces mono conformes) */
code{
  font-family:var(--mnx-mono,ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace);
  color:var(--mnx-azure-700);
  background:var(--mnx-surface-3);
  padding:.12em .45em;border-radius:6px;font-size:.86em;
}
/* pas de puce dans un bloc <pre> ni dans un bouton */
pre code,.btn code,a.badge code,.badge code{background:transparent;padding:0;color:inherit;border-radius:0;}
/* En dark mode, azure-700 (bleu foncé) est illisible sur surface sombre :
   on éclaircit le code inline (URLs / variables). On réaffirme `inherit`
   pour <pre>/badges/boutons (mêmes exceptions que ci-dessus). */
[data-bs-theme="dark"] code{color:var(--mnx-azure-300);}
[data-bs-theme="dark"] pre code,[data-bs-theme="dark"] .btn code,[data-bs-theme="dark"] a.badge code,[data-bs-theme="dark"] .badge code{color:inherit;}
kbd{background:var(--mnx-ink);color:#fff;border-radius:6px;padding:.15em .5em;font-size:.82em;}
pre{background:var(--mnx-surface-3);color:var(--mnx-ink);border:1px solid var(--mnx-border);border-radius:var(--bs-border-radius);padding:12px 14px;}

/* ================================================================= TABLEAUX — conformité globale design system */
/* Toutes les tables : fond transparent, séparateurs de lignes discrets, survol doux. */
.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--mnx-ink-2);
  --bs-table-border-color:var(--mnx-border);
  --bs-table-hover-bg:var(--mnx-surface-2);
  --bs-table-hover-color:var(--mnx-ink);
  --bs-table-striped-bg:var(--mnx-surface-2);
  --bs-table-striped-color:var(--mnx-ink-2);
  margin-bottom:0;
}
/* En-têtes : capitales discrètes, muet, fond surface-2 (uniforme quel que soit table-light) */
.table > thead th,.table > thead td,.table thead.table-light th,.table thead.table-primary th{
  text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;font-weight:600;
  color:var(--mnx-muted);background-color:var(--mnx-surface-2);
  border-bottom:1px solid var(--mnx-border);border-top:0;white-space:nowrap;vertical-align:middle;
  padding:.72rem .9rem;
}
.table > tbody td{padding:.7rem .9rem;vertical-align:middle;border-color:var(--mnx-border);color:var(--mnx-ink-2);}
.table > tbody tr:hover{background-color:var(--mnx-surface-2);}

/* table-bordered → on retire les bordures VERTICALES, on garde les séparateurs de LIGNES
   (design system : lignes aérées, pas de grille). */
.table-bordered > :not(caption) > * > *{
  border-left-width:0;border-right-width:0;border-color:var(--mnx-border);
}
.table-bordered > :not(caption) > *{border-width:0;}
.table-bordered > tbody > tr{border-bottom:1px solid var(--mnx-border);}

/* table-sm : padding réduit cohérent */
.table-sm > thead th,.table-sm > tbody td{padding:.45rem .6rem;}

/* Cellules numériques (montants/soldes) : tabulaires */
.table td.num,.table td.text-end,.table .amount{font-variant-numeric:tabular-nums;}

/* ================================================================= BADGES & STATUTS (pastille conforme DS) */
/* Les badges "soft" sémantiques reçoivent une pastille de couleur en tête
   (design system : la forme porte l'info autant que le texte). */
.badge-soft-success,.badge-soft-warning,.badge-soft-danger,.badge-soft-info{
  display:inline-flex;align-items:center;gap:.4em;
}
.badge-soft-success::before,.badge-soft-warning::before,.badge-soft-danger::before,.badge-soft-info::before{
  content:"";width:.42em;height:.42em;border-radius:50%;background:currentColor;flex:none;opacity:.9;
}
.badge{font-weight:600;letter-spacing:.01em;border-radius:var(--bs-border-radius-pill);}

/* Réf. & provider en mono dans les listes de transactions */
.mnx-mono,.tx-ref,.tx-provider{font-family:var(--mnx-mono,ui-monospace,"SF Mono",Menlo,monospace);font-size:.78rem;color:var(--mnx-muted);}
.tx-provider{color:var(--mnx-ink-2);}

/* ================================================================= ÉTATS VIDES */
.mnx-empty{text-align:center;padding:38px 20px;max-width:440px;margin:0 auto;}
.mnx-empty .halo{width:74px;height:74px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-image:var(--mnx-grad-soft);color:var(--mnx-azure-600);font-size:30px;}
.mnx-empty h4{font-family:var(--mnx-display);font-weight:500;font-size:1.05rem;color:var(--mnx-ink);margin-bottom:6px;}
.mnx-empty p{color:var(--mnx-muted);font-size:.88rem;margin:0 auto 16px;max-width:36ch;}

/* ================================================================= CHARGEMENT & AVATARS */
@keyframes mnxshimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.mnx-sk{border-radius:6px;background:var(--mnx-surface-3);background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--mnx-azure-500) 12%,transparent),transparent);background-size:200px 100%;background-repeat:no-repeat;animation:mnxshimmer 1.3s infinite;}
.mnx-sk.line{height:12px;margin:9px 0;}
.mnx-sk.line.sm{width:55%;}
.mnx-sk.circle{width:44px;height:44px;border-radius:50%;}
@media (prefers-reduced-motion:reduce){.mnx-sk{animation:none;}}
.mnx-avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background-image:var(--mnx-grad);color:#fff;font-family:var(--mnx-display);font-weight:600;font-size:.85rem;position:relative;flex:none;}
.mnx-avatar .st{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--mnx-surface);}
.mnx-spinner{width:24px;height:24px;border:3px solid var(--mnx-surface-3);border-top-color:var(--mnx-azure-500);border-radius:50%;animation:mnxspin .8s linear infinite;display:inline-block;vertical-align:middle;}
@keyframes mnxspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mnx-spinner{animation:none;}}

/* ================================================================= INFOBULLES (Bootstrap tooltip) */
.tooltip .tooltip-inner{background:var(--mnx-ink);color:#fff;border-radius:var(--bs-border-radius-sm);font-size:.78rem;padding:.4rem .65rem;box-shadow:var(--mnx-shadow-2);}
.tooltip .tooltip-arrow::before{border-top-color:var(--mnx-ink);border-bottom-color:var(--mnx-ink);}

/* ================================================================= KPI — delta & sparkline (conforme DS) */
.mnx-kpi .delta{font-size:.75rem;font-weight:600;margin-top:8px;display:inline-flex;align-items:center;gap:5px;}
.mnx-kpi .delta.up{color:var(--mnx-success);}
.mnx-kpi .delta.down{color:var(--mnx-danger);}
.mnx-kpi.brand .delta{color:#fff;}
.mnx-kpi .spark{position:absolute;right:16px;bottom:14px;width:84px;height:32px;opacity:.95;pointer-events:none;}

/* ================================================================= LIGNE DE TRANSACTION (liste en cartes, cf. design system) */
.mnx-txlist{display:flex;flex-direction:column;}
.mnx-txrow{
  display:flex;align-items:center;gap:14px;padding:14px 6px;
  border-bottom:1px solid var(--mnx-border);transition:background-color .15s;
}
.mnx-txrow:last-child{border-bottom:0;}
.mnx-txrow:hover{background:var(--mnx-surface-2);}
.mnx-txrow .av{
  width:44px;height:44px;flex:none;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background-image:var(--mnx-grad-soft);color:var(--mnx-azure-600);
  font-family:var(--mnx-display);font-weight:600;font-size:.85rem;letter-spacing:.02em;
}
.mnx-txrow .main{flex:1 1 auto;min-width:0;}
.mnx-txrow .nm{font-weight:600;color:var(--mnx-ink);font-size:.92rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mnx-txrow .sub{font-family:var(--mnx-mono,ui-monospace,"SF Mono",Menlo,monospace);color:var(--mnx-muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mnx-txrow .right{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.mnx-txrow .amt{font-weight:700;font-size:.98rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.mnx-txrow .amt.in{color:var(--mnx-success);}
.mnx-txrow .amt.out{color:var(--mnx-ink);}
.mnx-txrow .view{
  flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--mnx-muted);border:1px solid var(--mnx-border);background:var(--mnx-surface);font-size:18px;transition:.15s;
}
.mnx-txrow .view:hover{border-color:var(--mnx-azure-500);color:var(--mnx-azure-600);background:var(--mnx-surface-2);}
.mnx-txrow-empty{padding:30px;text-align:center;color:var(--mnx-muted);font-size:.88rem;}
@media(max-width:576px){.mnx-txrow .sub{white-space:normal;}}

/* ================================================================= EN-TÊTE DE PAGE (hors card) */
.mnx-page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:2px 0 18px;}
.mnx-page-title{font-family:var(--mnx-display);font-weight:500;font-size:1.3rem;color:var(--mnx-ink);margin:0;letter-spacing:-.01em;}
/* Fil d'Ariane en tête de page (remplace l'ancien gros titre). */
.mnx-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;font-size:.95rem;line-height:1.3;}
.mnx-crumbs a{color:var(--mnx-muted);text-decoration:none;font-weight:500;}
.mnx-crumbs a:hover{color:var(--mnx-azure-600);}
.mnx-crumbs .mnx-crumb-sep{color:var(--mnx-faint);font-size:1.05rem;display:inline-flex;align-items:center;}
.mnx-crumbs .cur{font-family:var(--mnx-display);font-weight:500;color:var(--mnx-ink);letter-spacing:-.01em;}

/* =============================================================================
   FONDATION LAYOUT AUTONOME — remplace ENTIÈREMENT le thème Skote (app.min.css).
   Ne dépend plus que de Bootstrap 5.3 + icons.min.css. Charpente en position
   fixe (topbar/sidebar), décalage du contenu, footer collant, sous-menus
   metismenu, responsive, repli sidebar, + shims des utilitaires Skote utilisés
   par le produit (font-size, avatars, section, timeline…). JS : monexa-shell.js.
   ========================================================================== */
#layout-wrapper{min-height:100vh;}

/* ---- Variables de coquille : gouttière, largeur sidebar, hauteur navbar ---- */
:root{ --mnx-gap:14px; --mnx-sbw:236px; --mnx-nbh:56px; }

/* Navbar SÉPARÉE : barre-île à droite du sidebar (elle ne le recouvre plus). */
#page-topbar{position:fixed;top:var(--mnx-gap);left:calc(var(--mnx-gap)*2 + var(--mnx-sbw));right:var(--mnx-gap);
  height:var(--mnx-nbh);z-index:1002;transition:left .22s ease;}

/* Sidebar — ÎLE FLOTTANTE remontée en haut (le logo y est désormais).
   overflow:hidden clippe les coins ; le scroll est porté par le SimpleBar
   interne. La largeur suit --mnx-sbw (rail en mode réduit). */
.vertical-menu{position:fixed;top:var(--mnx-gap);left:var(--mnx-gap);bottom:var(--mnx-gap);
  width:var(--mnx-sbw);z-index:1001;overflow:hidden;transition:width .22s ease;}

/* Contenu décalé (suit la largeur du sidebar) : gap + sidebar + gap */
.main-content{margin-left:calc(var(--mnx-gap)*2 + var(--mnx-sbw));overflow:visible;min-height:100vh;
  display:flex;flex-direction:column;transition:margin-left .22s ease;}
.page-content{padding:calc(var(--mnx-gap)*2 + var(--mnx-nbh)) 18px 40px 18px;flex:1 1 auto;display:flex;flex-direction:column;}

/* ---- En-tête du sidebar : logo (wordmark) + mark carré (rail) + bouton réduire ---- */
.mnx-side-head{display:flex;align-items:center;gap:10px;padding:0 12px;min-height:var(--mnx-nbh);
  border-bottom:1px solid var(--mnx-border);flex:none;}
.mnx-side-brand{display:inline-flex;align-items:center;min-width:0;overflow:hidden;}
.mnx-side-brand img{display:block;}
.mnx-side-mark{width:30px;height:30px;border-radius:8px;display:none;flex:none;object-fit:contain;}
.mnx-side-collapse{margin-left:auto;width:28px;height:28px;flex:none;border:1px solid var(--mnx-border);
  background:var(--mnx-surface-2);color:var(--mnx-muted);border-radius:8px;align-items:center;justify-content:center;
  cursor:pointer;transition:background-color .15s,color .15s;}
.mnx-side-collapse:hover{background:var(--mnx-surface-3);color:var(--mnx-ink);}
.mnx-side-collapse i{font-size:1.15rem;transition:transform .22s;}

/* ---- Rail réduit (desktop uniquement) : icônes seules ; survol = ré-étend en overlay ---- */
@media (min-width:992px){
  html.mnx-rail{ --mnx-sbw:72px; }
  html.mnx-rail .mnx-side-collapse i{transform:rotate(180deg);}
  /* « Peek » : ré-étend le sidebar en overlay au survol. Piloté par la classe
     .mnx-peek (JS + verrou), PAS par :hover — sinon cliquer le bouton (curseur
     DANS le sidebar) empêcherait la réduction de s'afficher. */
  html.mnx-rail.mnx-peek .vertical-menu{width:236px;box-shadow:var(--mnx-shadow-3);z-index:1050;}
  html.mnx-rail:not(.mnx-peek) .mnx-side-brand{display:none;}
  html.mnx-rail:not(.mnx-peek) .mnx-side-mark{display:block;margin:0 auto;}
  html.mnx-rail:not(.mnx-peek) .mnx-side-head{justify-content:center;padding:0;}
  html.mnx-rail:not(.mnx-peek) .mnx-side-collapse{display:none;}
  html.mnx-rail:not(.mnx-peek) #sidebar-menu ul li a{justify-content:center;gap:0;}
  html.mnx-rail:not(.mnx-peek) #sidebar-menu ul li a span{opacity:0;width:0;overflow:hidden;}
  html.mnx-rail:not(.mnx-peek) #sidebar-menu .menu-title{opacity:0;height:10px;padding:2px 0 0;overflow:hidden;white-space:nowrap;}
  html.mnx-rail:not(.mnx-peek) #sidebar-menu .has-arrow:after{display:none;}
}
.page-content > .container-fluid{flex:1 1 auto;display:flex;flex-direction:column;}

/* Footer poussé en bas de fenêtre même si le contenu est court */
.footer{padding:16px 4px;color:var(--mnx-muted);font-size:.8rem;border-top:1px solid var(--mnx-border);margin-top:auto;background:transparent;}

/* En-tête de page */
.page-title-box{padding-bottom:20px;}

/* Sous-menus metismenu (collapse) — pilotés par monexa-shell.js */
.mm-collapse{display:none;}
.mm-collapse.mm-show{display:block;}
.mm-collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease;}
#sidebar-menu .has-arrow:after{content:"\f0140";font-family:"Material Design Icons";display:block;float:right;transition:transform .2s;line-height:1.4;}
#sidebar-menu li.mm-active > a.has-arrow:after,#sidebar-menu .mm-active > .has-arrow:after{transform:rotate(180deg);}

/* Responsive < 992px : la navbar redevient une barre PLEINE LARGEUR collée en
   haut, et le sidebar un tiroir plein bord (le rail est neutralisé). */
@media (max-width:991.98px){
  #page-topbar{top:0;left:0;right:0;height:auto;}
  #page-topbar.mnx-topbar{border:0;border-bottom:1px solid var(--mnx-border);border-radius:0;box-shadow:none;}
  .mnx-topbar-inner{height:64px;padding:0 16px;}
  .vertical-menu{top:0;left:0;bottom:0;width:264px;border:0;border-right:1px solid var(--mnx-border);
    border-radius:0;box-shadow:var(--mnx-shadow-3);transform:translateX(-100%);transition:transform .2s ease;}
  body.sidebar-enable .vertical-menu{transform:none;}
  .main-content{margin-left:0;}
  .page-content{padding-top:calc(64px + 18px);}
  /* le bouton réduire n'a pas de sens en tiroir */
  .mnx-side-collapse{display:none!important;}
}
/* Desktop : le bouton menu (topbar, masqué en desktop) — repli résiduel. */
@media (min-width:992px){
  body.vertical-collpsed .vertical-menu{transform:translateX(calc(-100% - 14px));transition:transform .2s ease;}
  body.vertical-collpsed .main-content{margin-left:0;}
}

/* Preloader neutralisé (le spinner Skote n'est plus porté) */
#preloader{display:none!important;}

/* ---- Utilitaires Skote portés (absents de Bootstrap), tokenisés ---- */
/* font-size-XX (14/16/18/20/22/24 définis plus haut) */
.font-size-10{font-size:10px!important;}
.font-size-11{font-size:11px!important;}
.font-size-12{font-size:12px!important;}
.font-size-13{font-size:13px!important;}
.font-size-15{font-size:15px!important;}

/* soft backgrounds */
.bg-soft-primary{background-color:var(--mnx-azure-50)!important;}
.bg-soft-success{background-color:rgba(var(--mnx-success-rgb),.14)!important;}
.bg-soft-warning{background-color:rgba(var(--mnx-warning-rgb),.16)!important;}
.bg-soft-danger{background-color:rgba(var(--mnx-danger-rgb),.14)!important;}
.bg-soft-info{background-color:rgba(var(--mnx-info-rgb),.14)!important;}
.bg-soft-dark{background-color:var(--mnx-surface-3)!important;}
.bg-soft-secondary{background-color:var(--mnx-surface-3)!important;}

/* avatars */
.avatar-xs{height:2rem;width:2rem;}
.avatar-sm{height:3rem;width:3rem;}
.avatar-md{height:4.5rem;width:4.5rem;}
.avatar-lg{height:6rem;width:6rem;}
.avatar-title{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--mnx-azure-600);color:#fff;font-weight:600;}
.avatar-group{padding-left:12px;display:flex;flex-wrap:wrap;}
.avatar-group .avatar-group-item{margin-left:-12px;border:2px solid var(--mnx-surface);border-radius:50%;transition:all .2s;}
.avatar-group .avatar-group-item:hover{transform:translateY(-2px);}
/* Cercle d'initiales (tickets) — anciennement fourni par app.min.css */
.initials-circle{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background-image:var(--mnx-grad);color:#fff;font-family:var(--mnx-display);font-weight:600;font-size:.85rem;}

/* topbar/header items + divers */
.header-item{border:0;background:transparent;}
.mini-stats-wid{height:100%;}
.w-md{min-width:110px;}
.profile-user-wid{margin-top:-26px;}
.apex-charts{min-height:10px!important;}

/* section (pages d'authentification notamment) */
.section{position:relative;padding-top:80px;padding-bottom:80px;}

/* checkbox « primary » → azur Monexa */
.form-check-primary .form-check-input:checked{background-color:var(--mnx-azure-500);border-color:var(--mnx-azure-500);}

/* timeline verticale (chronologies) */
.verti-timeline{border-left:3px dashed var(--mnx-border);margin:0 10px;}
.verti-timeline .event-list{position:relative;padding:0 0 40px 30px;}
.verti-timeline .event-list .event-timeline-dot{position:absolute;left:-9px;top:0;z-index:9;font-size:16px;color:var(--mnx-azure-500);}
.verti-timeline .event-list .event-content{border:2px solid var(--mnx-border);border-radius:7px;}

/* logo pages auth (bascule selon thème) */
.auth-logo .auth-logo-dark{display:block;}
.auth-logo .auth-logo-light{display:none;}
[data-bs-theme="dark"] .auth-logo .auth-logo-dark{display:none;}
[data-bs-theme="dark"] .auth-logo .auth-logo-light{display:block;}

/* waves : ripple neutralisé, clic normal conservé */
.waves-effect{position:relative;}
.waves-effect .waves-ripple{display:none;}

/* ================================================================= BOOTSTRAP-DATEPICKER (calendrier conforme) */
.datepicker{background:var(--mnx-surface);border:1px solid var(--mnx-border);border-radius:var(--bs-border-radius);box-shadow:var(--mnx-shadow-2);padding:8px;color:var(--mnx-ink-2);}
.datepicker table tr td,.datepicker table tr th{color:var(--mnx-ink-2);border-radius:var(--bs-border-radius-sm);}
.datepicker table tr td.day:hover,.datepicker table tr td.focused{background:var(--mnx-surface-3);}
.datepicker table tr td.active,.datepicker table tr td.active:hover,
.datepicker table tr td.active.active{background-image:var(--mnx-grad)!important;background-color:var(--mnx-azure-500)!important;color:#fff!important;border:0;}
.datepicker table tr td.today,.datepicker table tr td.today:hover{background:var(--mnx-azure-50)!important;color:var(--mnx-azure-700)!important;}
.datepicker table tr td.old,.datepicker table tr td.new{color:var(--mnx-faint);}
.datepicker .datepicker-switch:hover,.datepicker .prev:hover,.datepicker .next:hover{background:var(--mnx-surface-3);}
.datepicker table tr th.datepicker-switch{color:var(--mnx-ink);font-weight:600;}

/* ================================================================= RECHERCHE INLINE (en-tête de liste, réutilisable) */
.app-search-inline{position:relative;}
.app-search-inline i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mnx-muted);font-size:16px;pointer-events:none;}
.app-search-inline input{height:38px;border-radius:var(--bs-border-radius-pill);padding-left:36px;min-width:230px;}

/* ================================================================= BASCULE FILTRES AVANCÉS (réutilisable) */
.mnx-adv-toggle{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--mnx-muted);font-size:.82rem;font-weight:600;cursor:pointer;padding:2px 0;}
.mnx-adv-toggle:hover,.mnx-adv-toggle.active{color:var(--mnx-azure-600);}
.mnx-adv-toggle .mnx-adv-caret{transition:transform .2s;font-size:16px;}
.mnx-adv-toggle[aria-expanded="true"] .mnx-adv-caret{transform:rotate(180deg);}

/* ================================================================= COPIE & CLÉS (primitive DS réutilisable) */
/* Petit bouton icône (copier / révéler) — utilisable sur toutes les interfaces. */
.mnx-icon-action{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;border:0;background:transparent;color:var(--mnx-muted);
  border-radius:8px;cursor:pointer;font-size:15px;transition:background .15s,color .15s;
}
.mnx-icon-action:hover{background:var(--mnx-surface-3);color:var(--mnx-azure-600);}
.mnx-icon-action:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mnx-ring);}
.mnx-icon-action.mnx-copied{color:var(--mnx-success);}
.mnx-icon-action-sm{width:24px;height:24px;font-size:13px;border-radius:6px;}
/* Ligne « clé » : label + valeur mono tronquée + actions (révéler/copier). */
.mnx-key-row{display:flex;align-items:center;gap:8px;padding:6px 0;}
.mnx-key-row + .mnx-key-row{border-top:1px solid var(--mnx-border);}
.mnx-key-lab{flex:none;width:52px;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--mnx-faint);}
.mnx-key-val{
  flex:1 1 auto;min-width:0;
  font-family:var(--mnx-mono,ui-monospace,"SF Mono",Menlo,monospace);
  font-size:.74rem;color:var(--mnx-ink-2);background:var(--mnx-surface-3);
  padding:4px 9px;border-radius:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ================================================================= MONEXA DATATABLE (composant maison, piloté par monexa-datatable.js) */
.mnx-dt-wrap{display:flex;flex-direction:column;}
.mnx-dt-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;}
.mnx-dt-left{display:flex;align-items:center;gap:8px;}
.mnx-dt-lenlbl{font-size:.75rem;color:var(--mnx-muted);font-weight:600;}
.mnx-dt-len{height:34px;border:1px solid var(--mnx-border-strong);background:var(--mnx-surface);color:var(--mnx-ink-2);border-radius:var(--bs-border-radius-pill);padding:0 30px 0 12px;font-size:.8rem;font-weight:600;cursor:pointer;
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23657590' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:9px;}
.mnx-dt-search{min-width:220px;}
.mnx-dt-scroll{overflow-x:auto;}
.mnx-dt-scroll > .mnx-dt{margin-bottom:0;}
/* En-têtes triables */
.mnx-dt-sortable{cursor:pointer;user-select:none;white-space:nowrap;position:relative;padding-right:20px!important;}
.mnx-dt-sortable::after{content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%);width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--mnx-faint);opacity:.35;transition:opacity .15s,transform .15s;}
.mnx-dt-sortable:hover::after{opacity:.7;}
.mnx-dt-sortable.mnx-dt-asc::after{border-top:0;border-bottom:5px solid var(--mnx-azure-500);opacity:1;}
.mnx-dt-sortable.mnx-dt-desc::after{border-top:5px solid var(--mnx-azure-500);opacity:1;}
/* Footer : info + pagination */
.mnx-dt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--mnx-border);}
.mnx-dt-info{font-size:.78rem;color:var(--mnx-muted);font-variant-numeric:tabular-nums;}
.mnx-dt-pager{display:flex;align-items:center;gap:4px;}
.mnx-dt-pg{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--mnx-border);background:var(--mnx-surface);color:var(--mnx-ink-2);border-radius:9px;font-size:.8rem;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums;transition:.15s;}
.mnx-dt-pg:hover:not(.on):not(.dis){border-color:var(--mnx-azure-500);color:var(--mnx-azure-600);}
.mnx-dt-pg.on{background-image:var(--mnx-grad);color:#fff;border:0;box-shadow:0 4px 10px rgba(10,128,252,.25);}
.mnx-dt-pg.dis{opacity:.4;cursor:not-allowed;}
.mnx-dt-gap{padding:0 4px;color:var(--mnx-faint);}
.mnx-dt-empty{text-align:center;color:var(--mnx-muted);padding:26px 12px;}

/* ================================================================= RÉVÉLATION (stagger au chargement, piloté par monexa-ui.js) */
/* Pré-masquage uniquement si les animations sont dispo (.mnx-anim posé en <head>) :
   sans JS, tout reste visible (aucun contenu caché). */
.mnx-anim .mnx-reveal{opacity:0;transform:translateY(10px);will-change:opacity,transform;}
.mnx-anim .mnx-reveal.mnx-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;}
@media (prefers-reduced-motion:reduce){
  .mnx-reveal,.mnx-anim .mnx-reveal{opacity:1!important;transform:none!important;transition:none!important;}
}

/* =============================================================================
   ÉVOLUTION DS (validée 2026-07-22) — 4 axes
   P1 typo · P3 chip/jauge · P4 densité. (P2 profondeur : halo bouton ci-dessus.)
   Additif : n'écrase aucun composant existant, composants opt-in réutilisables.
   ========================================================================== */

/* ---- P1 · Échelle typographique fermée (utilitaires opt-in) --------------- */
/* Montants : Clash Display + chiffres à chasse fixe, partout où il y a de l'argent. */
.mnx-amount,.mnx-num{font-variant-numeric:tabular-nums;}
.mnx-amount{font-family:var(--mnx-display);font-weight:500;letter-spacing:-.01em;color:var(--mnx-ink);}
.mnx-t-display{font-family:var(--mnx-display);font-weight:500;font-size:2.5rem;line-height:1.05;letter-spacing:-.02em;color:var(--mnx-ink);}
.mnx-t-title{font-family:var(--mnx-display);font-weight:500;font-size:1.75rem;line-height:1.1;letter-spacing:-.02em;color:var(--mnx-ink);}
.mnx-t-kpi{font-family:var(--mnx-display);font-weight:500;font-size:1.75rem;line-height:1.1;letter-spacing:-.02em;color:var(--mnx-ink);font-variant-numeric:tabular-nums;}
.mnx-t-body{font-family:var(--mnx-body);font-size:.875rem;color:var(--mnx-ink-2);}
.mnx-t-small{font-family:var(--mnx-body);font-size:.78rem;color:var(--mnx-muted);}
.mnx-t-micro{font-family:var(--mnx-body);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--mnx-muted);}

/* ---- P3 · Chip (métrique compacte) ---------------------------------------- */
.mnx-chip{display:inline-flex;flex-direction:column;gap:2px;padding:8px 12px;min-width:110px;
  border-radius:var(--bs-border-radius-sm);background:var(--mnx-surface-2);border:1px solid var(--mnx-border);}
.mnx-chip .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mnx-muted);font-weight:600;}
.mnx-chip .v{font-size:.9rem;font-weight:600;color:var(--mnx-ink);font-variant-numeric:tabular-nums;}
.mnx-chip-accent{background-image:var(--mnx-grad-soft);border-color:transparent;}
.mnx-chip-accent .v{color:var(--mnx-azure-600);}
.mnx-chip-good .v{color:var(--mnx-success);}
.mnx-chip-row{display:flex;flex-wrap:wrap;gap:8px;}

/* ---- P3 · Jauge (remplissage / plafond) ----------------------------------- */
.mnx-gauge{height:7px;border-radius:var(--bs-border-radius-pill);background:var(--mnx-surface-3);overflow:hidden;}
.mnx-gauge>span{display:block;height:100%;border-radius:var(--bs-border-radius-pill);background-image:var(--mnx-grad);}
.mnx-gauge.warn>span{background-image:none;background-color:var(--mnx-warning);}
.mnx-gauge.over>span{background-image:none;background-color:var(--mnx-danger);}
.mnx-gaugewrap{display:flex;align-items:center;gap:9px;justify-content:flex-end;}
.mnx-gaugewrap .mnx-gauge{flex:1;min-width:70px;}
.mnx-gaugewrap .pct{font-size:.72rem;font-weight:600;color:var(--mnx-muted);min-width:38px;text-align:right;font-variant-numeric:tabular-nums;}
.mnx-gaugewrap .pct.over{color:var(--mnx-danger);}

/* ---- P4 · Densité : table compacte (opt-in) ------------------------------- */
.table-compact>:where(thead,tbody,tfoot)>tr>*{padding-top:.375rem;padding-bottom:.375rem;font-size:.78rem;}
.table-compact>thead>tr>*{padding-top:.5rem;padding-bottom:.5rem;}