/* =========================================================
   MONITORING DIM — pilotage de la charge des groupes de codage
   Jetons de app.css + light-dark() uniquement (pas de couleur nue).
   La page est une .page-fit : .mon (page-fit-main) défile en interne ;
   la barre de filtres défile avec le contenu (pas de chevauchement des tableaux).
   ========================================================= */

.mon{
  --mon-gap: clamp(12px, 1.6vw, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--mon-gap);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 2px 0;
}
/* Marge de fin en élément, pas en padding : une barre collante (bottom: 0) se cale sur la boîte de contenu
   du conteneur qui défile ; avec un padding bas, des lignes restaient visibles sous la barre. */
.mon::after{ content: ""; flex: 0 0 24px; }
/* Sous 1024px la page grandit avec son contenu (.page-fit, app.css) et c'est le document qui défile :
   .mon ne doit plus être un conteneur de défilement, sinon les barres d'enregistrement collantes
   restent au bas du contenu au lieu du bas de l'écran (clip ne crée pas de conteneur de défilement). */
@media (max-width: 1023px){
  .mon{ overflow: visible; overflow-x: clip; }
}

/* ---------- Onglets : piloter (Équilibre, Encodage) | configurer (Paramétrage, Données) ---------- */
.mon-nav{ display: flex; align-items: center; gap: 12px; }
.mon-nav .mon-main-tabs-parent{ flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mon-nav .mon-main-tabs-parent::-webkit-scrollbar{ display: none; }
.mon .admin-main-tabs.mon-main-tabs{ margin-bottom: 0 !important; flex-wrap: nowrap !important; }
.mon-main-tabs .admin-main-tab{ white-space: nowrap; }
.mon-main-tabs .mon-tab-config{ position: relative; margin-left: 17px !important; }
.mon-main-tabs .mon-tab-config::before{
  content: "";
  position: absolute;
  left: -11px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border-strong);
}
.mon-panel{ min-width: 0; }

/* Ampoule du guide : toujours à droite des onglets ; ouvre la rubrique de l'onglet actif */
.mon-nav .mon-help-btn{ flex: 0 0 auto; }
.mon-help-btn{
  width: 40px; height: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--warning-fg);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.mon-help-btn:hover{ background: var(--warning-bg); }

/* ---------- Pastilles ---------- */
.mon-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary-light);
  color: var(--primary-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.mon-pill--muted{ background: var(--bg-muted); color: var(--text-muted); }

.mon-muted{ color: var(--text-muted); }
.mon-warn-ink{ color: var(--warning-fg); font-weight: 600; }
.mon-code{ font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }

/* ---------- Barre de filtres ---------- */
.mon-filters{
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: 12px 24px;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}
.mon-filter{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mon-filter-label{
  font-size: var(--text-xs); font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mon-filter-scope{
  margin-left: auto; align-self: center;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: var(--text-sm); color: var(--text-secondary); text-align: right;
}
.mon-filter-scope{ gap: 6px; }
.mon-filter .mon-dd{ width: 150px; min-width: 150px; }
.mon-filter .mon-dd-wide{ width: 280px; min-width: 280px; }

/* La barre de période d'Équilibre / Encodage : une ligne à plat sous les onglets, libellés en ligne */
.mon .mon-filters{
  align-items: center;
  gap: 10px 22px;
  padding: 2px 2px 14px;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.mon-filters .mon-filter{ flex-direction: row; align-items: center; gap: 8px; }
.mon-filters .mon-filter-label{
  font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary);
  text-transform: none; letter-spacing: 0;
}
.mon-filters .mon-filter .mon-dd{ width: 120px; min-width: 120px; }
.mon-filters .mon-filter-scope{
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 6px 12px;
  color: var(--text-muted);
}

/* Sélecteur segmenté (RadioItems) */
.mon-seg{
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  border: 1px solid var(--border-color);
}
/* Dash pose display:inline-block en style inline (inline=True) : !important pour centrer le texte */
.mon-seg-label{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  margin: 0 !important;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.mon-seg-label:hover{ color: var(--text-primary); }
.mon-seg-input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mon-seg-label:has(.mon-seg-input:checked){
  background: var(--bg-surface);
  color: var(--primary-ink);
  box-shadow: var(--shadow-xs);
}
.mon-seg-label:has(.mon-seg-input:focus-visible){ outline: 2px solid var(--border-focus); outline-offset: 1px; }

/* Focus clavier : contour plein (≥ 3:1), le halo pâle global (--focus-ring) ne se voyait pas (1,3:1).
   Les cellules des grilles gardent leur propre repère (cellule active). */
.mon :is(button, a[href], summary, [tabindex="0"], [tabindex="-1"]):focus-visible,
.mon .mon-main-tabs .tab:focus-visible{
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.mon .Select.is-focused:not(.is-open) > .Select-control{ outline: 2px solid var(--border-focus); outline-offset: 1px; }
#mon-rebal-title:focus{ outline: none; }   /* focus posé par programme à l'ouverture de la bulle */

.mon-pane{ display: flex; flex-direction: column; gap: var(--mon-gap); padding-top: 4px; }
.mon-dash-body{ display: flex; flex-direction: column; gap: var(--mon-gap); }

/* ---------- Équilibre : la réponse en une phrase, trois chiffres, l'action principale ---------- */
.mon-verdict{
  --mon-verdict-indent: 34px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 16px 28px;
  padding: 2px 2px 0;
}
.mon-verdict-main{ display: flex; flex-direction: column; gap: 14px; flex: 1 1 520px; min-width: 0; }
.mon-verdict-text{
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0;
  font-size: clamp(1.08rem, 1.4vw, 1.28rem); font-weight: 600; line-height: 1.35;
  color: var(--text-primary);
}
.mon-verdict-text > .bi{ flex: 0 0 24px; font-size: 1.3rem; line-height: 1.2; }
.mon-verdict-text strong{ font-weight: 800; }
.mon-verdict-text--ok > .bi{ color: var(--success-ink); }
.mon-verdict-text--warn > .bi{ color: var(--warning-fg); }
.mon-verdict-text--strong > .bi{ color: var(--danger-ink); }
.mon-verdict-sim{ color: var(--primary-ink); font-weight: 700; }
.mon-verdict-note{
  display: flex; gap: 6px; align-items: baseline;
  margin: 6px 0 0 var(--mon-verdict-indent);
  max-width: 78ch;
  font-size: var(--text-sm); color: var(--text-muted);
}
.mon-stats{
  display: flex; flex-wrap: wrap; gap: 10px 40px;
  margin: 0; padding-left: var(--mon-verdict-indent);
}
.mon-stats:empty{ display: none; }
.mon-stat{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mon-stat dt{ font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.mon-stat dd{ margin: 0; }
.mon-stat-value{
  font-size: 1.2rem; font-weight: 700; line-height: 1.2;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.mon-stat-sub{ font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mon-stat--warn .mon-stat-value{ color: var(--warning-fg); }

/* Action principale, ou note « semestre terminé » à sa place (plus rien à rééquilibrer) */
.mon-verdict-action{ display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 1 auto; min-width: 0; }
.mon-verdict-action > div:empty{ display: none; }
.mon-rebal-closed{ display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 380px; }
.mon-rebal-closed p{
  display: flex; align-items: baseline; gap: 8px;
  margin: 0;
  font-size: var(--text-sm); line-height: 1.45; color: var(--text-secondary);
}
.mon-rebal-closed p > .bi{ flex: 0 0 auto; color: var(--text-muted); }
.mon-rebal-closed strong{ color: var(--text-primary); }

/* Indice et table des groupes côte à côte : on lit la barre et ses chiffres sans défiler */
.mon-main{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--mon-gap);
  align-items: stretch;   /* les deux cartes côte à côte, même hauteur */
}
@media (max-width: 1180px){ .mon-main{ grid-template-columns: minmax(0, 1fr); } }
.mon-summary-hint{ margin-left: 4px; font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }

/* ---------- Table « Groupes » : une ligne par groupe, dépliable (détails natifs : clavier inclus) ---------- */
.mon-gtable{ display: flex; flex-direction: column; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.mon-grow{
  display: grid;
  grid-template-columns: minmax(84px, 1.2fr) repeat(3, minmax(56px, 1fr)) minmax(56px, 0.8fr) minmax(124px, 1.3fr) 16px;
  align-items: center;
  column-gap: 12px;
  padding: 10px 12px;
}
.mon-gcell{ min-width: 0; }
.mon-gcell.mon-num{ text-align: right; white-space: nowrap; }
.mon-grow--head{
  padding-block: 9px;
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.mon-grow-item{ border-bottom: 1px solid var(--border-color); }
.mon-grow-item > summary{
  list-style: none;
  cursor: pointer;
  color: var(--text-primary);
  transition: background-color 140ms ease;
}
.mon-grow-item > summary::-webkit-details-marker{ display: none; }
.mon-grow-item > summary::after{
  content: "\F282"; /* bi-chevron-down */
  font-family: "bootstrap-icons";
  font-size: 0.8rem;
  justify-self: end;
  color: var(--text-muted);
  transition: transform 180ms ease;
}
.mon-grow-item[open] > summary::after{ transform: rotate(180deg); }
.mon-grow-item > summary:hover,
.mon-grow-item[open] > summary{ background: var(--bg-subtle); }
.mon-grow-item > summary:focus-visible{ outline: 2px solid var(--border-focus); outline-offset: -2px; }
.mon-gname{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.mon-gname-label{ font-size: var(--text-xs); color: var(--text-muted); }
.mon-grow--total{ border-top: 2px solid var(--border-strong); margin-top: -1px; font-weight: 700; color: var(--text-primary); }
.mon-grow-detail{
  display: grid; gap: 10px;
  margin: 0;
  padding: 6px 12px 16px;
  background: var(--bg-subtle);
}
.mon-grow-detail > div{ display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.mon-grow-detail dt{ font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.mon-grow-detail dd{ margin: 0; color: var(--text-secondary); }
.mon-chip--spec{
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.mon-chip--spec strong{ font-weight: 700; letter-spacing: 0.03em; }
.mon-chip-more{ align-self: center; font-size: var(--text-xs); color: var(--text-muted); }
@media (max-width: 640px){
  .mon-grow{ grid-template-columns: minmax(0, 1fr) auto auto 16px; }
  .mon-grow .mon-col-opt{ display: none; }
  .mon-grow-detail > div{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Carte Groupes, vue « Spécialités » : une ligne par groupe, pastilles « code % » ---------- */
.mon-gs-rows{ display: flex; flex-direction: column; }
.mon-gs-row{
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-color);
}
.mon-gs-row:last-child{ border-bottom: 0; }
.mon-gs-group{ display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: var(--text-sm); color: var(--text-primary); }
.mon-gs-badge{ gap: 3px; padding: 1px 6px; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.mon-gs-chips{ display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mon-gs-chip{
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 7px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.mon-gs-chip strong{ font-weight: 700; letter-spacing: 0.02em; }
.mon-gs-pct{ color: var(--text-muted); }
.mon-gs-row--warn .mon-gs-group{ color: var(--warning-fg); }
.mon-gs-fix{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px;
  border: 0; background: none;
  font-size: 0.75rem; font-weight: 700; color: var(--primary-ink);
  cursor: pointer;
}
.mon-gs-fix:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Semestre sans composition, sélection sans données : le remède à la place des chiffres vides ---------- */
.mon-setup{
  display: grid; justify-items: start; gap: 10px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}
.mon-setup-icon{
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary-ink);
  font-size: 1.25rem;
}
.mon-setup-title{ margin: 4px 0 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.mon-setup-text{ margin: 0; max-width: 68ch; line-height: 1.5; color: var(--text-secondary); }
.mon-setup-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ---------- Cartes ---------- */
.mon-card{
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
.mon-card-head{
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px;
  padding: 16px 18px 4px;
}
.mon-card-head--grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
}
.mon-card-head--grid > .mon-card-sub{ grid-column: 1 / -1; margin: 0; }
.mon-card-title{
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: 1rem; font-weight: 700; color: var(--text-primary);
}
.mon-card-title .bi{ color: var(--primary-ink); }
.mon-card-sub{ margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.mon-card-body{ padding: 8px 18px 18px; min-width: 0; }
.mon-graph{ width: 100%; }

.mon-details > summary{
  list-style: none;
  padding: 16px 18px;
  cursor: pointer;
  border-radius: var(--radius-lg);
}
.mon-details > summary::-webkit-details-marker{ display: none; }
.mon-details > summary::after{
  content: "\F282"; /* bi-chevron-down */
  font-family: "bootstrap-icons";
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 180ms ease;
}
.mon-details[open] > summary::after{ transform: rotate(180deg); }
.mon-details > summary:hover{ background: var(--bg-subtle); }

/* ---------- Tableaux en lecture ---------- */
.mon-table-wrap{ overflow-x: auto; }
.mon-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.mon-table th{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.mon-table th:first-child{ border-top-left-radius: var(--radius-md); }
.mon-table th:last-child{ border-top-right-radius: var(--radius-md); }
.mon-table td{ padding: 10px 12px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.mon-table tbody tr:hover td{ background: var(--bg-subtle); }
.mon-table tfoot td{ font-weight: 700; border-bottom: 0; border-top: 2px solid var(--border-strong); }
.mon-table .mon-num{ text-align: right; white-space: nowrap; }
.mon-table .mon-txt{ text-align: left; }
.mon-table del{ color: var(--text-muted); }

/* Badges de statut : couleur + icône + libellé (jamais la couleur seule) */
.mon-badge{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.mon-badge--ok{     background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.mon-badge--under{  background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.mon-badge--over{
  background: light-dark(#fff1ea, #33221a);
  color: light-dark(#8f3d1a, #f4b394);
  border-color: light-dark(#f4c7b2, #5c3a28);
}
.mon-badge--strong{ background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.mon-badge--none{   background: var(--bg-muted); color: var(--text-muted); }

/* ---------- Contrôles de cohérence : un bandeau en tête d'Équilibre, discret si tout va bien ---------- */
.mon-checks{ border-radius: var(--radius-lg); font-size: var(--text-sm); }
.mon-checks > summary{ display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.mon-checks > summary::-webkit-details-marker{ display: none; }
.mon-checks > summary > .bi{ flex: 0 0 auto; font-size: 1.05rem; }
.mon-checks--ok > summary{
  width: fit-content;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--success-ink);
  font-weight: 600;
}
.mon-checks--ok > summary::after{
  content: "\F282"; font-family: "bootstrap-icons"; font-size: 0.75rem; color: var(--text-muted);
  transition: transform 180ms ease;
}
.mon-checks--ok[open] > summary::after{ transform: rotate(180deg); }
.mon-checks--ok > summary:hover{ background: var(--bg-subtle); }
.mon-checks--ok .mon-checks-body{ gap: 0; margin-top: 8px; }
.mon-checks--ok .mon-control{ padding: 5px 8px; background: none; }
.mon-checks--ok .mon-control-label{ font-weight: 500; }
.mon-checks--warn,
.mon-checks--error{ border: 1px solid; }
.mon-checks--warn{ border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); }
.mon-checks--error{ border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.mon-checks--warn > summary,
.mon-checks--error > summary{ padding: 11px 16px; }
.mon-checks-sum{ flex: 1 1 auto; min-width: 0; }
.mon-checks-more{ display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.mon-checks-more::after{ content: "\F282"; font-family: "bootstrap-icons"; transition: transform 180ms ease; }
.mon-checks[open] .mon-checks-more::after{ transform: rotate(180deg); }
.mon-checks--warn .mon-checks-body,
.mon-checks--error .mon-checks-body{
  padding: 12px;
  border-top: 1px solid currentColor;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
}
.mon-checks-others{ margin-top: 12px; }
.mon-checks-others > summary{ padding: 4px 0; cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.mon-checks-others > .mon-control-list{ margin-top: 8px; }
.mon-fix-btn{ flex: 0 0 auto; min-height: 34px; padding: 4px 12px; font-size: var(--text-sm); white-space: nowrap; }

.mon-control-list{ list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.mon-control{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: var(--text-sm);
}
.mon-control-main{ flex: 1 1 0; min-width: 0; }
.mon-control > .bi{ font-size: 1.05rem; margin-top: 1px; }
.mon-control--ok > .bi{ color: var(--success-ink); }
.mon-control--warn > .bi{ color: var(--warning-fg); }
.mon-control--error > .bi{ color: var(--danger-ink); }
.mon-control--info > .bi{ color: var(--info-fg); }
.mon-control--warn{ background: var(--warning-bg); }
.mon-control--error{ background: var(--danger-bg); }
.mon-control-label{ font-weight: 600; color: var(--text-primary); }
.mon-control-detail{ margin-top: 2px; color: var(--text-secondary); font-size: var(--text-xs); }

/* ---------- Pastilles de code (spécialités d'un groupe, filles d'éclatement…) ---------- */
.mon-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.mon-chip{
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text-primary);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
}

/* ---------- États vides & notes ---------- */
.mon-empty{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 32px 16px;
  color: var(--text-secondary); text-align: center;
}
.mon-empty > .bi{ font-size: 2rem; color: var(--text-muted); }
.mon-help{ margin: 0 0 12px; font-size: var(--text-sm); color: var(--text-secondary); max-width: 80ch; }
.mon-note{
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0;
  font-size: var(--text-sm); color: var(--text-muted);
}

/* ---------- Paramétrage : menu en deux rubriques (la portée se lit à la place du semestre) + contenu ---------- */
.mon-sgrid{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.mon-snav{
  position: sticky; top: 0;
  display: flex; flex-direction: column;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}
.mon-snav-section{ display: flex; flex-direction: column; gap: 8px; }
.mon-snav-section + .mon-snav-section{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.mon-snav-head{ margin: 0 4px; font-size: 0.8rem; font-weight: 700; line-height: 1.35; color: var(--text-secondary); }
.mon-snav-period{ width: 100%; }
.mon-snav .mon-snav-copy{ width: 100%; justify-content: center; }
.mon-dirty-note{ margin: 0 4px; font-size: var(--text-xs); line-height: 1.4; color: var(--warning-fg); }
.mon-dirty-note:empty{ display: none; }
.mon-snav-list{ display: flex; flex-direction: column; gap: 2px; }
.mon-snav-item{
  position: relative;
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.88rem; font-weight: 500;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.mon-snav-input{ position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mon-snav-item:hover{ background: var(--bg-surface); color: var(--text-primary); }
.mon-snav-item:has(.mon-snav-input:checked){
  background: var(--bg-surface);
  color: var(--primary-ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.05);
}
.mon-snav-item:has(.mon-snav-input:focus-visible){ outline: 2px solid var(--border-focus); outline-offset: 1px; }
.mon-snav-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.mon-snav-meta{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mon-snav-meta--ok{ color: var(--success-ink); }
.mon-snav-meta--warn{ color: var(--warning-fg); }
.mon-snav-meta--todo{ color: var(--text-muted); }
/* Modifications non enregistrées : pastille sur l'entrée concernée (le texte est dans la note et la barre) */
.mon-snav.is-dirty-groups .mon-snav--groups::after,
.mon-snav.is-dirty-managers .mon-snav--managers::after,
.mon-snav.is-dirty-specs .mon-snav--specs::after,
.mon-snav.is-dirty-rules .mon-snav--rules::after{
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--warning-fg);
  vertical-align: middle;
}
.mon-smain{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mon-smain > div:empty{ display: none; }
.mon-shead{ display: flex; flex-direction: column; gap: 2px; }
.mon-s-title{ margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.mon-s-scope{ margin: 0; max-width: 80ch; font-size: var(--text-sm); color: var(--text-muted); }
.mon-s-empty{
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.mon-s-empty > .bi{ font-size: 1.1rem; color: var(--primary-ink); }
.mon-s-empty p{ flex: 1 1 320px; margin: 0; }
.mon-specs-filter{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 10px; }
.mon-specs-count{ font-size: var(--text-sm); color: var(--text-muted); }
.mon-specs-count--warn{ font-weight: 600; color: var(--warning-fg); }
/* le filtre « Sans groupe » passe par le sélecteur : la ligne de filtre native de la grille est masquée */
#mon-s-specs tr:has(> th.dash-filter){ display: none; }
@media (max-width: 899px){
  .mon-sgrid{ grid-template-columns: minmax(0, 1fr); }
  .mon-snav{ position: static; }
}

/* Barre d'enregistrement : collée au bas de la zone qui défile, visible même au milieu d'une longue grille */
.mon .mon-savebar{
  position: sticky; bottom: 0; z-index: 3;
  margin-top: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
}
.mon-dirty{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--warning-fg); }
.mon-dirty:empty{ display: none; }
.mon-dirty::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mon-set{ padding: 4px 0 8px; }
.mon-subhead{ margin: 20px 0 8px; font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.mon-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; }
.mon-btn{ display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.mon-btn:disabled{ cursor: not-allowed; }
.mon-btn-danger{ color: var(--danger-ink) !important; }
.mon-msg{ font-size: var(--text-sm); }
.mon-msg-inner{ display: inline-flex; gap: 6px; align-items: flex-start; margin-right: 12px; }
.mon-msg--success{ color: var(--success-fg); }
.mon-msg--danger{ color: var(--danger-fg); }
.mon-msg--warning{ color: var(--warning-fg); }
.mon-msg--info{ color: var(--info-fg); }

.mon-form{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--mon-gap);
}
.mon-fieldset{
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.mon-fieldset > legend{
  padding: 0 6px;
  font-size: var(--text-sm); font-weight: 700; color: var(--text-primary);
}
.mon-field{ display: flex; flex-direction: column; gap: 4px; }
.mon-field > label{ font-size: var(--text-sm); color: var(--text-secondary); }
.mon-input{ max-width: 220px; }
.mon-hint{ color: var(--text-muted); font-size: var(--text-xs); }
.mon-check label{ display: inline-flex; gap: 6px; align-items: center; font-size: var(--text-sm); cursor: pointer; }

.mon-upload{ display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 96px; }

/* ---------- DataTable (édition) ---------- */
.mon .dash-spreadsheet-container{ border: none !important; }
.mon .dash-spreadsheet-container th,
.mon .dash-spreadsheet-container td,
.mon .dash-spreadsheet-container input{ font-family: var(--font-ui) !important; }
.mon .dash-spreadsheet-container th{
  background: var(--bg-subtle) !important;
  color: var(--text-muted) !important;
  font-size: 0.72rem !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.05em !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 10px 12px !important;
}
.mon .dash-spreadsheet-container td{
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.mon .dash-spreadsheet-container td.focused{
  background: var(--primary-light) !important;
  box-shadow: inset 0 0 0 1px var(--border-focus) !important;
}
.mon .dash-spreadsheet-container td input{ color: var(--text-primary) !important; background: transparent !important; }
/* Listes déroulantes des cellules : style commun dans app.css (.dash-dropdown-cell-value-container) */
.mon .dash-spreadsheet-container input[type="checkbox"],
.mon .dash-spreadsheet-container input[type="radio"]{
  width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer;
}
.mon .dash-spreadsheet-container .dash-delete-cell{ color: var(--danger-ink) !important; cursor: pointer; }

/* ---------- Petits écrans ---------- */
@media (max-width: 767px){
  .mon-filters{ padding: 12px; gap: 12px; }
  .mon-filter, .mon-dd, .mon-dd-wide{ width: 100%; min-width: 0; }
  .mon-filter-scope{ margin-left: 0; align-items: flex-start; text-align: left; }
  .mon-filters .mon-filter{ width: auto; }
  .mon-filters .mon-filter .mon-dd{ width: 110px; min-width: 110px; }
  .mon-filters .mon-filter-scope{ justify-content: flex-start; }
  .mon-verdict{ --mon-verdict-indent: 0px; }
  .mon-stats{ gap: 10px 24px; }
  .mon-summary-hint{ display: none; }
  .mon-card-head, .mon-card-body{ padding-left: 14px; padding-right: 14px; }
  .mon-btn{ width: 100%; justify-content: center; min-height: 44px; }
  .mon-control{ flex-wrap: wrap; }
  .mon-fix-btn{ flex-basis: 100%; }
  .mon-verdict-action, .mon-rebal-closed{ flex: 1 1 100%; align-items: stretch; max-width: none; }
}
/* Mobile : les deux familles d'onglets sur deux lignes (piloter / configurer), sans défilement caché */
@media (max-width: 640px){
  .mon .admin-main-tabs.mon-main-tabs{ display: grid !important; grid-template-columns: 1fr 1fr; width: 100% !important; }
  .mon-main-tabs .admin-main-tab{ text-align: center; padding-inline: 8px !important; }
  .mon-main-tabs .mon-tab-config{ margin-left: 0 !important; }
  .mon-main-tabs .mon-tab-config::before{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .mon *{ transition: none !important; }
}

/* ---------- Guide (modale ampoule) : tableaux « terme → définition » ---------- */
.dt-help-table.mon-help-table td:first-child{ width: 32%; color: var(--text-primary); font-weight: 600; }
.dt-help-table.mon-help-table td:last-child{ width: auto; color: var(--text-secondary); font-weight: 400; }
.dt-help-table.mon-help-table tr > td:nth-child(2):not(:last-child){ width: 14%; white-space: nowrap; }

/* ---------- Fenêtres de confirmation (copie de semestre, suppression d'import) ---------- */
.mon-confirm-overlay{ z-index: 2060; }
.app-modal.mon-confirm{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(500px, 92vw);
  max-width: 500px;
  padding: 24px 24px 20px;
}
.mon-confirm-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 1.25rem;
}
.mon-confirm-icon--primary{ background: var(--primary-light); color: var(--primary-ink); }
.mon-confirm-icon--danger{ background: var(--danger-bg); color: var(--danger-ink); }
.mon-confirm-title{
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
}
.mon-confirm-body{
  display: flex; flex-direction: column; gap: 10px;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}
.mon-confirm-body p{ margin: 0; }
.mon-confirm-body strong{ color: var(--text-primary); }
.mon-confirm-flow{ display: flex; align-items: center; gap: 10px; }
.mon-confirm-flow > .bi{ color: var(--text-muted); }
.mon-pill--strong{ background: var(--primary); color: var(--on-primary); }

.mon-confirm-list{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.mon-confirm-list--inline{
  margin-top: 6px; padding: 0; border: 0; background: none;
}
.mon-confirm-warn{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--warning-fg);
}
.mon-confirm-warn strong{ color: inherit; }
.mon-confirm-warn > .bi{ margin-top: 2px; }
.mon-confirm-warn--danger{ border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.mon-confirm-hint{ color: var(--text-muted); font-size: var(--text-xs); }
.mon-confirm .mon-dd-full{ width: 100%; }  /* liste de choix dans une fenêtre : toute la largeur, libellé entier */

/* ---------- Filles d'éclatement sans règle (Paramétrage, sous le choix du semestre) ---------- */
.mon-orphans:empty{ display: none; }
.mon-orphans-card{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px 14px;
  align-items: start;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--warning-fg);
}
.mon-orphans-card > .bi{ font-size: 1.15rem; margin-top: 1px; }
.mon-orphans-text p{ margin: 0 0 8px; max-width: 75ch; line-height: 1.45; }
.mon-orphans-text strong{ color: inherit; }
.mon-orphans-card .mon-chip{ background: var(--bg-surface); color: var(--text-primary); }
.mon-orphans-actions{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767px){
  .mon-orphans-card{ grid-template-columns: auto 1fr; }
  .mon-orphans-actions{ grid-column: 1 / -1; justify-content: stretch; }
}

/* ---------- Infobulle du libellé de « Groupe » (Spécialités et poids, assets/monitoring.js) ---------- */
.mon-gtip{
  position: fixed;
  z-index: 3000;
  max-width: 420px;
  min-width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.45;
  pointer-events: none;
}
.mon-gtip[hidden]{ display: none; }
.mon-gtip p{ margin: 6px 0 0; }
.mon-gtip-head{ display: flex; gap: 8px; align-items: baseline; }
.mon-gtip-head strong{ color: var(--primary-ink); }
.mon-gtip-label{ color: var(--text-muted); }
.mon-gtip-warn{ color: var(--warning-fg); }
/* le libellé porte l'infobulle : il le signale au survol */
#mon-s-specs td[data-dash-column="group_code"] .Select-value-label{ cursor: help; }
#mon-s-specs td[data-dash-column="group_code"] .Select-value-label:hover{
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Liste de cellule ouverte vers le haut quand la place manque en bas (décalage posé par assets/monitoring.js) */
.mon .Select-menu-outer.mon-menu-up{ box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.16) !important; }

.mon-confirm-facts{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.mon-confirm-facts dt{ color: var(--text-muted); font-weight: 600; }
.mon-confirm-facts dd{ margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }

.mon-confirm-actions{
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
.mon-confirm-actions .mon-btn{ padding-inline: 16px; }

@media (max-width: 767px){
  .mon-confirm-list{ grid-template-columns: 1fr; }
  .mon-confirm-actions{ flex-direction: column-reverse; }
  .mon-confirm-actions .mon-btn{ width: 100%; justify-content: center; }
}

/* ---------- Éclatements : contrôle en direct de la répartition par mère ---------- */
.mon-split-check{ display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: var(--text-sm); }
.mon-split-list{ list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.mon-split-row{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.mon-split-row > .bi{ color: var(--success-ink); font-size: 1.05rem; }
.mon-split-row.is-over{ border-color: var(--danger-border); background: var(--danger-bg); }
.mon-split-row.is-over > .bi{ color: var(--danger-ink); }
.mon-split-main{ display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.mon-split-totals{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--text-secondary); }
.mon-split-total{ font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mon-split-total.is-over{ color: var(--danger-fg); }

/* ---------- Rééquilibrage : bouton, bulle de proposition, bandeau de simulation ---------- */
.mon-rebal-btn{ flex: 0 0 auto; white-space: nowrap; }

.mon-rebal{
  position: relative;
  margin-top: calc(var(--mon-gap) * -0.4);
  padding: 16px 18px 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary-light) 45%, var(--bg-surface));
  box-shadow: var(--shadow-md);
}
/* flèche vers le bouton « Proposer un rééquilibrage » (à droite de la synthèse) */
.mon-rebal::before{
  content: "";
  position: absolute;
  top: -9px;
  right: 104px;
  width: 16px; height: 16px;
  background: inherit;
  border-left: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
  border-top: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
  transform: rotate(45deg);
}
@media (max-width: 960px){ .mon-rebal::before{ right: 48px; } }
.mon-rebal-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mon-rebal-summary{ margin: 0 0 12px; font-size: var(--text-sm); color: var(--text-secondary); }
.mon-rebal-summary strong{ color: var(--text-primary); font-size: 1rem; }
.mon-rebal-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
}
@media (max-width: 960px){ .mon-rebal-grid{ grid-template-columns: 1fr; } }
.mon-rebal .mon-subhead{ margin-top: 0; }

.mon-rebal-list{ display: flex; flex-direction: column; gap: 8px; }
.mon-rebal-item{
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color 150ms ease, opacity 150ms ease;
}
.mon-rebal-item:hover{ border-color: var(--primary); }
.mon-rebal-item:not(:has(.mon-rebal-check:checked)){ opacity: 0.55; }
.mon-rebal-check{ width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); cursor: pointer; flex: 0 0 auto; }
.mon-rebal-action{ display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--text-primary); }
.mon-rebal-num{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  font-size: 0.75rem; font-weight: 700;
}
.mon-rebal-effect{ margin-top: 4px; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mon-rebal-type--move,
.mon-rebal-type--assign{ background: var(--info-bg) !important; color: var(--info-fg) !important; }
.mon-rebal-type--swap{ background: var(--primary-light) !important; color: var(--primary-ink) !important; }
.mon-rebal-type--split{ background: var(--warning-bg) !important; color: var(--warning-fg) !important; }
.mon-rebal-after .bi{ color: var(--text-muted); font-size: 0.8rem; }
.mon-rebal-note{ margin: 8px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.mon-rebal-foot{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.mon-rebal-foot .mon-rebal-note{ margin: 0; max-width: 60ch; }
.mon-rebal-buttons{ display: flex; gap: 10px; flex-wrap: wrap; }

.mon-sim-banner{
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border-color));
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  color: var(--text-primary);
  font-size: var(--text-sm);
}
/* Repère « simulation » porté par l'icône en pastille (plus de liseré gauche épais) */
.mon-sim-banner > .bi{
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, var(--bg-surface));
  color: var(--primary-ink);
  font-size: 1rem;
}
.mon-sim-text{ flex: 1 1 420px; }
.mon-sim-list{ margin: 6px 0 0; padding-left: 18px; color: var(--text-secondary); }
.mon-apply-done{ padding: 10px 14px; border: 1px solid var(--success-border); border-radius: var(--radius-md);
  background: var(--success-bg); }
.mon-confirm-steps{ margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--text-primary); }
/* la liste déroulante du semestre cible doit pouvoir dépasser de la fenêtre */
.app-modal.mon-confirm{ overflow: visible; }

/* Zones vides (bandeau de simulation, message d'application, alertes) : ne pas créer d'espace */
.mon-pane > div:empty{ display: none; }

/* Guide : encadré « En bref » */
.mon-help-brief{
  margin: 4px 0 14px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border-color));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary-light) 55%, var(--bg-surface));
}
.mon-help-brief h4{ margin-top: 0 !important; }
.mon-help-brief .bi{ color: var(--warning-fg); }