/* ==========================================================================
   PMACONTROL DESIGN SYSTEM — feuille unique, autonome
   ==========================================================================
   - Trois thèmes commutables via l'attribut `data-theme` sur <html> :
       v1 "Light Ops" (défaut) · v2 "Dark Ops" · v3 "Soft Neutral"
   - Toutes les classes sont préfixées `pmc-` : coexistence sans conflit avec
     Bootstrap 3 pendant la migration. À terme, l'ancienne CSS est supprimée.
   - Tous les composants consomment UNIQUEMENT les tokens --pmc-*.
     Aucune couleur, taille ou ombre en dur dans les composants ou les vues.
   - Référence visuelle : App/Webroot/design/ (Design Lab + maquettes).
   - Règles d'usage : docs/design_system.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS COMMUNS (identiques aux 3 thèmes)
   -------------------------------------------------------------------------- */
:root{
  --pmc-font-sans: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pmc-font-mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  --pmc-fs-xs: 12px;   /* méta, pills, th de table */
  --pmc-fs-sm: 12px;   /* labels, aide, breadcrumb */
  --pmc-fs-base: 14px; /* corps de texte, inputs, cellules */
  --pmc-fs-md: 15px;   /* sous-titres de section */
  --pmc-fs-lg: 17px;   /* titres de card / h3 */
  --pmc-fs-xl: 20px;   /* titres de page / h2 */
  --pmc-fs-2xl: 26px;  /* chiffres KPI, h1 */
  --pmc-lh: 1.5;

  /* Échelle d'espacement (base 4px) */
  --pmc-sp-1: 4px; --pmc-sp-2: 8px; --pmc-sp-3: 12px; --pmc-sp-4: 16px;
  --pmc-sp-5: 20px; --pmc-sp-6: 26px; --pmc-sp-7: 36px;
  --pmc-layout-gap: var(--pmc-sp-4);
  --pmc-tip-max-inline-size: clamp(16rem, 70vw, 32rem);
  --pmc-tip-scrollbar-reserve: var(--pmc-sp-5);
  --pmc-tip-offset: 7px;
  --pmc-tip-padding-block: 6px;
  --pmc-tip-padding-inline: 10px;
  --pmc-fixed-header-offset: 48px;

  /* Coexistence avec le layout Bootstrap 3 encore global : navbar 1030,
     backdrop/modal 1040/1050, popover 1060 et tooltip 1070. Ces valeurs
     pourront etre normalisees quand cette pile legacy aura disparu. */
  --pmc-z-dropdown: 1035;
  --pmc-z-tooltip: 1075;
  --pmc-z-modal: 1080;
  --pmc-z-toast: 1090;

  /* Traits et arrondis */
  --pmc-border-width: 1px;
  --pmc-focus-ring-width: 3px;
  --pmc-r-sm: 4px;     /* inputs, boutons, badges rectangulaires */
  --pmc-r-md: 6px;     /* cards, tables, alerts, dropdowns */
  --pmc-r-lg: 10px;    /* bandeaux, modales, grands panneaux */
  --pmc-r-full: 999px; /* pills, toggles, avatars */

  /* Hauteurs de contrôle */
  --pmc-h-ctl-sm: 24px; --pmc-h-ctl: 30px; --pmc-h-ctl-lg: 36px;
  --pmc-h-row: 32px;       /* ligne de table standard */
  --pmc-h-row-dense: 26px; /* ligne de table monitoring */

  /* Dimensions semantiques de la fiche Cve/show */
  --pmc-cve-detail-title-measure: 70ch;
  --pmc-cve-detail-key-column-width: calc(var(--pmc-h-row) * 7 - var(--pmc-sp-1));
  --pmc-cve-detail-raw-max-height: calc(var(--pmc-h-row) * 19 + var(--pmc-sp-3));

  /* Dimension semantique de la colonne serveur dans Binlog/liste */
  --pmc-binlog-server-column-width: calc(var(--pmc-h-row) * 7 - var(--pmc-sp-1));

  /* Mouvement */
  --pmc-transition: .18s ease;

  /* Palette ANSI Job/index, volontairement identique dans les trois thèmes.
     Les composants ne consomment que ces tokens ; les valeurs restent dans
     la fondation commune afin que les sections écran n'embarquent aucun
     aplat codé en dur. */
  --pmc-job-ansi-bg-black:#111827;
  --pmc-job-ansi-bg-red:#991b1b;
  --pmc-job-ansi-bg-green:#166534;
  --pmc-job-ansi-bg-yellow:#ca8a04;
  --pmc-job-ansi-bg-blue:#1e40af;
  --pmc-job-ansi-bg-magenta:#86198f;
  --pmc-job-ansi-bg-cyan:#155e75;
  --pmc-job-ansi-bg-white:#e5e7eb;
  --pmc-job-ansi-bg-brblack:#475569;
  --pmc-job-ansi-bg-brred:#dc2626;
  --pmc-job-ansi-bg-brgreen:#16a34a;
  --pmc-job-ansi-bg-bryellow:#facc15;
  --pmc-job-ansi-bg-brblue:#2563eb;
  --pmc-job-ansi-bg-brmagenta:#c026d3;
  --pmc-job-ansi-bg-brcyan:#0891b2;
  --pmc-job-ansi-bg-brwhite:#f8fafc;

  --pmc-job-ansi-ink-light:#ffffff;
  --pmc-job-ansi-ink-deep:#0f172a;
  --pmc-job-ansi-fg-black:#94a3b8;
  --pmc-job-ansi-fg-red:#f87171;
  --pmc-job-ansi-fg-green:#4ade80;
  --pmc-job-ansi-fg-yellow:#facc15;
  --pmc-job-ansi-fg-blue:#60a5fa;
  --pmc-job-ansi-fg-magenta:#c084fc;
  --pmc-job-ansi-fg-cyan:#22d3ee;
  --pmc-job-ansi-fg-white:var(--pmc-job-ansi-ink-light);
  --pmc-job-ansi-fg-brblack:#cbd5e1;
  --pmc-job-ansi-fg-brred:#fca5a5;
  --pmc-job-ansi-fg-brgreen:#86efac;
  --pmc-job-ansi-fg-bryellow:#fde047;
  --pmc-job-ansi-fg-brblue:#93c5fd;
  --pmc-job-ansi-fg-brmagenta:#e879f9;
  --pmc-job-ansi-fg-brcyan:#67e8f9;
  --pmc-job-ansi-fg-brwhite:var(--pmc-job-ansi-ink-light);
}

/* Le fallback 48px est EXACTEMENT la hauteur de la pmc-navbar sur une ligne
   (min-height 48, sans bordure) : le contenu est colle sous la navbar, sans
   decalage. Le JS global mesure la navbar rendue et pose l'une de ces classes
   racine quand les entrees passent sur plusieurs lignes. Les deux derniers
   paliers couvrent aussi l'accordeon mobile entier, sans style inline ni
   selecteur d'ancre global. */
:root.pmc-fixed-header-offset-2{ --pmc-fixed-header-offset:96px; }
:root.pmc-fixed-header-offset-3{ --pmc-fixed-header-offset:144px; }
:root.pmc-fixed-header-offset-4{ --pmc-fixed-header-offset:192px; }
:root.pmc-fixed-header-offset-5{ --pmc-fixed-header-offset:240px; }
:root.pmc-fixed-header-offset-6{ --pmc-fixed-header-offset:288px; }
:root.pmc-fixed-header-offset-7{ --pmc-fixed-header-offset:360px; }
:root.pmc-fixed-header-offset-8{ --pmc-fixed-header-offset:410px; }

/* --------------------------------------------------------------------------
   2. THÈMES — v1 Light Ops est le défaut (:root), v2/v3 en surcharge
   -------------------------------------------------------------------------- */
:root, :root[data-theme="v1"]{
  --pmc-scheme: light;
  --pmc-bg: #f1f5f9;            /* fond application */
  --pmc-surface: #ffffff;       /* cards, tables, formulaires */
  --pmc-surface-alt: #f8fafc;   /* lignes paires, zones repli */
  --pmc-border: #e2e8f0;
  --pmc-border-strong: #cbd5e1;
  --pmc-mpd-grid-line:var(--pmc-border);
  --pmc-text: #0f172a;
  --pmc-text-2: #475569;
  --pmc-text-3: #5b6b80;
  --pmc-primary: #2563eb;
  --pmc-primary-hover: #1d4ed8;
  --pmc-primary-soft: #dbeafe;
  --pmc-on-primary: #ffffff;
  --pmc-row-hover-bg: #dbe7f7;              /* hover de ligne bleu clair, texte noir (Design Lab §7, #5251) */
  --pmc-row-hover-text: #000000;
  --pmc-row-hover-link: var(--pmc-row-hover-text); /* lien/bouton-lien d'une ligne survolée : noir sur #dbe7f7 (#4483, #5516) */
  --pmc-grad-head: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  --pmc-grad-head-text: #ffffff;
  --pmc-grad-head-muted: rgba(255,255,255,.72);
  /* En-tête de tableau (Design Lab §7) : barre claire en dégradé, texte noir, casse normale. */
  --pmc-th-bg: linear-gradient(180deg, #ffffff 0%, #f3f4f6 60%, #e5e7eb 100%);
  --pmc-th-text: #000000;
  --pmc-th-muted: #475569;
  --pmc-th-border: var(--pmc-border-strong);
  --pmc-th-inset: inset 0 1px 0 #ffffff;
  --pmc-ok: #15803d;   --pmc-ok-soft: #dcfce7;   --pmc-ok-border: #86efac;
  --pmc-warn: #b45309; --pmc-warn-soft: #fef3c7; --pmc-warn-border: #fcd34d;
  --pmc-crit: #b91c1c; --pmc-crit-soft: #fee2e2; --pmc-crit-border: #fca5a5;
  --pmc-on-ok:#ffffff; --pmc-on-warn:#ffffff;    --pmc-on-crit:#ffffff;
  --pmc-info: #0e7490; --pmc-info-soft: #cffafe; --pmc-info-border: #67e8f9;
  --pmc-neutral: #475569; --pmc-neutral-soft: #e2e8f0;
  --pmc-focus-ring: rgba(37,99,235,.35);
  --pmc-overlay: rgba(15,23,42,.55);
  --pmc-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --pmc-shadow-md: 0 4px 12px rgba(15,23,42,.10);
  --pmc-shadow-lg: 0 10px 26px rgba(15,23,42,.18);
  --pmc-chart-1:#2563eb; --pmc-chart-2:#0e7490; --pmc-chart-3:#7c3aed;
  --pmc-chart-4:#b45309; --pmc-chart-5:#be185d; --pmc-chart-6:#059669; --pmc-chart-7:#eab308;
  --pmc-on-chart-1:#ffffff; --pmc-on-chart-2:#ffffff; --pmc-on-chart-3:#ffffff;
  --pmc-on-chart-4:#ffffff; --pmc-on-chart-5:#ffffff; --pmc-on-chart-6:#041325;
  --pmc-cat-ring: rgba(15,23,42,.12); /* liseré des aplats catégoriels (voir §palette catégorielle) */
  --pmc-sql-kw:#1d4ed8; --pmc-sql-str:#15803d; --pmc-sql-num:#b45309; --pmc-sql-fn:#7c3aed;
}

:root[data-theme="v2"]{
  --pmc-scheme: dark;
  --pmc-bg: #0b1220;
  --pmc-surface: #111a2e;
  --pmc-surface-alt: #0d1526;
  --pmc-border: #1f2b40;
  --pmc-border-strong: #33415c;
  --pmc-mpd-grid-line:var(--pmc-border-strong);
  --pmc-text: #e2e8f0;
  --pmc-text-2: #94a3b8;
  --pmc-text-3: #8293ac;
  --pmc-primary: #60a5fa;
  --pmc-primary-hover: #93c5fd;
  --pmc-primary-soft: rgba(96,165,250,.16);
  --pmc-on-primary: #041325;
  --pmc-row-hover-bg: color-mix(in srgb, var(--pmc-text) 9%, transparent); /* hover gris neutre (#4229) */
  --pmc-row-hover-link: var(--pmc-primary);
  /* Dark Ops : le noir serait illisible, dégradé sombre équivalent (Design Lab §7). */
  --pmc-th-bg: linear-gradient(180deg, color-mix(in srgb, var(--pmc-surface-alt) 82%, #ffffff 18%) 0%, var(--pmc-surface-alt) 100%);
  --pmc-th-text: var(--pmc-text);
  --pmc-th-muted: var(--pmc-text-2);
  --pmc-th-border: var(--pmc-border);
  --pmc-th-inset: inset 0 1px 0 rgba(255,255,255,.12);
  --pmc-grad-head: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  --pmc-grad-head-text: #f0f9ff;
  --pmc-grad-head-muted: rgba(240,249,255,.65);
  --pmc-ok: #4ade80;   --pmc-ok-soft: rgba(74,222,128,.13);   --pmc-ok-border: rgba(74,222,128,.4);
  --pmc-warn: #fbbf24; --pmc-warn-soft: rgba(251,191,36,.13); --pmc-warn-border: rgba(251,191,36,.4);
  --pmc-crit: #f87171; --pmc-crit-soft: rgba(248,113,113,.13);--pmc-crit-border: rgba(248,113,113,.4);
  --pmc-on-ok:#052e16; --pmc-on-warn:#422006;                  --pmc-on-crit:#450a0a;
  --pmc-info: #22d3ee; --pmc-info-soft: rgba(34,211,238,.12); --pmc-info-border: rgba(34,211,238,.4);
  --pmc-neutral: #94a3b8; --pmc-neutral-soft: rgba(148,163,184,.15);
  --pmc-focus-ring: rgba(96,165,250,.40);
  --pmc-overlay: rgba(2,6,23,.72);
  --pmc-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --pmc-shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --pmc-shadow-lg: 0 12px 30px rgba(0,0,0,.55);
  --pmc-chart-1:#60a5fa; --pmc-chart-2:#4ade80; --pmc-chart-3:#c084fc;
  --pmc-chart-4:#fbbf24; --pmc-chart-5:#fb7185; --pmc-chart-6:#22d3ee; --pmc-chart-7:#facc15;
  --pmc-on-chart-1:#041325; --pmc-on-chart-2:#041325; --pmc-on-chart-3:#041325;
  --pmc-on-chart-4:#041325; --pmc-on-chart-5:#041325; --pmc-on-chart-6:#041325;
  --pmc-cat-ring: rgba(255,255,255,.30); /* fond sombre : sépare un aplat foncé (MariaDB, ProxySQL) de sa piste */
  --pmc-sql-kw:#7dd3fc; --pmc-sql-str:#86efac; --pmc-sql-num:#fbbf24; --pmc-sql-fn:#c084fc;
}

:root[data-theme="v3"]{
  --pmc-scheme: light;
  --pmc-bg: #faf9f7;
  --pmc-surface: #ffffff;
  --pmc-surface-alt: #f5f4f1;
  --pmc-border: #e7e5e4;
  --pmc-border-strong: #d6d3d1;
  --pmc-mpd-grid-line:var(--pmc-border);
  --pmc-text: #1c1917;
  --pmc-text-2: #57534e;
  --pmc-text-3: #78716c;
  --pmc-primary: #0f766e;
  --pmc-primary-hover: #115e59;
  --pmc-primary-soft: #ccfbf1;
  --pmc-on-primary: #ffffff;
  --pmc-row-hover-bg: color-mix(in srgb, var(--pmc-text) 9%, transparent); /* hover gris neutre (#4229) */
  --pmc-row-hover-link: var(--pmc-primary);
  --pmc-grad-head: linear-gradient(135deg, #134e4a 0%, #0f766e 100%);
  --pmc-grad-head-text: #ffffff;
  --pmc-grad-head-muted: rgba(255,255,255,.72);
  --pmc-ok: #166534;   --pmc-ok-soft: #dcfce7;   --pmc-ok-border: #86efac;
  --pmc-warn: #b45309; --pmc-warn-soft: #fef3c7; --pmc-warn-border: #fcd34d;
  --pmc-crit: #b91c1c; --pmc-crit-soft: #fee2e2; --pmc-crit-border: #fca5a5;
  --pmc-on-ok:#ffffff; --pmc-on-warn:#ffffff;    --pmc-on-crit:#ffffff;
  --pmc-info: #0369a1; --pmc-info-soft: #e0f2fe; --pmc-info-border: #7dd3fc;
  --pmc-neutral: #57534e; --pmc-neutral-soft: #e7e5e4;
  --pmc-focus-ring: rgba(15,118,110,.30);
  --pmc-overlay: rgba(28,25,23,.50);
  --pmc-shadow-sm: 0 1px 3px rgba(28,25,23,.05);
  --pmc-shadow-md: 0 6px 18px rgba(28,25,23,.07);
  --pmc-shadow-lg: 0 14px 34px rgba(28,25,23,.12);
  --pmc-r-sm: 6px; --pmc-r-md: 10px; --pmc-r-lg: 14px; /* arrondis plus généreux */
  --pmc-chart-1:#0f766e; --pmc-chart-2:#0369a1; --pmc-chart-3:#7c3aed;
  --pmc-chart-4:#b45309; --pmc-chart-5:#be185d; --pmc-chart-6:#166534; --pmc-chart-7:#eab308;
  --pmc-on-chart-1:#ffffff; --pmc-on-chart-2:#ffffff; --pmc-on-chart-3:#ffffff;
  --pmc-on-chart-4:#ffffff; --pmc-on-chart-5:#ffffff; --pmc-on-chart-6:#ffffff;
  --pmc-cat-ring: rgba(28,25,23,.12);
  --pmc-sql-kw:#0f766e; --pmc-sql-str:#166534; --pmc-sql-num:#b45309; --pmc-sql-fn:#7c3aed;
}

/* --------------------------------------------------------------------------
   3. BASE — scopée sur .pmc-app pour ne pas toucher les écrans non migrés.
   Chaque écran migré enveloppe son contenu dans <div class="pmc-app">.
   -------------------------------------------------------------------------- */
.pmc-app{
  background:var(--pmc-bg); color:var(--pmc-text);
  /* Le thème actif est aussi celui des affordances natives (calendrier des
     <input type="date|time">, flèches des <select>, scrollbars) : sans
     color-scheme, Chromium/WebKit gardent leur UA clair en Dark Ops (#4468). */
  color-scheme:var(--pmc-scheme);
  font-family:var(--pmc-font-sans); font-size:var(--pmc-fs-base); line-height:var(--pmc-lh);
  transition:background var(--pmc-transition), color var(--pmc-transition);
}
.pmc-app *, .pmc-app *::before, .pmc-app *::after{ box-sizing:border-box; }
.pmc-app h1,.pmc-app h2,.pmc-app h3,.pmc-app h4{ margin:0 0 var(--pmc-sp-3); line-height:1.25; }
.pmc-app h2{ font-size:var(--pmc-fs-xl); }
.pmc-app h3{ font-size:var(--pmc-fs-lg); }
/* Les liens ordinaires portent la couleur primaire et le soulignement. Une
   ancre `.pmc-btn` reste un bouton : sa variante possede couleur et etats. */
.pmc-app a:not(.pmc-btn){ color:var(--pmc-primary); text-decoration:none; }
.pmc-app a:not(.pmc-btn):hover{ color:var(--pmc-primary-hover); text-decoration:underline; }
/* Le composant code generique possede ses deux couleurs : il ne doit pas
   heriter du premier plan rose du stylesheet Bootstrap historique. */
.pmc-app code{
  font-family:var(--pmc-font-mono); font-size:12px; color:var(--pmc-text); background:var(--pmc-surface-alt);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm); padding:1px 5px;
}
.pmc-app :focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pmc-focus-ring); border-radius:var(--pmc-r-sm); }
@media (prefers-reduced-motion: reduce){
  .pmc-app *{ transition:none !important; animation:none !important; }
}

/* --------------------------------------------------------------------------
   4. GRILLE & UTILITAIRES RESPONSIVE (CSS grid natif — pas de Bootstrap)
   Breakpoints : 640 / 768 / 1024 / 1280
   -------------------------------------------------------------------------- */
.pmc-wrap{
  width:100%; margin:0; padding:var(--pmc-sp-4); display:grid; gap:var(--pmc-layout-gap);
  grid-template-columns:minmax(0,1fr);
}
.pmc-grid{ display:grid; gap:var(--pmc-layout-gap); grid-template-columns:minmax(0,1fr); }
.pmc-grid > *{ min-width:0; }
.pmc-wrap > *, .pmc-stack > *{ min-width:0; }
.pmc-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pmc-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pmc-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.pmc-grid-fit{ grid-template-columns:repeat(auto-fit,minmax(var(--pmc-fit,280px),1fr)); }
.pmc-flex{ display:flex; gap:var(--pmc-sp-3); align-items:center; flex-wrap:wrap; }
.pmc-flex-end{ justify-content:flex-end; }
.pmc-grow{ flex:1; }
.pmc-right{ margin-left:auto; }
.pmc-stack{
  display:grid; gap:var(--pmc-layout-gap); align-content:start;
  grid-template-columns:minmax(0,1fr);
}
.pmc-hidden{ display:none !important; }
.pmc-app .pmc-anchor-target{ scroll-margin-top:var(--pmc-fixed-header-offset); }
@media (max-width:1024px){
  .pmc-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pmc-grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .pmc-grid-2,.pmc-grid-3,.pmc-grid-4{ grid-template-columns:minmax(0,1fr); }
  .pmc-wrap{ padding:var(--pmc-sp-3); }
}

/* --------------------------------------------------------------------------
   5. NAVBAR APPLICATION
   -------------------------------------------------------------------------- */
.pmc-navbar{
  display:flex; align-items:center; gap:var(--pmc-sp-4);
  background:var(--pmc-grad-head); color:var(--pmc-grad-head-text);
  padding:0 var(--pmc-sp-4); border-radius:var(--pmc-r-md); min-height:48px; flex-wrap:wrap;
}
.pmc-navbar .pmc-nav-brand{ font-weight:700; font-size:var(--pmc-fs-md); color:var(--pmc-grad-head-text); }
.pmc-navbar .pmc-nav-brand .pmc-ver{
  font-size:var(--pmc-fs-xs); font-weight:500; background:rgba(255,255,255,.16);
  border-radius:var(--pmc-r-full); padding:2px 8px; margin-left:6px;
}
.pmc-navbar ul{ display:flex; gap:2px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.pmc-navbar li a{
  display:block; color:var(--pmc-grad-head-muted); padding:14px 12px;
  font-size:var(--pmc-fs-sm); font-weight:500;
  border-bottom:2px solid transparent;
  /* Aucune transition dans le menu : bascule d'etat instantanee, zero cout
     d'animation sur les petites machines. */
  transition:none;
  text-decoration:none;
}
.pmc-navbar li a:hover{ color:var(--pmc-grad-head-text); background:rgba(255,255,255,.16); text-decoration:none; }
.pmc-navbar li a.pmc-active{ color:var(--pmc-grad-head-text); border-bottom-color:var(--pmc-primary); background:rgba(255,255,255,.09); }
.pmc-navbar .pmc-nav-end{ margin-left:auto; }
.pmc-nav-burger{
  display:none; margin-left:auto; background:rgba(255,255,255,.12); border:0;
  color:var(--pmc-grad-head-text); border-radius:var(--pmc-r-sm);
  width:38px; height:38px; font-size:16px; cursor:pointer;
}

/* ----- Navbar chrome global (Menu/show, epic #3053) ----------------------
   La navbar applicative est fixee en haut de page sur TOUS les ecrans
   (migres ou non) ; le decalage du contenu passe par le meme token
   --pmc-fixed-header-offset que les ancres, ajuste par design-system.js
   quand le menu passe sur plusieurs lignes. */
.pmc-navbar-fixed{
  position:fixed; top:0; left:0; right:0;
  z-index:1030; /* aligne sur la navbar Bootstrap 3 encore presente ailleurs */
  border-radius:0;
}
body:has(.pmc-navbar-fixed){ padding-top:var(--pmc-fixed-header-offset); }
/* Fond applicatif des ecrans migres : couvre la marge blanche autour des
   vues pmc- (le body legacy reste blanc tant que l'ecran n'est pas migre). */
body:has(.pmc-app){ background:var(--pmc-bg); }

.pmc-navbar .pmc-nav-brand{
  display:flex; align-items:center; gap:var(--pmc-sp-2); text-decoration:none;
}
.pmc-navbar a.pmc-nav-brand:hover{ color:var(--pmc-grad-head-text); text-decoration:none; }
.pmc-navbar .pmc-nav-logo{ display:block; width:20px; height:20px; }
/* Marque sur deux lignes DANS les 48px du menu : « PmaControl » au-dessus,
   fil d'ariane compact dessous (transmis par default.layout via headerPma).
   La hauteur du menu ne change pas. */
.pmc-navbar .pmc-nav-brand-box{
  display:flex; flex-direction:column; justify-content:center;
  gap:2px; min-width:0;
}
.pmc-navbar .pmc-nav-crumbs{
  max-width:36vw;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:var(--pmc-fs-xs); line-height:1.2;
  color:var(--pmc-grad-head-muted);
}
.pmc-navbar .pmc-nav-crumbs a{ color:var(--pmc-grad-head-muted); }
.pmc-navbar .pmc-nav-crumbs a:hover{ color:var(--pmc-grad-head-text); }
.pmc-navbar .pmc-nav-list > li{ position:relative; }
.pmc-navbar .pmc-nav-drop-toggle::after{
  content:"\25BE"; /* ▾ */
  margin-left:6px; font-size:10px; opacity:.7;
}

/* Panneaux deroulants : surface claire/sombre par tokens, ancres sous
   l'entree parente, sous-menus en flyout a droite. */
.pmc-navbar ul.pmc-nav-menu{
  display:none; position:absolute; top:100%; left:0;
  width:240px; margin:0; padding:var(--pmc-sp-1) 0;
  flex-direction:column; gap:0;
  background:var(--pmc-surface); color:var(--pmc-text);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md);
  box-shadow:var(--pmc-shadow-md); z-index:var(--pmc-z-dropdown);
  list-style:none;
}
.pmc-navbar li.pmc-open > ul.pmc-nav-menu{ display:block; }
.pmc-navbar a:focus-visible,
.pmc-navbar .pmc-nav-burger:focus-visible{
  outline:2px solid var(--pmc-focus-ring); outline-offset:-2px;
}
.pmc-navbar .pmc-nav-menu li{ position:relative; }
.pmc-navbar .pmc-nav-menu li a{
  display:block; padding:8px 14px; border:0;
  color:var(--pmc-text); font-size:var(--pmc-fs-sm); font-weight:500;
}
.pmc-navbar .pmc-nav-menu li a:hover{ background:var(--pmc-neutral-soft); color:var(--pmc-text); }
.pmc-navbar .pmc-nav-menu li a.pmc-active{
  background:var(--pmc-primary-soft); color:var(--pmc-primary); border:0;
}
.pmc-navbar .pmc-nav-menu .pmc-nav-drop-toggle{ position:relative; padding-right:28px; }
.pmc-navbar .pmc-nav-menu .pmc-nav-drop-toggle::after{
  content:"\25B8"; /* ▸ */
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  margin-left:0;
}
/* Sous-menus en flyout a droite de leur ligne (plein ecran), comme l'ancien
   dropdown-submenu : li relatif + panneau ancre a left:100%. Les panneaux ne
   defilent pas en desktop (un panneau tres long depasse le viewport, comme
   avant) — l'accordeon defilant reste le comportement mobile. */
.pmc-navbar .pmc-nav-menu ul.pmc-nav-menu{
  top:calc(-1 * var(--pmc-sp-1) - 1px); left:100%;
}

/* Icone de menu (#3990 : SVG Lucide inline de menu.icon, currentColor, sans
   style inline) : colonne fixe a gauche du libelle, taille et couleur
   normalisees ; une valeur legacy est convertie a la volee par la vue. */
.pmc-navbar .pmc-nav-ico{
  display:inline-block; width:18px; margin-right:var(--pmc-sp-2);
  text-align:center; font-size:var(--pmc-fs-xs); line-height:1; opacity:.85;
}
.pmc-navbar .pmc-nav-ico svg{ width:14px; height:14px; vertical-align:-2px; }
.pmc-navbar .pmc-nav-ico img{ max-width:14px; max-height:14px; vertical-align:middle; }
/* #4634 — badges d'alarmes actives a cote de l'entree Alarms (et de son
   parent) : nombre + mini-icone. Fonds et bordures identiques au composant
   « Alertes & notifications » du Design Lab (.alert-crit / .alert-warn),
   dans les 3 themes. */
.pmc-navbar .pmc-nav-badges{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; vertical-align:middle; }
.pmc-navbar .pmc-nav-badge{
  display:inline-flex; align-items:center; gap:3px; height:16px; padding:0 6px;
  border:1px solid; border-radius:8px; font-size:11px; font-weight:700; line-height:1;
}
.pmc-navbar .pmc-nav-badge svg{ width:10px; height:10px; flex:0 0 auto; }
.pmc-navbar .pmc-nav-badge-crit{ color:#fff; background:#732e03; border-color:#530901; }
.pmc-navbar .pmc-nav-badge-warn{ color:#000; background:#efa700; border-color:#ea8e00; }

/* Entree verrouillee par la licence (upsell) */
.pmc-navbar .pmc-nav-lock{ vertical-align:-1px; opacity:.7; }

/* Sous-menu langues : drapeau emoji + code + libelle */
.pmc-navbar .pmc-nav-lang-emoji{
  display:inline-block; width:20px; margin-right:4px; text-align:center; line-height:1;
}
.pmc-navbar .pmc-nav-lang-code{
  display:inline-block; min-width:24px; margin-left:4px;
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs);
  opacity:.75; text-transform:uppercase;
}
.pmc-navbar .pmc-nav-menu .pmc-nav-lang-item{
  display:flex; align-items:center; gap:var(--pmc-sp-2);
}
.pmc-navbar .pmc-nav-menu .pmc-nav-lang-item .pmc-nav-lang-code{ margin-left:0; }
.pmc-navbar .pmc-nav-menu .pmc-nav-lang-item .pmc-nav-lang-name{ flex:1; }

/* --------------------------------------------------------------------------
   6. ENTÊTE DE PAGE (bandeau dégradé : titre, fil d'ariane, actions)
   -------------------------------------------------------------------------- */
.pmc-page-head{
  background:var(--pmc-grad-head); color:var(--pmc-grad-head-text);
  border-radius:var(--pmc-r-lg); padding:var(--pmc-sp-5); box-shadow:var(--pmc-shadow-lg);
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--pmc-sp-4); flex-wrap:wrap;
}
.pmc-page-head h1{ margin:0; font-size:var(--pmc-fs-xl); font-weight:700; }
.pmc-page-head .pmc-crumbs{ font-size:var(--pmc-fs-sm); color:var(--pmc-grad-head-muted); margin-bottom:var(--pmc-sp-2); }
.pmc-page-head .pmc-crumbs a{ color:var(--pmc-grad-head-muted); }
.pmc-page-head .pmc-crumbs a:hover{ color:var(--pmc-grad-head-text); }
.pmc-page-head .pmc-crumbs .pmc-sep{ margin:0 6px; opacity:.5; }
.pmc-page-head .pmc-meta{
  font-size:var(--pmc-fs-sm); color:var(--pmc-grad-head-muted); margin-top:var(--pmc-sp-1);
  display:flex; gap:var(--pmc-sp-3); flex-wrap:wrap; align-items:center;
}
.pmc-page-head .pmc-meta code{ background:rgba(255,255,255,.12); border-color:transparent; color:var(--pmc-grad-head-text); }
.pmc-page-head .pmc-actions{ display:flex; gap:var(--pmc-sp-2); }

/* ----- Chrome de page du layout (default.layout.php, epic #3053) ---------
   Le bandeau du layout garde l'id historique "glial-title" : les ecrans
   migres qui rendent leur propre pmc-page-head le masquent deja via
   `#page:has(.pmc-<ecran>) > #glial-title`. Le selecteur id+classe surcharge
   les regles legacy de title.css (bordure pointillee, marges) tant que ce
   fichier est charge. */
/* L'ariane vit dans la navbar (petite ligne sous la marque, cf. section 5) :
   le layout ne rend plus de bandeau #glial-title — les anciennes regles par
   ecran `#page:has(.pmc-<ecran>) > #glial-title{display:none}` restent
   inertes plus bas (chacune appartient a l'historique de son ecran) — et les
   pmc-page-head des ecrans migres ne repetent plus leur propre ariane. */
.pmc-app .pmc-page-head .pmc-crumbs{ display:none; }
/* Conteneur du contenu : remplace l'ancien wrapper inline
   `style="padding:0 15px 15px 15px"`. */
/* #6425 — une seule marge de page et un seul espace entre les blocs.
   La licence, la capacité et les messages flash partagent la grille des vues.
   Les scripts et le conteneur de capacité vide ne créent aucune piste. */
.pmc-layout-content{
  padding:var(--pmc-sp-4); display:grid; gap:var(--pmc-layout-gap);
  grid-template-columns:minmax(0,1fr); align-content:start;
}
.pmc-layout-content > :not(.pmc-sr-only){ min-width:0; margin-block:0; }
.pmc-layout-content > :is(script, style, link, br),
.pmc-layout-content > #local-capacity-banner:not(:has(> .pmc-alert)){ display:none; }
.pmc-layout-content > .pmc-app:not(.pmc-user-connection):not(.pmc-user-lost-password):not(.pmc-user-password-recover) > .pmc-wrap{
  padding:0; gap:var(--pmc-layout-gap);
}
/* Les coquilles embarquées héritent déjà du retrait de leur hôte. */
.pmc-layout-content .pmc-app .pmc-app > .pmc-wrap{ padding:0; }
/* Le gap des conteneurs possède la séparation des cartes/messages ; les
   marges historiques des composants ne doivent pas s'y additionner.
   Les espaces propres aux champs, contrôles et alertes flush restent locaux. */
.pmc-layout-content :is(.pmc-wrap, .pmc-grid, .pmc-stack) > :is(.pmc-card, .pmc-table-card, .pmc-page-head, .pmc-alert, .pmc-flash, .pmc-hint, .sm-card){
  margin-block:0;
}
.pmc-layout-content > #local-capacity-banner > .pmc-alert{ margin-block:0; }

/* --------------------------------------------------------------------------
   7. BOUTONS
   -------------------------------------------------------------------------- */
.pmc-btn{
  --pmc-btn-text:var(--pmc-text);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--pmc-h-ctl); padding:0 var(--pmc-sp-4);
  font:600 var(--pmc-fs-sm)/1 var(--pmc-font-sans);
  border-radius:var(--pmc-r-sm); border:1px solid transparent; cursor:pointer;
  transition:all var(--pmc-transition); text-decoration:none; white-space:nowrap;
}
.pmc-app a.pmc-btn{
  color:var(--pmc-btn-text); text-decoration:none;
}
.pmc-btn:disabled{ opacity:.45; cursor:not-allowed; }
.pmc-btn-primary{ --pmc-btn-text:var(--pmc-on-primary); background:var(--pmc-primary); color:var(--pmc-on-primary); }
.pmc-btn-primary:hover:not(:disabled){ background:var(--pmc-primary-hover); color:var(--pmc-on-primary); text-decoration:none; }
.pmc-btn-default{ --pmc-btn-text:var(--pmc-text); background:var(--pmc-surface); color:var(--pmc-text); border-color:var(--pmc-border-strong); }
.pmc-btn-default:hover:not(:disabled){ background:var(--pmc-surface-alt); border-color:var(--pmc-text-3); color:var(--pmc-text); text-decoration:none; }
.pmc-btn-ghost{ --pmc-btn-text:var(--pmc-primary); background:transparent; color:var(--pmc-primary); }
.pmc-btn-ghost:hover:not(:disabled){ background:var(--pmc-primary-soft); text-decoration:none; }
/* Un badge d'etat rendu dans un lien garde sa couleur d'etat ; le soulignement
   vient de l'ancetre <a>, qu'un enfant ne peut pas annuler. */
.pmc-app a:has(> .pmc-badge):hover{ text-decoration:none; }
.pmc-btn-success{ --pmc-btn-text:var(--pmc-on-ok); background:var(--pmc-ok); color:var(--pmc-on-ok); }
.pmc-btn-warning{ --pmc-btn-text:var(--pmc-on-warn); background:var(--pmc-warn); color:var(--pmc-on-warn); }
.pmc-btn-danger{ --pmc-btn-text:var(--pmc-on-crit); background:var(--pmc-crit); color:var(--pmc-on-crit); }
.pmc-btn-success:hover:not(:disabled),.pmc-btn-warning:hover:not(:disabled),.pmc-btn-danger:hover:not(:disabled){ filter:brightness(1.12); }
.pmc-btn-sm{ height:var(--pmc-h-ctl-sm); padding:0 var(--pmc-sp-2); font-size:var(--pmc-fs-xs); }
.pmc-btn-lg{ height:var(--pmc-h-ctl-lg); padding:0 var(--pmc-sp-5); font-size:var(--pmc-fs-base); }
.pmc-btn-icon{ width:var(--pmc-h-ctl); padding:0; }
/* Bouton posé sur un fond dégradé (page-head, card-head) */
.pmc-btn-on-grad{ --pmc-btn-text:var(--pmc-grad-head-text); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:var(--pmc-grad-head-text); }
.pmc-btn-on-grad:hover:not(:disabled){ background:rgba(255,255,255,.2); color:var(--pmc-grad-head-text); text-decoration:none; }
.pmc-btn .pmc-spinner{
  width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:pmc-spin .7s linear infinite;
}
@keyframes pmc-spin{ to{ transform:rotate(360deg); } }
.pmc-btn-group{ display:inline-flex; }
.pmc-btn-group .pmc-btn{ border-radius:0; margin-left:-1px; }
.pmc-btn-group .pmc-btn:first-child{ border-radius:var(--pmc-r-sm) 0 0 var(--pmc-r-sm); margin-left:0; }
.pmc-btn-group .pmc-btn:last-child{ border-radius:0 var(--pmc-r-sm) var(--pmc-r-sm) 0; }

/* --------------------------------------------------------------------------
   8. BADGES & PILLS DE STATUT
   -------------------------------------------------------------------------- */
.pmc-badge{
  display:inline-flex; align-items:center; gap:5px;
  font:600 var(--pmc-fs-xs)/1 var(--pmc-font-sans);
  padding:4px 9px; border-radius:var(--pmc-r-full); border:1px solid transparent;
}
.pmc-badge .pmc-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.pmc-badge-ok{ color:var(--pmc-ok); background:var(--pmc-ok-soft); border-color:var(--pmc-ok-border); }
.pmc-badge-warn{ color:var(--pmc-warn); background:var(--pmc-warn-soft); border-color:var(--pmc-warn-border); }
.pmc-badge-crit{ color:var(--pmc-crit); background:var(--pmc-crit-soft); border-color:var(--pmc-crit-border); }
.pmc-badge-info{ color:var(--pmc-info); background:var(--pmc-info-soft); border-color:var(--pmc-info-border); }
.pmc-badge-neutral{ color:var(--pmc-neutral); background:var(--pmc-neutral-soft); }
.pmc-badge-count{
  background:var(--pmc-primary); color:var(--pmc-on-primary);
  border-radius:var(--pmc-r-full); padding:2px 8px; font-size:var(--pmc-fs-xs); font-weight:700;
}
.pmc-badge.pmc-pulse .pmc-dot{ animation:pmc-pulse 1.2s ease infinite; }
/* Badges posés sur une barre en dégradé bleu (pmc-card-head, pmc-page-head, pmc-modal-head) — Design Lab §3/§7 :
   palette Dark Ops (texte vif sur fond translucide) figée, identique dans les 3 thèmes, pour rester lisible
   sur le bleu foncé. Les en-têtes d'état (crit/warn/ok) et la variante plain gardent les badges standards. */
:is(.pmc-card-head, .pmc-page-head, .pmc-modal-head):not(.pmc-card-head-plain):not(.pmc-card-head-crit):not(.pmc-card-head-warn):not(.pmc-card-head-ok) .pmc-badge-ok{ color:#4ade80; background:rgba(74,222,128,.13); border-color:rgba(74,222,128,.4); }
:is(.pmc-card-head, .pmc-page-head, .pmc-modal-head):not(.pmc-card-head-plain):not(.pmc-card-head-crit):not(.pmc-card-head-warn):not(.pmc-card-head-ok) .pmc-badge-warn{ color:#fbbf24; background:rgba(251,191,36,.13); border-color:rgba(251,191,36,.4); }
:is(.pmc-card-head, .pmc-page-head, .pmc-modal-head):not(.pmc-card-head-plain):not(.pmc-card-head-crit):not(.pmc-card-head-warn):not(.pmc-card-head-ok) .pmc-badge-crit{ color:#f87171; background:rgba(248,113,113,.13); border-color:rgba(248,113,113,.4); }
:is(.pmc-card-head, .pmc-page-head, .pmc-modal-head):not(.pmc-card-head-plain):not(.pmc-card-head-crit):not(.pmc-card-head-warn):not(.pmc-card-head-ok) .pmc-badge-info{ color:#22d3ee; background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.4); }
:is(.pmc-card-head, .pmc-page-head, .pmc-modal-head):not(.pmc-card-head-plain):not(.pmc-card-head-crit):not(.pmc-card-head-warn):not(.pmc-card-head-ok) .pmc-badge-neutral{ color:#94a3b8; background:rgba(148,163,184,.15); border-color:rgba(148,163,184,.4); }
@keyframes pmc-pulse{ 50%{ opacity:.25; } }

/* Identite serveur partagee : badge d'environnement, nom et endpoint. Les
   vues legacy conservent Display::srv(); les ecrans migres utilisent ce
   composant afin de ne jamais reinjecter la typographie Bootstrap. */
.pmc-app .pmc-server-identity{
  display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:var(--pmc-sp-1);
  min-width:0; max-width:100%; color:inherit;
}
.pmc-app .pmc-server-identity > .pmc-badge{ flex:none; }
.pmc-app .pmc-server-identity-name{
  min-width:0; color:inherit; font-weight:600; overflow-wrap:anywhere;
}
.pmc-app .pmc-server-identity-endpoint{
  color:inherit; font:400 var(--pmc-fs-xs)/var(--pmc-lh) var(--pmc-font-mono);
  overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   9. ALERTES (reprend le design setFlash existant) & TOAST
   -------------------------------------------------------------------------- */
.pmc-alert{
  display:flex; gap:var(--pmc-sp-3); align-items:flex-start;
  border:1px solid; border-left-width:4px; border-radius:var(--pmc-r-md);
  padding:var(--pmc-sp-3) var(--pmc-sp-4); margin-bottom:var(--pmc-layout-gap);
  font-size:var(--pmc-fs-sm); box-shadow:var(--pmc-shadow-md);
}
.pmc-alert strong{ display:block; font-size:var(--pmc-fs-base); }
/* Fonds saturés identiques dans les 3 thèmes (héritage setFlash) */
.pmc-alert-ok{   color:#fff; background:#4c7141; border-color:#2f4728; }
.pmc-alert-info{ color:#fff; background:#31648c; border-color:#1b3a57; }
.pmc-alert-warn{ color:#000; background:#efa700; border-color:#ea8e00; }
.pmc-alert-crit{ color:#fff; background:#732e03; border-color:#530901; }
.pmc-alert a{ color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
/* #4539 — `.pmc-app a:not(.pmc-btn)` (0,2,1) l'emportait sur `.pmc-alert a` (0,1,1) :
   le lien ressortait bleu sur les fonds satures de l'alerte. On reaffirme la
   couleur heritee avec la meme specificite, hover compris. */
.pmc-app .pmc-alert a:not(.pmc-btn), .pmc-app .pmc-alert a:not(.pmc-btn):hover{ color:inherit; text-decoration:underline; }
/* Les fonds d'alerte sont satures : le fond clair de `.pmc-app code` y devient
   illisible. On neutralise le fond du code a l'interieur d'une alerte. */
.pmc-alert code{ background:transparent; border-color:currentColor; color:inherit; }

/* #4539 — Alerte « flush » : une alerte posee a l'interieur d'un panneau, entre
   l'entete et le tableau (ex. garde-fou de fraicheur sur Serveurs). Elle prend
   toute la largeur et colle aux bords du panneau : pas de coins arrondis, pas de
   bordure, pas d'ombre, et aucune marge en dessous — le thead suit directement.
   Seul le fond de couleur porte le niveau (ok/info/warn/crit). */
.pmc-alert-flush{
  margin:0; border:0; border-radius:0; box-shadow:none;
}

/* Alerte globale de licence : elle partage la grille du layout avec le
   contenu, et son formulaire POST conserve le bouton de fermeture accessible
   au clavier sans réduire la zone tactile. */
.pmc-license-banner{
  align-items:center; margin:0;
}
/* Les bandeaux globaux partagent le même padding intérieur vertical. */
.pmc-license-banner,
.pmc-capacity-banner{
  padding-top:var(--pmc-sp-1); padding-bottom:var(--pmc-sp-1);
}
.pmc-license-banner-content{ flex:1 1 auto; min-width:0; }
.pmc-license-banner-dismiss-form{ flex:0 0 auto; margin-inline-start:auto; }
.pmc-license-banner-close,
.pmc-capacity-banner-close{
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; color:inherit; background:transparent;
  border:1px solid transparent; border-radius:var(--pmc-r-sm); cursor:pointer;
  font:600 var(--pmc-fs-xl)/1 var(--pmc-font-sans);
}
.pmc-license-banner-close:hover,
.pmc-capacity-banner-close:hover{ opacity:.72; }
.pmc-license-banner-close:focus-visible,
.pmc-capacity-banner-close:focus-visible{
  outline:none; border-color:currentColor; box-shadow:0 0 0 3px var(--pmc-focus-ring);
}

/* La liste ne doit pas ajouter une marge uniquement sous le bandeau. */
.pmc-capacity-banner{ align-items:center; }
.pmc-capacity-banner-content{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:var(--pmc-sp-3);
  overflow-wrap:anywhere;
}
.pmc-capacity-banner-content > ul{
  flex:1 1 auto; min-width:0; margin-block:0; padding-inline-start:var(--pmc-sp-5);
}
.pmc-capacity-banner-close{ flex:0 0 auto; }
@media (max-width:768px){
  .pmc-capacity-banner{ align-items:flex-start; }
  .pmc-capacity-banner-content{ display:block; }
  .pmc-capacity-banner-content > ul{ margin-block:var(--pmc-sp-2); }
}

/* #4330 / #4112 — Messages flash (set_flash / App/element/flash.php) : le
   composant « Alertes & notifications » du Design Lab (.alert) tel quel — fond
   saturé uni, bordure dans la teinte foncée de la famille avec accent gauche
   4px, icône à gauche, fermeture « Fermer ✕ » en texte capitales posée sur le
   même fond (aucun bloc latéral d'une autre couleur), rayon 6px + ombre,
   identique dans les 3 thèmes. La teinte notice (bleue) : #31648c / #1b3a57. */
.pmc-flash{
  --pmc-flash-bg:#31648c; --pmc-flash-side:#1b3a57; --pmc-flash-text:#fff;
  display:flex; gap:var(--pmc-sp-3); align-items:flex-start; width:min(1000px, 100%);
  margin:var(--pmc-sp-4) auto var(--pmc-sp-3);
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  color:var(--pmc-flash-text); background:var(--pmc-flash-bg);
  border:1px solid var(--pmc-flash-side); border-left-width:4px; border-radius:6px;
  box-shadow:var(--pmc-shadow-md); font-size:var(--pmc-fs-sm);
}
.pmc-flash-ok{   --pmc-flash-bg:#4c7141; --pmc-flash-side:#2f4728; --pmc-flash-text:#fff; }
.pmc-flash-info{ --pmc-flash-bg:#31648c; --pmc-flash-side:#1b3a57; --pmc-flash-text:#fff; }
.pmc-flash-warn{ --pmc-flash-bg:#efa700; --pmc-flash-side:#ea8e00; --pmc-flash-text:#000; }
.pmc-flash-crit{ --pmc-flash-bg:#732e03; --pmc-flash-side:#530901; --pmc-flash-text:#fff; }
.pmc-flash-ico{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-top:2px; color:inherit;
}
.pmc-flash-body{ flex:1 1 auto; min-width:0; }
.pmc-flash-title{ display:block; font-size:var(--pmc-fs-base); margin-bottom:var(--pmc-sp-1); }
.pmc-flash-msg{ overflow-wrap:anywhere; }
.pmc-flash a{ color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.pmc-flash code{ background:transparent; border-color:currentColor; color:inherit; }
.pmc-flash table td, .pmc-flash table th{ border:1px solid currentColor; padding:2px 6px; }
.pmc-flash-close{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:var(--pmc-sp-2); align-self:center;
  margin-left:auto; padding:0; border:0; background:none; color:inherit; cursor:pointer;
  font:600 var(--pmc-fs-xs)/1 var(--pmc-font-sans); letter-spacing:2px; text-transform:uppercase; opacity:.85;
}
.pmc-flash-close-x{ font-size:var(--pmc-fs-base); letter-spacing:0; }
.pmc-flash-close:hover{ opacity:1; }
.pmc-flash-close:focus-visible{ outline:none; opacity:1; box-shadow:0 0 0 3px var(--pmc-focus-ring); border-radius:3px; }
.pmc-flash.pmc-flash-leaving{ opacity:0; transition:opacity .25s ease; }
@media (max-width:768px){
  .pmc-flash{ flex-wrap:wrap; margin-left:var(--pmc-sp-3); margin-right:var(--pmc-sp-3); width:auto; }
  .pmc-flash-close{ width:100%; justify-content:center; margin-left:0; padding-top:var(--pmc-sp-2); }
}

.pmc-alert .pmc-close{
  margin-left:auto; background:none; border:0; color:inherit; cursor:pointer;
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:2px;
}
.pmc-toast{
  position:fixed; bottom:var(--pmc-sp-5); right:var(--pmc-sp-5); z-index:var(--pmc-z-toast);
  background:var(--pmc-surface); color:var(--pmc-text); border:1px solid var(--pmc-border);
  border-left:4px solid var(--pmc-ok); border-radius:var(--pmc-r-md); box-shadow:var(--pmc-shadow-lg);
  padding:var(--pmc-sp-3) var(--pmc-sp-4); min-width:260px; max-width:90vw;
  transform:translateY(16px); opacity:0; pointer-events:none; transition:all .25s ease;
}
.pmc-toast.pmc-show{ transform:none; opacity:1; pointer-events:auto; }
.pmc-toast.pmc-toast-crit{ border-left-color:var(--pmc-crit); }
.pmc-toast.pmc-toast-warn{ border-left-color:var(--pmc-warn); }
.pmc-toast strong{ display:block; font-size:var(--pmc-fs-sm); }
.pmc-toast span{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }

/* --------------------------------------------------------------------------
   10. CARDS / PANNEAUX
   -------------------------------------------------------------------------- */
.pmc-card{
  background:var(--pmc-surface); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md); box-shadow:var(--pmc-shadow-sm);
  overflow:visible; /* les dropdowns internes doivent pouvoir déborder */
  transition:background var(--pmc-transition), border-color var(--pmc-transition);
}
.pmc-card-head{
  background:var(--pmc-grad-head); color:var(--pmc-grad-head-text);
  padding:var(--pmc-sp-2) var(--pmc-sp-4); font-size:var(--pmc-fs-sm); font-weight:600;
  display:flex; align-items:center; gap:var(--pmc-sp-2);
  border-radius:calc(var(--pmc-r-md) - 1px) calc(var(--pmc-r-md) - 1px) 0 0;
}
.pmc-card-head .pmc-badge{ margin-left:auto; }
.pmc-card-head-plain{
  background:var(--pmc-surface-alt); color:var(--pmc-text);
  border-bottom:1px solid var(--pmc-border);
}
.pmc-card-head-crit{ background:linear-gradient(135deg,#7f1d1d,#991b1b); }
.pmc-card-head-warn{ background:linear-gradient(135deg,#7c2d12,#b45309); }
/* Pendant « tout va bien » des deux precedents : construit sur le token d'etat
   pour rester lisible dans les 3 themes (le vert de v2 est clair, on l'assombrit). */
.pmc-card-head-ok{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--pmc-ok) 45%, #000) 0%,
    color-mix(in srgb, var(--pmc-ok) 72%, #000) 100%);
}
.pmc-card-body{ padding:var(--pmc-sp-4); }
.pmc-card-foot{
  padding:var(--pmc-sp-2) var(--pmc-sp-4); border-top:1px solid var(--pmc-border);
  background:var(--pmc-surface-alt); font-size:var(--pmc-fs-xs); color:var(--pmc-text-3);
  border-radius:0 0 calc(var(--pmc-r-md) - 1px) calc(var(--pmc-r-md) - 1px);
}

/* --------------------------------------------------------------------------
   11. STAT CARDS (KPI à bordure gauche)
   -------------------------------------------------------------------------- */
.pmc-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--pmc-layout-gap); }
.pmc-stat{
  background:var(--pmc-surface); border:1px solid var(--pmc-border); border-left:5px solid var(--pmc-primary);
  border-radius:var(--pmc-r-md); padding:var(--pmc-sp-3) var(--pmc-sp-4); box-shadow:var(--pmc-shadow-sm);
}
.pmc-stat .pmc-label{ display:block; font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.pmc-stat .pmc-value{ display:block; font-size:var(--pmc-fs-2xl); font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; }
.pmc-stat .pmc-delta{ display:block; font-size:var(--pmc-fs-xs); color:var(--pmc-text-3); }
.pmc-stat.pmc-ok{ border-left-color:var(--pmc-ok); }     .pmc-stat.pmc-ok .pmc-value{ color:var(--pmc-ok); }
.pmc-stat.pmc-warn{ border-left-color:var(--pmc-warn); } .pmc-stat.pmc-warn .pmc-value{ color:var(--pmc-warn); }
.pmc-stat.pmc-crit{ border-left-color:var(--pmc-crit); } .pmc-stat.pmc-crit .pmc-value{ color:var(--pmc-crit); }
.pmc-stat.pmc-info{ border-left-color:var(--pmc-info); }

/* --------------------------------------------------------------------------
   12. FORMULAIRES
   -------------------------------------------------------------------------- */
.pmc-field{ margin-bottom:var(--pmc-sp-4); min-width:0; }
.pmc-field label{ display:block; font-size:var(--pmc-fs-sm); font-weight:600; margin-bottom:var(--pmc-sp-1); }
.pmc-field label .pmc-req{ color:var(--pmc-crit); }
.pmc-field .pmc-help{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-3); margin-top:var(--pmc-sp-1); }
.pmc-field .pmc-error-msg{ font-size:var(--pmc-fs-xs); color:var(--pmc-crit); margin-top:var(--pmc-sp-1); }
.pmc-input, .pmc-textarea, .pmc-select{
  width:100%; height:var(--pmc-h-ctl); padding:0 var(--pmc-sp-3);
  font:400 var(--pmc-fs-base)/1.4 var(--pmc-font-sans); color:var(--pmc-text);
  background:var(--pmc-surface); border:1px solid var(--pmc-border-strong); border-radius:var(--pmc-r-sm);
  transition:border-color var(--pmc-transition), box-shadow var(--pmc-transition);
}
.pmc-textarea{ height:auto; min-height:80px; padding:var(--pmc-sp-2) var(--pmc-sp-3); resize:vertical; }
.pmc-textarea.pmc-mono{ font-family:var(--pmc-font-mono); font-size:12px; }
.pmc-input::placeholder,.pmc-textarea::placeholder{ color:var(--pmc-text-3); }
.pmc-input:hover,.pmc-textarea:hover,.pmc-select:hover{ border-color:var(--pmc-text-3); }
.pmc-input:focus,.pmc-textarea:focus,.pmc-select:focus{
  outline:none; border-color:var(--pmc-primary); box-shadow:0 0 0 3px var(--pmc-focus-ring);
}
.pmc-input:disabled{ background:var(--pmc-surface-alt); color:var(--pmc-text-3); cursor:not-allowed; }
.pmc-input.pmc-is-error{ border-color:var(--pmc-crit); }
.pmc-input.pmc-is-error:focus{ box-shadow:0 0 0 3px var(--pmc-crit-soft); }

/* Edition inline partagee : le declencheur natif reste focusable, puis le
   formulaire conserve le focus et l'erreur dans la cellule concernee. */
.pmc-inline-edit{ min-width:0; }
.pmc-inline-edit-trigger{
  display:inline-flex; align-items:center; max-width:100%;
  min-width:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  min-height:var(--pmc-h-ctl-sm); padding:0 var(--pmc-sp-1);
  font:inherit; color:inherit; text-align:left;
  background:transparent; border:1px solid transparent; border-radius:var(--pmc-r-sm);
  cursor:pointer; transition:background var(--pmc-transition), border-color var(--pmc-transition);
}
.pmc-inline-edit > .pmc-inline-edit-trigger:only-child{ width:100%; }
.pmc-inline-edit-trigger:hover{
  background:var(--pmc-surface-alt); border-color:var(--pmc-border);
}
.pmc-inline-edit-trigger:focus-visible{
  outline:none; border-color:var(--pmc-primary); box-shadow:0 0 0 3px var(--pmc-focus-ring);
}
.pmc-inline-edit-value{ max-width:100%; overflow-wrap:anywhere; }
.pmc-inline-edit-empty{ color:var(--pmc-text-3); font-style:italic; }
.pmc-inline-edit-form{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:var(--pmc-sp-1);
  min-width:calc(var(--pmc-h-ctl) * 5); max-width:100%; margin:0;
}
.pmc-inline-edit-input{
  flex:1 1 calc(var(--pmc-h-ctl) * 3);
  min-width:calc(var(--pmc-h-ctl) * 3); max-width:100%;
}
.pmc-inline-edit-actions{ display:flex; gap:var(--pmc-sp-1); }
.pmc-inline-edit-error{
  flex:1 1 100%; color:var(--pmc-crit); font-size:var(--pmc-fs-xs);
  overflow-wrap:anywhere;
}
/* Liste multi-sélection native : la hauteur fixe des contrôles ne s'applique pas. */
.pmc-select[multiple]{ height:auto; min-height:calc(var(--pmc-h-ctl) * 3); padding:var(--pmc-sp-2) var(--pmc-sp-3); }
/* Largeur intrinsèque (remplace l'ancien data-width="auto" de bootstrap-select). */
.pmc-select-auto{ width:auto; max-width:100%; }
/* Option en erreur (serveur injoignable) — partagé par tous les sélecteurs. */
.pmc-opt-err{ background:var(--pmc-crit-soft); color:var(--pmc-crit); }
/* Sélecteur de serveurs partagé (Common::getSelectServerAvailable) : les libellés
   « display_name (ip) » sont longs, on borne la largeur comme le faisait #1248. */
.pmc-select-srv{ max-width:300px; }
.pmc-input-group{ display:flex; }
.pmc-input-group .pmc-input{ border-radius:var(--pmc-r-sm) 0 0 var(--pmc-r-sm); }
.pmc-input-group .pmc-addon{
  display:flex; align-items:center; padding:0 var(--pmc-sp-3);
  font-size:var(--pmc-fs-sm); color:var(--pmc-text-2);
  background:var(--pmc-surface-alt); border:1px solid var(--pmc-border-strong); border-left:0;
  border-radius:0 var(--pmc-r-sm) var(--pmc-r-sm) 0; white-space:nowrap;
}
.pmc-check, .pmc-radio{
  display:flex; align-items:center; gap:var(--pmc-sp-2);
  font-size:var(--pmc-fs-base); margin-bottom:var(--pmc-sp-2); cursor:pointer;
}
.pmc-field label.pmc-check, .pmc-field label.pmc-radio{
  display:flex; font-size:var(--pmc-fs-base); font-weight:400;
  margin-bottom:var(--pmc-sp-2);
}
.pmc-check input, .pmc-radio input{ width:16px; height:16px; accent-color:var(--pmc-primary); cursor:pointer; }

/* Toggle switch (remplace les checkboxes booléennes) */
.pmc-switch{ display:inline-flex; align-items:center; gap:var(--pmc-sp-2); cursor:pointer; font-size:var(--pmc-fs-base); }
/* Un pmc-switch est un <label> : imbriqué dans un pmc-field, la règle
   `.pmc-field label{display:block}` l'emporterait et casserait l'interrupteur.
   On restaure explicitement l'affichage en ligne et on neutralise la marge. */
.pmc-field label.pmc-switch{
  display:inline-flex; font-size:var(--pmc-fs-base); font-weight:400; margin-bottom:0;
}
.pmc-switch input{ position:absolute; opacity:0; }
.pmc-switch .pmc-track{
  display:block; width:38px; height:22px; border-radius:var(--pmc-r-full); background:var(--pmc-border-strong);
  position:relative; transition:background var(--pmc-transition); flex:none;
}
.pmc-switch .pmc-track::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#fff; box-shadow:var(--pmc-shadow-sm); transition:transform var(--pmc-transition);
}
.pmc-switch input:checked + .pmc-track{ background:var(--pmc-ok); }
.pmc-switch input:checked + .pmc-track::after{ transform:translateX(16px); }
.pmc-switch input:focus-visible + .pmc-track{ box-shadow:0 0 0 3px var(--pmc-focus-ring); }
.pmc-switch input:disabled + .pmc-track{ opacity:.45; cursor:not-allowed; }

/* --------------------------------------------------------------------------
   13. SELECT CUSTOM AVEC RECHERCHE (règle des 3 entrées)
   Initialisé par design-system.js sur [data-pmc-dsel]
   -------------------------------------------------------------------------- */
.pmc-dsel{ position:relative; min-width:0; }
.pmc-dsel-btn{
  width:100%; height:var(--pmc-h-ctl); padding:0 30px 0 var(--pmc-sp-3); position:relative;
  display:flex; align-items:center; gap:6px; overflow:hidden;
  font:400 var(--pmc-fs-base)/1 var(--pmc-font-sans); color:var(--pmc-text); text-align:left;
  background:var(--pmc-surface); border:1px solid var(--pmc-border-strong); border-radius:var(--pmc-r-sm);
  cursor:pointer; transition:border-color var(--pmc-transition), box-shadow var(--pmc-transition);
}
.pmc-dsel-btn::after{
  content:""; position:absolute; right:12px; top:50%; margin-top:-2px;
  border:4px solid transparent; border-top-color:var(--pmc-text-2);
}
.pmc-dsel-btn:hover{ border-color:var(--pmc-text-3); }
.pmc-dsel.pmc-open .pmc-dsel-btn, .pmc-dsel-btn:focus{
  outline:none; border-color:var(--pmc-primary); box-shadow:0 0 0 3px var(--pmc-focus-ring);
}
.pmc-dsel-btn .pmc-lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmc-dsel-btn .pmc-placeholder{ color:var(--pmc-text-3); }
.pmc-dsel-btn .pmc-tag{
  background:var(--pmc-primary-soft); color:var(--pmc-primary); font-size:var(--pmc-fs-xs); font-weight:600;
  border-radius:var(--pmc-r-sm); padding:2px 7px; white-space:nowrap;
}
.pmc-dsel-panel{
  position:absolute; z-index:var(--pmc-z-dropdown); top:calc(100% + 4px); left:0; min-width:100%;
  background:var(--pmc-surface); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md);
  box-shadow:var(--pmc-shadow-md); display:none; overflow:hidden;
}
.pmc-dsel.pmc-open .pmc-dsel-panel{ display:block; }
.pmc-dsel-search{ padding:var(--pmc-sp-2); border-bottom:1px solid var(--pmc-border); }
.pmc-dsel-search input{
  width:100%; height:var(--pmc-h-ctl-sm); padding:0 var(--pmc-sp-2);
  font:400 var(--pmc-fs-sm)/1 var(--pmc-font-sans); color:var(--pmc-text);
  background:var(--pmc-surface-alt); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
}
.pmc-dsel-search input:focus{ outline:none; border-color:var(--pmc-primary); box-shadow:0 0 0 2px var(--pmc-focus-ring); }
.pmc-dsel-actions{ display:flex; gap:var(--pmc-sp-1); padding:var(--pmc-sp-1) var(--pmc-sp-2); border-bottom:1px solid var(--pmc-border); }
.pmc-dsel-actions button{
  flex:1; background:none; border:0; color:var(--pmc-primary);
  font:600 var(--pmc-fs-xs)/1 var(--pmc-font-sans); padding:5px; border-radius:var(--pmc-r-sm); cursor:pointer;
}
.pmc-dsel-actions button:hover{ background:var(--pmc-primary-soft); }
.pmc-dsel-list{ max-height:240px; overflow:auto; margin:0; padding:var(--pmc-sp-1); list-style:none; }
.pmc-dsel-list li{
  display:flex; align-items:center; gap:var(--pmc-sp-2);
  padding:7px var(--pmc-sp-2); font-size:var(--pmc-fs-sm); border-radius:var(--pmc-r-sm);
  cursor:pointer; white-space:nowrap;
}
.pmc-dsel-list li:hover{ background:var(--pmc-surface-alt); }
.pmc-dsel-list li.pmc-selected{ background:var(--pmc-primary-soft); color:var(--pmc-primary); font-weight:600; }
.pmc-dsel-list li.pmc-selected::after{ content:"✓"; margin-left:auto; }
.pmc-dsel-list li.pmc-hidden{ display:none; }
.pmc-dsel-list li small{ color:var(--pmc-text-3); font-family:var(--pmc-font-mono); font-size:11px; }
.pmc-dsel-empty{ padding:var(--pmc-sp-3); font-size:var(--pmc-fs-sm); color:var(--pmc-text-3); text-align:center; display:none; }

/* --------------------------------------------------------------------------
   14. TABLEAUX
   -------------------------------------------------------------------------- */
.pmc-table-card{
  background:var(--pmc-surface); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md); box-shadow:var(--pmc-shadow-sm); overflow:hidden;
}
.pmc-table-toolbar{
  display:flex; gap:var(--pmc-sp-3); align-items:center; flex-wrap:wrap;
  padding:var(--pmc-sp-3) var(--pmc-sp-4); border-bottom:1px solid var(--pmc-border);
}
.pmc-table-toolbar .pmc-input{ max-width:260px; margin-left:auto; }
.pmc-table-scroll{ width:100%; max-width:100%; min-width:0; overflow-x:auto; }
table.pmc-tbl{ width:100%; border-collapse:collapse; font-size:var(--pmc-fs-base); }
/* En-tête (Design Lab §7) : barre claire en dégradé, texte noir 12px/700 en casse
   normale, filet blanc inset en haut, bordure basse border-strong. Dark Ops via
   les jetons --pmc-th-*. */
.pmc-tbl thead{ background:var(--pmc-th-bg); }
.pmc-tbl th{
  text-align:left; font-size:var(--pmc-fs-xs); text-transform:none; letter-spacing:0;
  color:var(--pmc-th-text); font-weight:700; padding:8px var(--pmc-sp-3);
  background:var(--pmc-th-bg); box-shadow:var(--pmc-th-inset);
  border-bottom:1px solid var(--pmc-th-border);
  white-space:nowrap;
}
.pmc-tbl thead .pmc-group th{ border-bottom:0; padding-bottom:2px; }
.pmc-tbl thead .pmc-sub th{ padding-top:2px; font-size:10px; color:var(--pmc-th-muted); }
.pmc-tbl th.pmc-gsep{ border-left:1px solid var(--pmc-th-border); }
.pmc-tbl td.pmc-gsep{ border-left:1px solid var(--pmc-border); }
.pmc-tbl th.pmc-sortable{ cursor:pointer; }
.pmc-tbl th.pmc-sortable::after{ content:"↕"; margin-left:5px; opacity:.4; }
.pmc-tbl th.pmc-sort-asc::after{ content:"↑"; opacity:1; color:var(--pmc-primary); }
.pmc-tbl th.pmc-sort-desc::after{ content:"↓"; opacity:1; color:var(--pmc-primary); }
/* Tri des colonnes (Design Lab §7, règle « toutes les colonnes triables ») :
   ≤ 200 lignes côté client sur th[data-pmc-sort] (design-system.js), au-delà
   liens ?sort=&dir= (th.pmc-sort-server a) triés par la requête MySQL dédiée
   (App\Library\TableSort, en-têtes rendus par App\Library\TableSortHeader). */
.pmc-tbl th[data-pmc-sort]{ cursor:pointer; user-select:none; }
.pmc-tbl th[data-pmc-sort]::after, .pmc-tbl th.pmc-sort-server a::after{ content:"\2195"; margin-left:5px; opacity:.4; }
.pmc-tbl th[data-pmc-sort][aria-sort="ascending"]::after, .pmc-tbl th.pmc-sort-server[aria-sort="ascending"] a::after{ content:"\2191"; opacity:1; color:var(--pmc-primary); }
.pmc-tbl th[data-pmc-sort][aria-sort="descending"]::after, .pmc-tbl th.pmc-sort-server[aria-sort="descending"] a::after{ content:"\2193"; opacity:1; color:var(--pmc-primary); }
.pmc-tbl th[data-pmc-sort]:focus-visible{ outline:2px solid var(--pmc-primary); outline-offset:-2px; }
.pmc-tbl th.pmc-sort-server a{ color:var(--pmc-th-text); text-decoration:none; }
.pmc-tbl th.pmc-sort-server a:hover, .pmc-tbl th.pmc-sort-server a:focus-visible{ color:var(--pmc-th-text); text-decoration:underline; }
.pmc-tbl th.pmc-num, .pmc-tbl td.pmc-num{ text-align:right; }
.pmc-tbl td{ padding:0 var(--pmc-sp-3); height:var(--pmc-h-row); border-bottom:1px solid var(--pmc-border); vertical-align:middle; }
.pmc-tbl tr:last-child td{ border-bottom:0; }
.pmc-tbl tbody tr:nth-child(even){ background:var(--pmc-surface-alt); }
/* Hover de ligne (#4229, #4461). Le sélecteur thémé est volontairement plus
   spécifique que les teintes d'état déclarées par écran plus bas. Une ligne
   sélectionnée garde son couple fond/texte. En V1, les cellules elles-mêmes
   prennent le couple inversé afin qu'un fond sémantique de cellule ne laisse
   jamais du blanc sur fond pâle. V2/V3 ne reçoivent aucune déclaration de
   premier plan : liens et cellules sémantiques conservent leur couleur. */
:root:is(:not([data-theme]), [data-theme="v1"], [data-theme="v2"], [data-theme="v3"])
  .pmc-app .pmc-tbl tbody tr:hover:not(.pmc-selected-row){
  background:var(--pmc-row-hover-bg);
}
:root:is(:not([data-theme]), [data-theme="v1"])
  .pmc-app .pmc-tbl tbody tr:hover:not(.pmc-selected-row) > td{
  background:var(--pmc-row-hover-bg); color:var(--pmc-row-hover-text);
}
/* Cadre de survol (Design Lab §7) : bordure 100 % plus foncée que le fond #dbe7f7, soit #000,
   en outline pour ne rien décaler ; Dark Ops prend la couleur de texte du thème. */
.pmc-app .pmc-tbl tbody tr:hover:not(.pmc-selected-row){ outline:1px solid #000; outline-offset:-1px; }
:root[data-theme="v2"] .pmc-app .pmc-tbl tbody tr:hover:not(.pmc-selected-row){ outline-color:var(--pmc-text); }
/* Les textes explicites participent à l'inversion V1. Les composants qui
   possèdent leur propre surface (boutons, badges, cards, chips/pills, alertes,
   hints et lignes affectées CVE) sont exclus du lien ordinaire. */
:root:is(:not([data-theme]), [data-theme="v1"])
  .pmc-app .pmc-tbl tbody tr:hover:not(.pmc-selected-row) > td :where(
    a:not(.pmc-btn):not(.pmc-badge):not(.pmc-card):not(.pmc-stat):not(.pmc-cv-server):not([class*="-chip"]):not([class*="-pill"]):not(.pmc-alert *):not(.pmc-hint *):not(.pmc-empty *):not(.pmc-cve-aff-row *):not(.pmc-tunnel-index-duplicate-help *),
    .pmc-muted, .pmc-meta, .pmc-section-label, .pmc-progress-label,
    .pmc-pg-note, .pmc-pg-muted, .pmc-pf-note, .pmc-pl-sql-kw,
    .pmc-cv-muted, .pmc-cve-title, .pmc-cve-meta, .pmc-cve-score, .pmc-cve-more,
    .pmc-tunnel-index-reason, .pmc-tunnel-index-server-kind,
    .pmc-tunnel-index-jump, .pmc-tunnel-index-date
  ){
  color:var(--pmc-row-hover-text);
}
.pmc-tbl tbody tr.pmc-selected-row{ background:var(--pmc-primary-soft); }
.pmc-tbl .pmc-num{ font-family:var(--pmc-font-mono); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Les en-têtes gardent tous la même police ; seul l'alignement suit la colonne (Design Lab §7). */
.pmc-tbl th.pmc-num, .pmc-tbl th.pmc-mono{ font-family:var(--pmc-font-sans); font-size:var(--pmc-fs-xs); }
.pmc-tbl .pmc-mono{ font-family:var(--pmc-font-mono); font-size:12px; white-space:nowrap; }
.pmc-tbl-dense td{ height:var(--pmc-h-row-dense); font-size:var(--pmc-fs-sm); }
/* En-tête collant pour les longues tables de logs / monitoring.
   À poser sur la table : <table class="pmc-tbl pmc-tbl-sticky">, dans un
   conteneur défilant (pmc-table-scroll avec une hauteur max). Le fond doit
   être opaque, sinon les lignes défilent visiblement sous l'en-tête. */
.pmc-tbl-sticky thead th{ position:sticky; top:0; z-index:2; background:var(--pmc-th-bg); }
.pmc-tbl .pmc-row-crit td:first-child{ box-shadow:inset 3px 0 0 var(--pmc-crit); }
.pmc-tbl .pmc-row-warn td:first-child{ box-shadow:inset 3px 0 0 var(--pmc-warn); }
.pmc-table-foot{
  display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap;
  padding:var(--pmc-sp-2) var(--pmc-sp-4); border-top:1px solid var(--pmc-border);
  font-size:var(--pmc-fs-sm); color:var(--pmc-text-2);
}
.pmc-pager{ display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
.pmc-pager button, .pmc-pager a, .pmc-pager .pmc-current, .pmc-pager .pmc-ellipsis{
  min-width:28px; height:28px; padding:0 6px; border:1px solid var(--pmc-border-strong);
  background:var(--pmc-surface); color:var(--pmc-text); border-radius:var(--pmc-r-sm);
  font:600 var(--pmc-fs-xs)/1 var(--pmc-font-sans);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all var(--pmc-transition); text-decoration:none;
}
.pmc-pager button, .pmc-pager a{ cursor:pointer; }
.pmc-pager button:hover:not(:disabled), .pmc-pager a:hover{ border-color:var(--pmc-primary); color:var(--pmc-primary); text-decoration:none; }
.pmc-pager .pmc-current{ background:var(--pmc-primary); border-color:var(--pmc-primary); color:var(--pmc-on-primary); }
.pmc-pager .pmc-ellipsis{ min-width:18px; padding:0; background:transparent; border-color:transparent; color:var(--pmc-text-3); }
.pmc-pager button:disabled{ opacity:.4; cursor:not-allowed; }

/* --------------------------------------------------------------------------
   15. ONGLETS / ACCORDÉON / TOOLTIP
   -------------------------------------------------------------------------- */
.pmc-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--pmc-border); flex-wrap:wrap; }
.pmc-tabs button, .pmc-tabs a{
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:var(--pmc-sp-2) var(--pmc-sp-4); font:600 var(--pmc-fs-sm)/1.2 var(--pmc-font-sans);
  color:var(--pmc-text-2); cursor:pointer; transition:all var(--pmc-transition); text-decoration:none;
}
.pmc-tabs button:hover, .pmc-tabs a:hover{ color:var(--pmc-text); text-decoration:none; }
.pmc-tabs button.pmc-active, .pmc-tabs a.pmc-active{ color:var(--pmc-primary); border-bottom-color:var(--pmc-primary); }
/* Catalogue SVG tabs: keep each icon with its label when the strip wraps. */
.pmc-tabs :is(a, button, .pmc-compare-menu-disabled):has(> .pmc-ico){ display:inline-flex; align-items:center; gap:var(--pmc-sp-1); padding-inline:var(--pmc-sp-2); }
.pmc-tabs .pmc-ico, .pmc-btn-group .pmc-ico{ width:1em; height:1em; flex:none; }
.pmc-tab-pane{ display:none; padding:var(--pmc-sp-4) 0; }
.pmc-tab-pane.pmc-active{ display:block; }

details.pmc-acc{
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md);
  background:var(--pmc-surface); margin-bottom:var(--pmc-sp-2); overflow:hidden;
}
details.pmc-acc summary{
  cursor:pointer; padding:var(--pmc-sp-3) var(--pmc-sp-4); font-weight:600; font-size:var(--pmc-fs-sm);
  list-style:none; display:flex; align-items:center; gap:var(--pmc-sp-2);
}
details.pmc-acc summary::-webkit-details-marker{ display:none; }
details.pmc-acc summary::before{ content:"▸"; color:var(--pmc-text-3); transition:transform var(--pmc-transition); }
details.pmc-acc[open] summary::before{ transform:rotate(90deg); }
details.pmc-acc summary:hover{ background:var(--pmc-surface-alt); }
details.pmc-acc .pmc-acc-body{ padding:0 var(--pmc-sp-4) var(--pmc-sp-4) 30px; font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); }

[data-pmc-tip]{ position:relative; cursor:help; border-bottom:1px dotted var(--pmc-text-3); }
[data-pmc-tip]::after{
  content:attr(data-pmc-tip); position:absolute; inset-block-end:calc(100% + var(--pmc-tip-offset));
  inset-inline-start:50%; inset-inline-end:auto; transform:translateX(-50%);
  background:var(--pmc-text); color:var(--pmc-surface); font-size:var(--pmc-fs-xs); font-weight:500; line-height:1.4;
  box-sizing:border-box; inline-size:max-content;
  max-inline-size:min(var(--pmc-tip-max-inline-size), calc(100vw - var(--pmc-sp-3) - var(--pmc-sp-3) - var(--pmc-tip-scrollbar-reserve)));
  padding:var(--pmc-tip-padding-block) var(--pmc-tip-padding-inline); border-radius:var(--pmc-r-sm); white-space:normal; overflow-wrap:anywhere; text-align:start;
  box-shadow:var(--pmc-shadow-md);
  opacity:0; pointer-events:none; transition:opacity var(--pmc-transition); z-index:var(--pmc-z-tooltip);
}
[data-pmc-tip].pmc-tip-start::after{
  inset-inline-start:0; inset-inline-end:auto; transform:none;
}
[data-pmc-tip].pmc-tip-end::after{
  inset-inline-start:auto; inset-inline-end:0; transform:none;
}
[data-pmc-tip]:hover::after, [data-pmc-tip]:focus-visible::after{ opacity:1; }
.pmc-tip-popover[popover]{
  box-sizing:border-box; inline-size:max-content;
  max-inline-size:min(var(--pmc-tip-max-inline-size), calc(100vw - var(--pmc-sp-3) - var(--pmc-sp-3) - var(--pmc-tip-scrollbar-reserve)));
  margin:auto; padding:var(--pmc-tip-padding-block) var(--pmc-tip-padding-inline); border:0; border-radius:var(--pmc-r-sm);
  background:var(--pmc-text); color:var(--pmc-surface);
  font:500 var(--pmc-fs-xs)/1.4 var(--pmc-font-sans);
  white-space:normal; overflow-wrap:anywhere; text-align:start;
  text-transform:none; letter-spacing:normal;
  box-shadow:var(--pmc-shadow-md); pointer-events:none;
}
@supports (position-area:block-start){
  .pmc-tip-popover[popover]{
    position-area:block-start;
    position-try-fallbacks:flip-block;
    margin:0 0 var(--pmc-tip-offset);
  }
}
.pmc-app .pmc-tip-th{
  display:inline-block; cursor:help; border-bottom:1px dotted var(--pmc-text-3);
}
.pmc-app .pmc-tip-th:not(.pmc-tip-top-layer)::after{
  position:static; display:none; margin-block-start:var(--pmc-sp-2);
  transform:none; text-transform:none; letter-spacing:normal;
}
.pmc-app .pmc-tip-th:not(.pmc-tip-top-layer):hover::after,
.pmc-app .pmc-tip-th:not(.pmc-tip-top-layer):focus-visible::after{
  display:block;
}
.pmc-app .pmc-tip-th.pmc-tip-top-layer::after{ content:none; }

/* --------------------------------------------------------------------------
   16. MODALE
   -------------------------------------------------------------------------- */
.pmc-modal-overlay{
  position:fixed; inset:0; background:var(--pmc-overlay); z-index:var(--pmc-z-modal);
  display:none; align-items:center; justify-content:center; padding:var(--pmc-sp-4);
}
.pmc-modal-overlay.pmc-show{ display:flex; }
.pmc-modal{
  background:var(--pmc-surface); border-radius:var(--pmc-r-lg); box-shadow:var(--pmc-shadow-lg);
  width:100%; max-width:480px; max-height:90vh; overflow:auto; color:var(--pmc-text);
}
.pmc-modal-head{
  background:var(--pmc-grad-head); color:var(--pmc-grad-head-text);
  padding:var(--pmc-sp-3) var(--pmc-sp-4); display:flex; align-items:center;
  border-radius:var(--pmc-r-lg) var(--pmc-r-lg) 0 0;
}
.pmc-modal-head h3{ margin:0; font-size:var(--pmc-fs-md); }
.pmc-modal-head .pmc-close{ margin-left:auto; background:none; border:0; color:var(--pmc-grad-head-muted); font-size:18px; cursor:pointer; }
.pmc-modal-head .pmc-close:hover{ color:var(--pmc-grad-head-text); }
.pmc-modal-body{ padding:var(--pmc-sp-4); }
.pmc-modal-foot{
  display:flex; justify-content:flex-end; gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-3) var(--pmc-sp-4); border-top:1px solid var(--pmc-border);
  background:var(--pmc-surface-alt); border-radius:0 0 var(--pmc-r-lg) var(--pmc-r-lg);
}

/* --------------------------------------------------------------------------
   17. DIVERS — progress, vide, skeleton, hint, SQL
   -------------------------------------------------------------------------- */
.pmc-progress{ height:8px; background:var(--pmc-neutral-soft); border-radius:var(--pmc-r-full); overflow:hidden; }
.pmc-progress > span{ display:block; height:100%; border-radius:var(--pmc-r-full); background:var(--pmc-primary); transition:width .4s ease; }
.pmc-progress.pmc-ok > span{ background:var(--pmc-ok); }
.pmc-progress.pmc-warn > span{ background:var(--pmc-warn); }
.pmc-progress.pmc-crit > span{ background:var(--pmc-crit); }
.pmc-progress.pmc-na{
  background:repeating-linear-gradient(
    135deg,
    var(--pmc-border-strong) 0,
    var(--pmc-border-strong) var(--pmc-sp-1),
    var(--pmc-surface-alt) var(--pmc-sp-1),
    var(--pmc-surface-alt) var(--pmc-sp-2)
  );
}
.pmc-progress-label{ display:flex; justify-content:space-between; font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); margin-bottom:var(--pmc-sp-1); }

.pmc-empty{
  text-align:center; padding:var(--pmc-sp-6) var(--pmc-sp-4); color:var(--pmc-text-3);
  border:2px dashed var(--pmc-border); border-radius:var(--pmc-r-md); background:var(--pmc-surface);
}
.pmc-empty .pmc-ico{ font-size:30px; margin-bottom:var(--pmc-sp-2); }
.pmc-empty strong{ display:block; color:var(--pmc-text-2); font-size:var(--pmc-fs-base); }
/* #4485 : une ligne qui ne contient qu'un etat vide n'est pas une ligne
   interactive. Elle garde donc une surface et des contrastes stables au
   survol, y compris sous l'inversion V1 des cellules ordinaires. */
:root:is(:not([data-theme]), [data-theme="v1"], [data-theme="v2"], [data-theme="v3"])
  .pmc-app .pmc-tbl tbody tr.pmc-empty-row:hover:not(.pmc-selected-row) > td{
  background:var(--pmc-surface); color:var(--pmc-text);
}

.pmc-skel{
  background:linear-gradient(90deg, var(--pmc-surface-alt) 25%, var(--pmc-border) 50%, var(--pmc-surface-alt) 75%);
  background-size:200% 100%; animation:pmc-skel 1.4s infinite;
  border-radius:var(--pmc-r-sm); height:12px; margin-bottom:var(--pmc-sp-2);
}
@keyframes pmc-skel{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.pmc-hint{
  font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); background:var(--pmc-surface-alt);
  border-left:3px solid var(--pmc-primary); border-radius:var(--pmc-r-sm);
  padding:6px 10px;
}

/* Requête SQL colorisée (Query Analyzer, digests, logs) */
.pmc-sql{
  display:block; font-family:var(--pmc-font-mono); font-size:12px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word; color:var(--pmc-text);
}
.pmc-sql .pmc-kw{ color:var(--pmc-sql-kw); font-weight:700; }
.pmc-sql .pmc-fn{ color:var(--pmc-sql-fn); }
.pmc-sql .pmc-str{ color:var(--pmc-sql-str); }
.pmc-sql .pmc-ph{ color:var(--pmc-sql-num); font-weight:700; }

/* --------------------------------------------------------------------------
   18. RESPONSIVE GLOBAL DES COMPOSANTS
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .pmc-navbar ul{ display:none; width:100%; flex-direction:column; padding-bottom:var(--pmc-sp-2); }
  .pmc-navbar.pmc-nav-open ul{ display:flex; }
  .pmc-navbar li a{ padding:10px 12px; border-bottom:0; border-left:2px solid transparent; }
  .pmc-navbar li a.pmc-active{ border-left-color:var(--pmc-primary); }
  .pmc-navbar .pmc-nav-end{ margin-left:0; }
  .pmc-nav-burger{ display:block; }
  /* Menu replie : les panneaux deroulants deviennent des accordeons
     statiques sur le degrade, indentes par niveau. `display:none` est
     re-affirme ici : la regle `.pmc-navbar.pmc-nav-open ul` ci-dessus rendrait
     sinon tous les sous-menus visibles des l'ouverture du burger. */
  .pmc-navbar.pmc-nav-open{ max-height:100vh; overflow-y:auto; }
  .pmc-navbar ul.pmc-nav-menu{
    display:none;
    position:static; width:auto; border:0; border-radius:0;
    box-shadow:none;
    background:rgba(255,255,255,.06); color:var(--pmc-grad-head-text);
    padding:0;
  }
  .pmc-navbar li.pmc-open > ul.pmc-nav-menu{ display:flex; }
  .pmc-navbar .pmc-nav-menu li a{ color:var(--pmc-grad-head-muted); padding:10px 12px 10px 24px; }
  .pmc-navbar .pmc-nav-menu li a:hover{ background:rgba(255,255,255,.07); color:var(--pmc-grad-head-text); }
  .pmc-navbar .pmc-nav-menu li a.pmc-active{
    background:rgba(255,255,255,.09); color:var(--pmc-grad-head-text);
    border-left-color:var(--pmc-primary);
  }
  .pmc-navbar .pmc-nav-menu ul.pmc-nav-menu li a{ padding-left:36px; }
  .pmc-navbar .pmc-nav-menu .pmc-nav-drop-toggle::after{ position:static; transform:none; margin-left:6px; }
  .pmc-navbar .pmc-nav-menu li.pmc-open > .pmc-nav-drop-toggle::after{ content:"\25BE"; }
  .pmc-navbar .pmc-nav-crumbs{ max-width:60vw; }
  .pmc-page-head{ padding:var(--pmc-sp-4); }
  .pmc-page-head .pmc-actions{ width:100%; }
  .pmc-page-head .pmc-actions .pmc-btn{ flex:1; }
  /* cible tactile 40-44px */
  .pmc-btn, .pmc-input, .pmc-select, .pmc-dsel-btn{ min-height:40px; }
  .pmc-inline-edit-trigger{
    min-width:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-inline-edit-form{ min-width:0; }
  .pmc-inline-edit-input{ flex-basis:100%; min-width:100%; }
  .pmc-inline-edit-actions{ width:100%; }
  .pmc-inline-edit-actions .pmc-btn{ flex:1; }
  .pmc-table-toolbar .pmc-input{ max-width:none; flex:1 1 100%; margin-left:0; }
  .pmc-stat-grid{ grid-template-columns:repeat(2,1fr); }
  .pmc-modal{ max-width:none; }
}
@media print{
  .pmc-toast, .pmc-modal-overlay{ display:none !important; }
}

/* Le footer de debug Glial est ajoute apres la vue et peut contenir des
   requetes SQL sans espace. Il ne doit pas elargir le viewport d'un ecran
   migre ni masquer son comportement responsive. */
#glial-debug-footer{
  box-sizing:border-box; width:calc(100vw - 30px); max-width:calc(100vw - 30px);
  overflow-x:auto; contain:inline-size;
}
#glial-debug-footer pre{
  max-width:100%; overflow-x:auto !important; white-space:pre-wrap;
  overflow-wrap:anywhere; word-break:break-word;
}

/* --------------------------------------------------------------------------
   FAMILY — tuning-ratio host presentation (shared Common fragment, #3394)

   Dashboard/hitRatio and MysqlServer/ratios keep their existing tr-* markup
   until their own epic items are processed. This family only replaces the
   former view-emitted <style> block with globally loaded, Light-token-driven
   presentation. Wide matrices stay contained by their own scroll region.
   -------------------------------------------------------------------------- */
.tr-page{
  min-width:0;
  max-width:100%;
  color:var(--pmc-text);
  font-family:var(--pmc-font-sans);
  font-size:var(--pmc-fs-sm);
  line-height:var(--pmc-lh);
  text-align:left;
}
.tr-page,
.tr-page *,
.tr-page *::before,
.tr-page *::after{
  box-sizing:border-box;
}
.tr-page .tr-card{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  margin-bottom:var(--pmc-sp-4);
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md);
  background:var(--pmc-surface);
  box-shadow:var(--pmc-shadow-sm);
}
.tr-page .tr-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pmc-sp-3);
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  background:var(--pmc-grad-head);
  color:var(--pmc-grad-head-text);
}
.tr-page .tr-head-copy{
  min-width:0;
}
.tr-page .tr-head-title{
  margin:0;
  color:var(--pmc-grad-head-text);
  font-size:var(--pmc-fs-base);
  font-weight:600;
  line-height:1.35;
}
.tr-page .tr-head-subtitle{
  margin:var(--pmc-sp-1) 0 0;
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
}
.tr-page .tr-head-version{
  display:inline-block;
  margin-left:var(--pmc-sp-2);
  padding:calc(var(--pmc-sp-1) / 2) var(--pmc-sp-2);
  border:1px solid color-mix(in srgb, var(--pmc-grad-head-text) 24%, transparent);
  border-radius:var(--pmc-r-full);
  background:color-mix(in srgb, var(--pmc-grad-head-text) 12%, transparent);
  color:var(--pmc-grad-head-text);
  font-size:var(--pmc-fs-xs);
  font-weight:600;
  vertical-align:middle;
}
.tr-page .tr-head-pills{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--pmc-sp-1);
  flex-wrap:wrap;
}
.tr-page .tr-head-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--pmc-sp-2);
  min-height:var(--pmc-h-ctl);
  padding:0 var(--pmc-sp-3);
  border:1px solid color-mix(in srgb, var(--pmc-grad-head-text) 28%, transparent);
  border-radius:var(--pmc-r-full);
  background:color-mix(in srgb, var(--pmc-grad-head-text) 12%, transparent);
  color:var(--pmc-grad-head-text);
  font-size:var(--pmc-fs-xs);
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.tr-page .tr-head-action:hover,
.tr-page .tr-head-action:focus{
  border-color:color-mix(in srgb, var(--pmc-grad-head-text) 55%, transparent);
  background:color-mix(in srgb, var(--pmc-grad-head-text) 20%, transparent);
  color:var(--pmc-grad-head-text);
  text-decoration:none;
}
.tr-page .tr-badge-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25em; height:1.25em; border-radius:50%;
  font-size:.8em; font-weight:700; line-height:1;
  background:var(--pmc-tr-badge-bg, var(--pmc-neutral)); color:var(--pmc-surface);
}
.tr-page .tr-summary-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--pmc-sp-1);
  padding:calc(var(--pmc-sp-1) / 2) var(--pmc-sp-2);
  border:1px solid transparent;
  border-radius:var(--pmc-r-full);
  font-size:var(--pmc-fs-xs);
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
}
.tr-page .tr-summary-badge--ok,
.tr-page .tr-badge--ok,
.tr-page .tr-threshold--ok{
  --pmc-tr-badge-bg:var(--pmc-ok);
  border-color:var(--pmc-ok-border);
  background:var(--pmc-ok-soft);
  color:var(--pmc-ok);
}
.tr-page .tr-summary-badge--warning,
.tr-page .tr-badge--warning,
.tr-page .tr-threshold--warning{
  --pmc-tr-badge-bg:var(--pmc-warn);
  border-color:var(--pmc-warn-border);
  background:var(--pmc-warn-soft);
  color:var(--pmc-warn);
}
.tr-page .tr-summary-badge--critical,
.tr-page .tr-badge--critical,
.tr-page .tr-threshold--critical{
  --pmc-tr-badge-bg:var(--pmc-crit);
  border-color:var(--pmc-crit-border);
  background:var(--pmc-crit-soft);
  color:var(--pmc-crit);
}
.tr-page .tr-summary-badge--unknown,
.tr-page .tr-badge--unknown,
.tr-page .tr-summary-badge--not_applicable,
.tr-page .tr-badge--not_applicable{
  --pmc-tr-badge-bg:var(--pmc-neutral);
  border-color:var(--pmc-border);
  background:var(--pmc-neutral-soft);
  color:var(--pmc-neutral);
}
/* #5268 — valeur informative (jamais une alerte) */
.tr-page .tr-summary-badge--info,
.tr-page .tr-badge--info,
.tr-page .tr-threshold--info{
  --pmc-tr-badge-bg:var(--pmc-info);
  border-color:var(--pmc-info-border);
  background:var(--pmc-info-soft);
  color:var(--pmc-info);
}
.tr-page .tr-head .tr-summary-badge--ok{
  border-color:color-mix(in srgb, var(--pmc-ok-border) 30%, transparent);
  background:color-mix(in srgb, var(--pmc-ok) 28%, transparent);
  color:var(--pmc-ok-border);
}
.tr-page .tr-head .tr-summary-badge--warning{
  border-color:color-mix(in srgb, var(--pmc-warn-border) 30%, transparent);
  background:color-mix(in srgb, var(--pmc-warn) 28%, transparent);
  color:var(--pmc-warn-border);
}
.tr-page .tr-head .tr-summary-badge--critical{
  border-color:color-mix(in srgb, var(--pmc-crit-border) 30%, transparent);
  background:color-mix(in srgb, var(--pmc-crit) 30%, transparent);
  color:var(--pmc-crit-border);
}
.tr-page .tr-head .tr-summary-badge--unknown,
.tr-page .tr-head .tr-summary-badge--info,
.tr-page .tr-head .tr-summary-badge--not_applicable{
  border-color:color-mix(in srgb, var(--pmc-grad-head-text) 20%, transparent);
  background:color-mix(in srgb, var(--pmc-grad-head-text) 14%, transparent);
  color:var(--pmc-grad-head-muted);
}
.tr-page .tr-toolbar{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-3);
  min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-4));
  padding:var(--pmc-sp-2) var(--pmc-sp-4);
  border-bottom:1px solid var(--pmc-border);
  background:var(--pmc-surface);
  flex-wrap:wrap;
}
.tr-page .tr-toolbar-copy{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  color:var(--pmc-text-2);
  flex-wrap:wrap;
}
.tr-page .tr-toolbar-copy strong{
  color:var(--pmc-text);
  font-size:var(--pmc-fs-base);
}
.tr-page .tr-toolbar-spacer{
  flex:1 1 auto;
}
.tr-page .tr-filters{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  flex-wrap:wrap;
}
.tr-page .tr-filter-label{
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tr-page .tr-filter-select{
  height:var(--pmc-h-ctl);
  padding:0 var(--pmc-sp-3);
  border:1px solid var(--pmc-border-strong);
  border-radius:var(--pmc-r-sm);
  background:var(--pmc-surface);
  color:var(--pmc-text);
  font:400 var(--pmc-fs-xs)/1.4 var(--pmc-font-sans);
}
.tr-page .tr-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
}
.tr-page .tr-search{
  width:220px;
  height:var(--pmc-h-ctl);
  padding:0 calc(var(--pmc-sp-7) + var(--pmc-sp-4)) 0 var(--pmc-sp-6);
  border:1px solid var(--pmc-border-strong);
  border-radius:var(--pmc-r-full);
  background:var(--pmc-surface);
  color:var(--pmc-text);
  font:400 var(--pmc-fs-xs)/1.4 var(--pmc-font-sans);
  outline:none;
  transition:
    border-color var(--pmc-transition),
    box-shadow var(--pmc-transition),
    width var(--pmc-transition);
}
.tr-page .tr-filter-select:focus,
.tr-page .tr-search:focus{
  border-color:var(--pmc-primary);
  box-shadow:0 0 0 3px var(--pmc-focus-ring);
  outline:none;
}
.tr-page .tr-search:focus{
  width:260px;
}
.tr-page .tr-search-count{
  position:absolute;
  right:var(--pmc-sp-2);
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
  font-weight:700;
  pointer-events:none;
}
/* #1139 — score d'efficacité mémoire (MysqlServer/ratios) */
.tr-page .tr-mem{
  display:grid;
  grid-template-columns:minmax(calc(var(--pmc-h-ctl) * 7), auto) minmax(0, 1fr);
  gap:var(--pmc-sp-4);
  align-items:start;
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  border-bottom:1px solid var(--pmc-border);
}
.tr-page .tr-mem-score{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--pmc-sp-2);
}
.tr-page .tr-mem-kicker{
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
  font-weight:600;
}
.tr-page .tr-mem-value{
  color:var(--pmc-text);
  font-size:calc(var(--pmc-fs-base) * 2.4);
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.tr-page .tr-mem-score--ok .tr-mem-value{ color:var(--pmc-ok); }
.tr-page .tr-mem-score--warning .tr-mem-value{ color:var(--pmc-warn); }
.tr-page .tr-mem-score--critical .tr-mem-value{ color:var(--pmc-crit); }
.tr-page .tr-mem-value small{
  margin-left:var(--pmc-sp-1);
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-sm);
  font-weight:600;
}
.tr-page .tr-mem-meter{
  width:100%;
  height:var(--pmc-sp-2);
}
.tr-page .tr-mem-note{
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
}
.tr-page .tr-mem-scroll{
  min-width:0;
}
.tr-page .tr-wrap{
  width:100%;
  min-width:0;
  max-width:100%;
  contain:paint;
  overflow:auto;
  overscroll-behavior:contain;
  max-height:calc(100vh - 240px);
  background:var(--pmc-surface);
  scrollbar-color:var(--pmc-border-strong) var(--pmc-bg);
  scrollbar-width:thin;
}
.tr-page .tr-wrap:focus{
  outline:2px solid var(--pmc-primary);
  outline-offset:-2px;
}
.tr-page .tr-wrap::-webkit-scrollbar{
  width:7px;
  height:7px;
}
.tr-page .tr-wrap::-webkit-scrollbar-track{
  background:var(--pmc-bg);
}
.tr-page .tr-wrap::-webkit-scrollbar-thumb{
  border-radius:var(--pmc-r-sm);
  background:var(--pmc-border-strong);
}
.tr-page .tr-table{
  width:100%;
  margin:0;
  border:0;
  border-spacing:0;
  border-collapse:separate;
  background:var(--pmc-surface);
  color:var(--pmc-text);
  font-size:var(--pmc-fs-sm);
  font-weight:400;
  text-align:left;
}
.tr-page .tr-table--matrix{
  min-width:1460px;
}
.tr-page .tr-table--detail{
  min-width:920px;
}
.tr-page .tr-wrap--detail{
  max-height:none;
}
.tr-page .tr-table > thead{
  position:sticky;
  top:0;
  z-index:4;
}
.tr-page .tr-table > thead > tr > th{
  padding:var(--pmc-sp-2) var(--pmc-sp-3);
  border:0;
  border-bottom:2px solid var(--pmc-border);
  background:var(--pmc-grad-head);
  color:var(--pmc-grad-head-text);
  font-size:var(--pmc-fs-xs);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.25;
  text-align:left;
  text-transform:uppercase;
  vertical-align:bottom;
  white-space:nowrap;
}
.tr-page .tr-table > tbody > tr > th,
.tr-page .tr-table > tbody > tr > td{
  padding:var(--pmc-sp-2) var(--pmc-sp-3);
  border:0;
  border-bottom:1px solid var(--pmc-border);
  background:var(--pmc-surface);
  color:var(--pmc-text);
  font-size:var(--pmc-fs-sm);
  font-weight:400;
  line-height:1.35;
  text-align:left;
  vertical-align:middle;
}
.tr-page .tr-table > tbody > tr:last-child > th,
.tr-page .tr-table > tbody > tr:last-child > td{
  border-bottom:0;
}
.tr-page .tr-table > tbody > tr:hover > th,
.tr-page .tr-table > tbody > tr:hover > td,
.tr-page .tr-table > tbody > .tr-row--critical:hover > th,
.tr-page .tr-table > tbody > .tr-row--critical:hover > td,
.tr-page .tr-table > tbody > .tr-row--warning:hover > th,
.tr-page .tr-table > tbody > .tr-row--warning:hover > td,
.tr-page .tr-table > tbody > .tr-row--unknown:hover > th,
.tr-page .tr-table > tbody > .tr-row--unknown:hover > td{
  background:color-mix(in srgb, var(--pmc-primary-soft) 55%, var(--pmc-surface));
}
.tr-page .tr-table > tbody > .tr-row--critical > th,
.tr-page .tr-table > tbody > .tr-row--critical > td{
  background:color-mix(in srgb, var(--pmc-crit-soft) 42%, var(--pmc-surface));
}
.tr-page .tr-table > tbody > .tr-row--warning > th,
.tr-page .tr-table > tbody > .tr-row--warning > td{
  background:color-mix(in srgb, var(--pmc-warn-soft) 42%, var(--pmc-surface));
}
.tr-page .tr-table > tbody > .tr-row--unknown > th,
.tr-page .tr-table > tbody > .tr-row--unknown > td{
  background:color-mix(in srgb, var(--pmc-neutral-soft) 35%, var(--pmc-surface));
}
.tr-page .tr-table--detail > tbody > .tr-row--ok > th:first-child,
.tr-page .tr-table--detail > tbody > .tr-row--ok > td:first-child{
  box-shadow:inset var(--pmc-sp-1) 0 0 var(--pmc-ok);
}
.tr-page .tr-table--detail > tbody > .tr-row--warning > th:first-child,
.tr-page .tr-table--detail > tbody > .tr-row--warning > td:first-child{
  box-shadow:inset var(--pmc-sp-1) 0 0 var(--pmc-warn);
}
.tr-page .tr-table--detail > tbody > .tr-row--critical > th:first-child,
.tr-page .tr-table--detail > tbody > .tr-row--critical > td:first-child{
  box-shadow:inset var(--pmc-sp-1) 0 0 var(--pmc-crit);
}
.tr-page .tr-table--detail > tbody > .tr-row--unknown > th:first-child,
.tr-page .tr-table--detail > tbody > .tr-row--unknown > td:first-child{
  box-shadow:inset var(--pmc-sp-1) 0 0 var(--pmc-neutral);
}
.tr-page .tr-sticky-server{
  position:sticky;
  left:0;
  z-index:2;
  min-width:190px;
  max-width:250px;
  box-shadow:1px 0 0 var(--pmc-border);
}
.tr-page .tr-table > thead > tr > .tr-sticky-server{
  z-index:6;
  background:var(--pmc-grad-head);
}
.tr-page .tr-server-link{
  display:inline-flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  color:var(--pmc-text);
  font-size:var(--pmc-fs-sm);
  font-weight:700;
  text-decoration:none;
}
.tr-page .tr-server-link i{
  color:var(--pmc-text-2);
}
.tr-page .tr-server-link:hover,
.tr-page .tr-server-link:focus{
  color:var(--pmc-primary);
  text-decoration:none;
}
.tr-page .tr-server-meta,
.tr-page .tr-cell-meta{
  display:block;
  margin-top:calc(var(--pmc-sp-1) / 2);
  overflow:hidden;
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
  text-overflow:ellipsis;
  text-transform:none;
  white-space:nowrap;
}
.tr-page .tr-th-label,
.tr-page .tr-th-target{
  display:block;
}
.tr-page .tr-table--matrix .tr-th-label{
  max-width:130px;
  white-space:normal;
}
.tr-page .tr-th-target{
  margin-top:calc(var(--pmc-sp-1) / 2);
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.tr-page .tr-value-cell{
  min-width:92px;
  text-align:center !important;
}
.tr-page .tr-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--pmc-sp-1);
  min-width:78px;
  padding:calc(var(--pmc-sp-1) / 2) var(--pmc-sp-2);
  border:1px solid transparent;
  border-radius:var(--pmc-r-sm);
  font-size:var(--pmc-fs-xs);
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
}
.tr-page .tr-indicator{
  min-width:210px;
  padding-left:var(--pmc-sp-4) !important;
  color:var(--pmc-text) !important;
  font-weight:700 !important;
}
.tr-page .tr-thresholds{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-1);
  min-width:280px;
  flex-wrap:wrap;
}
.tr-page .tr-threshold{
  display:inline-flex;
  align-items:center;
  gap:var(--pmc-sp-1);
  padding:calc(var(--pmc-sp-1) / 2) var(--pmc-sp-2);
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm);
  background:var(--pmc-surface);
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
  white-space:nowrap;
}
.tr-page .tr-detail{
  min-width:180px;
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
}
.tr-page .tr-detail .tr-badge-ico{
  margin-right:var(--pmc-sp-1);
}
.tr-page .tr-detail--ok{
  --pmc-tr-badge-bg:var(--pmc-ok);
}
.tr-page .tr-detail--warning{
  --pmc-tr-badge-bg:var(--pmc-warn);
}
.tr-page .tr-detail--critical{
  --pmc-tr-badge-bg:var(--pmc-crit);
}
.tr-page .tr-detail--unknown,
.tr-page .tr-detail--not_applicable{
  --pmc-tr-badge-bg:var(--pmc-neutral);
}
.tr-page .tr-detail--info{
  --pmc-tr-badge-bg:var(--pmc-info);
}
/* #5268 — une date par famille (GLOBAL STATUS / GLOBAL VARIABLES) */
.tr-page .tr-freshness{
  display:inline-flex;
  align-items:center;
  gap:var(--pmc-sp-1);
}
.tr-page .tr-freshness--stale strong{
  color:var(--pmc-warn);
}
.tr-page .tr-counter-list{
  display:grid;
  min-width:300px;
  gap:var(--pmc-sp-1);
}
.tr-page .tr-counter{
  display:grid;
  grid-template-columns:minmax(170px, 1fr) auto;
  align-items:baseline;
  gap:var(--pmc-sp-3);
}
.tr-page .tr-counter code{
  overflow:hidden;
  padding:0;
  border:0;
  background:transparent;
  color:var(--pmc-text-2);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tr-page .tr-counter strong{
  color:var(--pmc-text);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
  font-weight:600;
  white-space:nowrap;
}
.tr-page .tr-empty{
  padding:var(--pmc-sp-7) var(--pmc-sp-4) !important;
  color:var(--pmc-text-2) !important;
  text-align:center !important;
}
.tr-page .tr-empty i{
  margin-right:var(--pmc-sp-2);
  color:var(--pmc-text-3);
}
.tr-page .tr-notice{
  margin:var(--pmc-sp-4);
  padding:var(--pmc-sp-3);
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md);
  background:var(--pmc-surface-alt);
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-sm);
}
.tr-page .tr-notice--warning{
  --pmc-tr-badge-bg:var(--pmc-warn);
  border-color:var(--pmc-warn-border);
  background:var(--pmc-warn-soft);
  color:var(--pmc-warn);
}
.tr-page [hidden]{
  display:none !important;
}
@media (max-width:768px){
  .tr-page .tr-mem{
    grid-template-columns:minmax(0, 1fr);
  }
  .tr-page .tr-head{
    align-items:flex-start;
    flex-direction:column;
    padding:var(--pmc-sp-3);
  }
  .tr-page .tr-head-pills{
    justify-content:flex-start;
  }
  .tr-page .tr-head-action{
    align-self:stretch;
    justify-content:center;
  }
  .tr-page .tr-toolbar{
    align-items:stretch;
    padding:var(--pmc-sp-2) var(--pmc-sp-3);
    flex-direction:column;
  }
  .tr-page .tr-toolbar-spacer{
    display:none;
  }
  .tr-page .tr-filters{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
  }
  .tr-page .tr-filter-select,
  .tr-page .tr-search{
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .tr-page .tr-search-wrap{
    grid-column:1 / -1;
  }
  .tr-page .tr-search-wrap,
  .tr-page .tr-search,
  .tr-page .tr-search:focus{
    width:100%;
  }
  .tr-page .tr-wrap--matrix{
    max-height:calc(100vh - 210px);
  }
  .tr-page .tr-sticky-server{
    min-width:calc(var(--pmc-h-row) * 5);
    max-width:calc(var(--pmc-h-row) * 5.5);
  }
  .tr-page .tr-table > thead > tr > th,
  .tr-page .tr-table > tbody > tr > th,
  .tr-page .tr-table > tbody > tr > td{
    padding-right:var(--pmc-sp-2);
    padding-left:var(--pmc-sp-2);
  }
}
@media print{
  .tr-page .tr-card{
    box-shadow:none;
  }
  .tr-page .tr-filters{
    display:none;
  }
  .tr-page .tr-wrap{
    overflow:visible;
    max-height:none;
  }
  .tr-page .tr-table--matrix,
  .tr-page .tr-table--detail{
    min-width:0;
  }
}
/* Dashboard/hitRatio (#5339) : la matrice est un pmc-tbl (en-tête clair, zébrage et survol
   génériques, Design Lab §7). Pas de fond de ligne selon l'état : liseré sur la cellule serveur.
   La cellule collante reste opaque (fond de survol posé en calque sur la surface). */
.tr-page .tr-matrix{
  min-width:1460px;
}
.tr-page .tr-matrix .tr-th-label{
  max-width:130px;
  white-space:normal;
}
.tr-page .tr-matrix .tr-th-target{
  display:inline-block;
  color:var(--pmc-th-muted);
}
.tr-page .tr-matrix > tbody > tr > th{
  padding:var(--pmc-sp-2) var(--pmc-sp-3);
  border-bottom:1px solid var(--pmc-border);
  background:var(--pmc-surface);
  font-weight:400;
  text-align:left;
  white-space:normal;
}
.tr-page .tr-matrix > tbody > tr:nth-child(even) > th{
  background:var(--pmc-surface-alt);
}
.tr-page .tr-matrix > tbody > tr:hover > th{
  background:linear-gradient(var(--pmc-row-hover-bg), var(--pmc-row-hover-bg)), var(--pmc-surface);
}
.tr-page .tr-matrix > thead > tr > th{
  z-index:3;
}
.tr-page .tr-matrix > thead > tr > .tr-sticky-server{
  z-index:4;
}
.tr-page .tr-matrix > tbody > .tr-row--critical > th:first-child{
  box-shadow:inset 3px 0 0 var(--pmc-crit), 1px 0 0 var(--pmc-border);
}
.tr-page .tr-matrix > tbody > .tr-row--warning > th:first-child{
  box-shadow:inset 3px 0 0 var(--pmc-warn), 1px 0 0 var(--pmc-border);
}
/* END FAMILY — tuning-ratio host presentation */

/* ==========================================================================
   Info-bulle [data-info] — deplacee du <head> de Layout/headerPma
   (issue #3992). Logique associee : fin de design-system.js.
   ========================================================================== */
.pmacontrol-info-bubble {
    position: fixed;
    z-index: 99999;
    max-width: 480px;
    padding: 6px 10px;
    background: rgba(20, 20, 20, 0.96);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    display: none;
    width: max-content;
    white-space: normal;
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Compare/menu (#3400)
   Fragment Light autonome place entre le formulaire Compare/index et le
   resultat Compare/getObjectDiff. Le ruban conserve une seule ligne et defile
   horizontalement aux largeurs etroites.
   -------------------------------------------------------------------------- */
.pmc-app.pmc-compare-menu{
  display:block;
  min-width:0;
  max-width:100%;
  margin-top:var(--pmc-sp-4);
}
.pmc-compare-menu .pmc-compare-menu-nav{
  flex-wrap:nowrap;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  padding:var(--pmc-sp-1) var(--pmc-sp-2) 0;
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md);
  background:var(--pmc-surface);
  box-shadow:var(--pmc-shadow-sm);
  scrollbar-width:thin;
}
.pmc-compare-menu .pmc-compare-menu-item{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  gap:var(--pmc-sp-2);
  min-height:var(--pmc-h-ctl-lg);
  margin-bottom:-1px;
  padding:var(--pmc-sp-2) var(--pmc-sp-4);
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--pmc-text-2);
  font:600 var(--pmc-fs-sm)/1.2 var(--pmc-font-sans);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--pmc-transition), background var(--pmc-transition), border-color var(--pmc-transition);
}
.pmc-compare-menu a.pmc-compare-menu-item:hover{
  background:var(--pmc-surface-alt);
  color:var(--pmc-text);
  text-decoration:none;
}
.pmc-compare-menu .pmc-compare-menu-item.pmc-active{
  border-bottom-color:var(--pmc-primary);
  background:var(--pmc-primary-soft);
  color:var(--pmc-primary);
}
.pmc-compare-menu .pmc-compare-menu-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--pmc-h-ctl-sm);
  background:var(--pmc-neutral-soft);
  color:var(--pmc-text-2);
}
.pmc-compare-menu .pmc-active .pmc-compare-menu-count{
  background:var(--pmc-primary);
  color:var(--pmc-on-primary);
}
.pmc-compare-menu .pmc-compare-menu-disabled{
  color:var(--pmc-text-3);
  cursor:not-allowed;
}
.pmc-compare-menu .pmc-compare-menu-disabled .pmc-compare-menu-count{
  background:var(--pmc-surface-alt);
  color:var(--pmc-text-3);
  box-shadow:inset 0 0 0 1px var(--pmc-border);
}
@media (max-width:640px){
  .pmc-compare-menu .pmc-compare-menu-item{
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
    padding-right:var(--pmc-sp-3);
    padding-left:var(--pmc-sp-3);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Compare/getObjectDiff (#3398)
   Fragment Light autonome : le parent ferme volontairement son pmc-app avant
   les deux fragments de resultat. La table et ses blocs SQL restent contenus
   dans leur propre region de defilement.
   -------------------------------------------------------------------------- */
.pmc-app.pmc-compare-object-diff{
  display:grid;
  min-width:0;
  max-width:100%;
  gap:var(--pmc-sp-4);
  margin-top:var(--pmc-sp-4);
}
.pmc-compare-object-diff .pmc-compare-object-warning{
  margin:0;
}
.pmc-compare-object-diff .pmc-compare-object-alert-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--pmc-h-ctl-sm);
  height:var(--pmc-h-ctl-sm);
  border:1px solid currentColor;
  border-radius:var(--pmc-r-full);
  font-size:var(--pmc-fs-sm);
  font-weight:700;
}
.pmc-compare-object-diff .pmc-compare-object-card{
  min-width:0;
  max-width:100%;
}
.pmc-compare-object-diff .pmc-compare-object-toolbar{
  justify-content:space-between;
}
.pmc-compare-object-diff .pmc-compare-object-title{
  margin:0;
  font-size:var(--pmc-fs-base);
}
.pmc-compare-object-diff .pmc-compare-object-direction{
  margin-left:auto;
}
.pmc-compare-object-diff .pmc-compare-object-scroll{
  max-width:100%;
  max-height:calc(var(--pmc-h-row) * 16);
  contain:paint;
  overflow:auto;
  overscroll-behavior:contain;
}
.pmc-compare-object-diff .pmc-compare-object-table{
  min-width:calc(var(--pmc-h-row) * 24);
  table-layout:fixed;
}
.pmc-compare-object-diff .pmc-compare-object-table th:nth-child(1){
  width:calc(var(--pmc-h-row) * 6);
}
.pmc-compare-object-diff .pmc-compare-object-table th:nth-child(2),
.pmc-compare-object-diff .pmc-compare-object-table th:nth-child(3){
  width:calc(var(--pmc-h-row) * 3.5);
}
.pmc-compare-object-diff .pmc-compare-object-table th:nth-child(4){
  width:calc(var(--pmc-h-row) * 3.75);
}
.pmc-compare-object-diff .pmc-compare-object-table > tbody > tr > th,
.pmc-compare-object-diff .pmc-compare-object-table > tbody > tr > td{
  height:auto;
  padding:var(--pmc-sp-3);
  border-bottom:1px solid var(--pmc-border);
  vertical-align:top;
}
.pmc-compare-object-diff .pmc-compare-object-table > tbody > tr:last-child > th,
.pmc-compare-object-diff .pmc-compare-object-table > tbody > tr:last-child > td{
  border-bottom:0;
}
.pmc-compare-object-diff .pmc-compare-object-table > tbody > tr > th{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--pmc-surface);
  color:var(--pmc-text);
  font-size:var(--pmc-fs-sm);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
}
.pmc-compare-object-diff .pmc-compare-object-table > thead > tr > th:first-child{
  position:sticky;
  left:0;
  z-index:3;
  background:var(--pmc-th-bg);
  box-shadow:1px 0 0 var(--pmc-border);
}
.pmc-compare-object-diff .pmc-compare-object-table > tbody > tr:nth-child(even) > th{
  background:var(--pmc-surface-alt);
}
/* La cellule collante reste opaque : elle suit le fond de survol de la ligne (Design Lab §7). */
.pmc-compare-object-diff .pmc-compare-object-table > tbody > tr:hover > th{
  background:linear-gradient(var(--pmc-row-hover-bg), var(--pmc-row-hover-bg)), var(--pmc-surface);
}
.pmc-compare-object-diff .pmc-compare-object-table > tbody > tr > th:first-child{
  box-shadow:1px 0 0 var(--pmc-border);
}
.pmc-compare-object-diff .pmc-compare-object-row-different > th:first-child{
  box-shadow:
    inset var(--pmc-sp-1) 0 0 var(--pmc-warn),
    1px 0 0 var(--pmc-border);
}
.pmc-compare-object-diff .pmc-compare-object-name code{
  display:inline-block;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.pmc-compare-object-diff .pmc-compare-object-status{
  text-align:center;
}
.pmc-compare-object-diff .pmc-compare-object-status .pmc-badge{
  justify-content:center;
  min-width:calc(var(--pmc-h-row) * 2.25);
}
.pmc-compare-object-diff .pmc-compare-object-sql-cell{
  min-width:0;
  overflow:hidden;
}
.pmc-compare-object-diff .pmc-compare-object-sql-code{
  max-width:100%;
  max-height:calc(var(--pmc-h-row) * 8);
  overflow:auto;
  margin:0;
  padding:var(--pmc-sp-3);
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm);
  background:var(--pmc-surface-alt);
  line-height:var(--pmc-lh);
  white-space:pre;
  word-break:normal;
}
.pmc-compare-object-diff .pmc-compare-object-sql-code .pmc-compare-object-sql-word,
.pmc-compare-object-diff .pmc-compare-object-sql-boundary{
  color:var(--pmc-text);
}
.pmc-compare-object-diff .pmc-compare-object-sql-error{
  color:var(--pmc-crit);
}
.pmc-compare-object-diff .pmc-compare-object-sql-comment{
  color:var(--pmc-text-3);
}
.pmc-compare-object-diff .pmc-compare-object-no-sql{
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-sm);
}
.pmc-compare-object-diff .pmc-compare-object-note-title{
  margin:0 0 var(--pmc-sp-2);
  color:var(--pmc-text);
  font-size:var(--pmc-fs-base);
}
.pmc-compare-object-diff .pmc-compare-object-list{
  display:grid;
  gap:var(--pmc-sp-2);
  margin:0;
  padding-left:var(--pmc-sp-5);
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-sm);
}
.pmc-compare-object-diff .pmc-compare-object-textarea{
  min-height:calc(var(--pmc-h-row) * 10);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
  line-height:var(--pmc-lh);
  resize:vertical;
}
@media (max-width:768px){
  .pmc-compare-object-diff .pmc-compare-object-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  .pmc-compare-object-diff .pmc-compare-object-direction{
    width:100%;
    margin-left:0;
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Monitoring/query (Query Analyzer, #3053)
   Classes ponctuelles non couvertes par les composants génériques.
   Tokens uniquement.
   -------------------------------------------------------------------------- */
.pmc-qa-filters{
  display:grid; gap:var(--pmc-sp-3); align-items:end;
  grid-template-columns:minmax(220px,1.3fr) minmax(150px,1fr) minmax(150px,1fr) minmax(150px,1fr) minmax(120px,.7fr) auto;
}
.pmc-qa-filters .pmc-field{ margin-bottom:0; }
.pmc-qa-submit{ justify-self:end; }
.pmc-qa-tbl{ min-width:1150px; }
.pmc-qa-tbl td{ height:auto; padding-top:6px; padding-bottom:6px; vertical-align:top; }
.pmc-qa-qcell{ max-width:520px; min-width:340px; }
.pmc-qa-rank{ color:var(--pmc-text-3); font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); }
.pmc-qa-db{ font-weight:600; white-space:nowrap; }
.pmc-qa-seen{ font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); white-space:nowrap; }
.pmc-qa-tools{ display:flex; gap:var(--pmc-sp-1); margin-top:var(--pmc-sp-2); align-items:center; flex-wrap:wrap; }
.pmc-qa-qcell .pmc-sql{ background:none; border:0; padding:0; }
@media (max-width:1024px){
  .pmc-qa-filters{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pmc-qa-submit{ grid-column:3; }
}
@media (max-width:768px){
  .pmc-qa-filters{ grid-template-columns:1fr; }
  .pmc-qa-submit{ grid-column:auto; justify-self:stretch; }
  .pmc-qa-submit .pmc-btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — DeployRsaKey/index (#3053)
   Étape 1 : deux cartes d'authentification côte à côte séparées par « OR »,
   pastille d'étape dans les pmc-card-head, chips des clefs liées.
   -------------------------------------------------------------------------- */
.pmc-auth-grid{
  display:grid; gap:var(--pmc-sp-4);
  grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr);
  align-items:stretch;
}
.pmc-or-divider{
  display:flex; flex-direction:column; align-items:center; gap:var(--pmc-sp-2);
  color:var(--pmc-text-3); font:700 var(--pmc-fs-xs)/1 var(--pmc-font-sans); letter-spacing:.1em;
  padding:var(--pmc-sp-4) 0;
}
.pmc-or-divider::before, .pmc-or-divider::after{
  content:""; flex:1; width:1px; background:var(--pmc-border);
}
.pmc-cred-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:var(--pmc-sp-4); }
.pmc-step-no{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.18); font:700 11px/1 var(--pmc-font-mono);
}
.pmc-key-chip{
  display:inline-flex; align-items:center; gap:4px; margin:1px 2px 1px 0;
  padding:2px 8px; border-radius:var(--pmc-r-full);
  background:var(--pmc-primary-soft); color:var(--pmc-primary);
  font:600 11px/1.4 var(--pmc-font-sans); white-space:nowrap;
}
/* Transitionnel : classe posée par le JS injecté du contrôleur DeployRsaKey
   sur les lignes où la clef publique sélectionnée est déjà déployée.
   Design Lab §7 (#5390) : pas de fond de ligne selon l'état, liseré + texte atténué. */
.pmc-app .pmc-tbl tbody tr.pma-success td:first-child{ box-shadow:inset 3px 0 0 var(--pmc-ok); }
.pmc-app .pmc-tbl tbody tr.pma-success td{ color:var(--pmc-text-3); }
@media (max-width:1024px){
  .pmc-auth-grid{ grid-template-columns:1fr; }
  .pmc-or-divider{ flex-direction:row; padding:0; }
  .pmc-or-divider::before, .pmc-or-divider::after{ height:1px; width:auto; }
  .pmc-cred-grid{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — ProxySQL/index (#3053)
   Fleet listing: one card per ProxySQL instance (responsive grid), gradient
   header (logo + admin endpoint + state), meta strip (frontend chip +
   backend summary), dense backend table, action footer.
   -------------------------------------------------------------------------- */
.pmc-proxy-grid{
  display:grid; gap:var(--pmc-sp-4);
  grid-template-columns:repeat(auto-fill,minmax(620px,1fr));
}
@media (max-width:1360px){
  .pmc-proxy-grid{ grid-template-columns:minmax(0,1fr); }
}
.pmc-proxy-card{ display:flex; flex-direction:column; }
.pmc-proxy-card > .pmc-card-foot{ margin-top:auto; }
.pmc-proxy-logo{
  flex:none; border-radius:var(--pmc-r-md);
  background:rgba(255,255,255,.14); padding:var(--pmc-sp-1);
}
.pmc-proxy-who{ min-width:0; display:flex; flex-direction:column; }
.pmc-proxy-who b{
  font-size:var(--pmc-fs-md);
  display:flex; align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap;
}
.pmc-proxy-who b a{ color:var(--pmc-grad-head-text); }
.pmc-proxy-who .pmc-badge{ margin-left:0; }
.pmc-proxy-who small{
  display:block; color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs); font-weight:400;
}
.pmc-proxy-who small code{
  background:rgba(255,255,255,.12); border-color:transparent;
  color:var(--pmc-grad-head-text);
}
.pmc-proxy-meta{
  display:flex; gap:var(--pmc-sp-3) var(--pmc-sp-4); align-items:center; flex-wrap:wrap;
  padding:var(--pmc-sp-2) var(--pmc-sp-4); border-bottom:1px solid var(--pmc-border);
  background:var(--pmc-surface-alt); font-size:var(--pmc-fs-sm); color:var(--pmc-text-2);
}
.pmc-proxy-meta b{ color:var(--pmc-text); }
.pmc-section-label{
  font-size:var(--pmc-fs-xs); font-weight:700; color:var(--pmc-text-3);
  text-transform:uppercase; letter-spacing:.08em;
}
.pmc-front-chip{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap;
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
  padding:4px 10px; font-size:var(--pmc-fs-sm); background:var(--pmc-surface);
}
@media (max-width:768px){
  .pmc-proxy-card .pmc-card-foot .pmc-btn{ flex:1 1 30%; }
}

/* ==========================================================================
   SCREEN-SPECIFIC — About/index (#3053)
   ========================================================================== */
.pmc-about-hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--pmc-sp-2); padding:var(--pmc-sp-6) var(--pmc-sp-4);
}
.pmc-about-brand{ font-size:var(--pmc-fs-2xl); font-weight:700; letter-spacing:.02em; color:var(--pmc-text); }
.pmc-about-logo{ border-radius:var(--pmc-r-sm); flex:none; }
.pmc-about-list{ margin:0; padding-left:var(--pmc-sp-4); display:grid; gap:var(--pmc-sp-1); }

/* ==========================================================================
   SCREEN-SPECIFIC — Acl/index (#3053)
   ========================================================================== */
.pmc-acl-matrix th.pmc-acl-col{ text-align:center; white-space:nowrap; }
.pmc-acl-matrix td.pmc-acl-cell{ text-align:center; }
.pmc-acl-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:var(--pmc-r-full);
  font-size:var(--pmc-fs-xs); font-weight:700; line-height:1;
  border:1px solid transparent;
}
.pmc-acl-yes{ color:var(--pmc-ok); background:var(--pmc-ok-soft); border-color:var(--pmc-ok-border); }
.pmc-acl-no{ color:var(--pmc-text-3); background:var(--pmc-neutral-soft); }

/* --------------------------------------------------------------------------
   19. SCREEN-SPECIFIC — Alias/index (#3053)
   Confiance du rapprochement alias DNS <-> serveur : 4 paliers, appliques a la
   fois sur les <option> de la liste et sur le <select> lui-meme (bascule par
   le script de la vue). Tokens uniquement.
   -------------------------------------------------------------------------- */
.pmc-alias-col-server{ min-width:24rem; }
.pmc-alias-match-1{ background:color-mix(in srgb, var(--pmc-ok-soft) 25%, var(--pmc-surface)); color:var(--pmc-text); }
.pmc-alias-match-2{ background:color-mix(in srgb, var(--pmc-ok-soft) 50%, var(--pmc-surface)); color:var(--pmc-text); }
.pmc-alias-match-3{ background:color-mix(in srgb, var(--pmc-ok-soft) 75%, var(--pmc-surface)); color:var(--pmc-text); }
.pmc-alias-match-4{ background:var(--pmc-ok-soft); color:var(--pmc-text); }
.pmc-select.pmc-alias-match-1,
.pmc-select.pmc-alias-match-2,
.pmc-select.pmc-alias-match-3,
.pmc-select.pmc-alias-match-4{ border-color:var(--pmc-ok-border); }
.pmc-alias-swatch{
  display:inline-block; width:14px; height:14px; vertical-align:middle;
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Architecture/index (#3053)
   Galerie des diagrammes topologiques (dot3 SVG) — le conteneur ".grid" et
   les cellules ".grid-item" restent tels quels : ce sont les sélecteurs de
   la galerie Masonry initialisée par Architecture/topology.js.
   Fond topologique (#5163) : les SVG Graphviz sont transparents, le canvas
   reprend la tuile historique v4 `image/main/bg.png` (5 px, répétée) que
   portait l'ancienne classe `.mpd`. La même tuile est partagée avec le
   viewport de Cluster/svg pour que les deux écrans présentent le même espace
   topologique ; `--pmc-surface-alt` reste la couleur de repli.
   -------------------------------------------------------------------------- */
.pmc-topology-canvas{
  box-sizing:border-box;
  width:100%;
  background-color:var(--pmc-surface-alt);
  background-image:url('../image/main/bg.png');
  background-repeat:repeat;
  border-radius:0 0 calc(var(--pmc-r-md) - 1px) calc(var(--pmc-r-md) - 1px);
  min-height:160px;
}
.pmc-topology-item{
  display:inline-block; vertical-align:top;
  box-sizing:border-box; max-width:100%;
  padding:var(--pmc-sp-2); margin:0;
}
.pmc-topology-item > svg{
  display:block; width:auto; max-width:100%; height:auto;
}
.pmc-topology-item.pmc-is-debug{
  outline:1px solid var(--pmc-border-strong);
  outline-offset:-1px;
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Agent/logs (#3053)
   -------------------------------------------------------------------------- */
/* The page layout supplies the outer gutters; align the log card with its banner. */
.pmc-layout-content > .pmc-agent-logs > .pmc-wrap{ padding-inline:0; }
/* Terminal-style log readout: always renders on the dark gradient band
   (same tokens as pmc-card-head) so ANSI-converted log colors stay legible
   in all 3 themes, the way a real terminal output would. */
.pmc-log-viewer{
  display:block; margin:0; overflow:auto; white-space:pre;
  font-family:var(--pmc-font-mono); font-size:12px; line-height:1.55;
  background:var(--pmc-grad-head); color:var(--pmc-grad-head-text);
  border-radius:var(--pmc-r-md); padding:var(--pmc-sp-3) var(--pmc-sp-4);
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — AuditLog/index (#3053)
   Classes ponctuelles non couvertes par les composants génériques.
   Tokens uniquement.
   -------------------------------------------------------------------------- */
.pmc-al-chart{ position:relative; height:140px; }
.pmc-al-chart-sm{ height:90px; margin-top:var(--pmc-sp-3); }
.pmc-tbl td.pmc-al-empty-cell{ height:auto; padding:var(--pmc-sp-3); }
.pmc-tbl td.pmc-al-empty-cell .pmc-empty{ border:0; padding:var(--pmc-sp-4); background:none; }
.pmc-al-muted{ color:var(--pmc-text-3); }
.pmc-al-drain-files{ margin:var(--pmc-sp-2) 0 0; padding-left:var(--pmc-sp-4); }
.pmc-tbl td.pmc-al-detail{ color:var(--pmc-text-2); font-size:var(--pmc-fs-xs); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — AuditLog/visitors (#3053)
   Flux chronologique : les colonnes « Route » et « Mother page » portent une
   URI longue plus une sous-ligne, elles doivent donc pouvoir passer à la ligne
   là où pmc-mono impose un nowrap. Tokens uniquement.
   -------------------------------------------------------------------------- */
.pmc-tbl td.pmc-al-route{
  height:auto; padding-top:var(--pmc-sp-1); padding-bottom:var(--pmc-sp-1);
  vertical-align:top; white-space:normal;
}
.pmc-al-uri{
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs);
  color:var(--pmc-text-2); word-break:break-all;
}
.pmc-al-uid{ font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); }
.pmc-al-mother{
  display:block; margin-top:2px; font-size:var(--pmc-fs-xs);
  color:var(--pmc-text-2); word-break:break-all;
}
.pmc-al-mother::before{ content:"↑ "; color:var(--pmc-text-3); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Audit/general_log (#3053)
   Filtre "serveur MySQL" rendu par le select natif recherchable partage :
   la ligne de filtres reste sur une grille compacte et le bouton s'aligne a
   droite. L'etat d'un serveur injoignable utilise `.pmc-opt-err`, commun a
   tous les selecteurs. Tokens uniquement.
   -------------------------------------------------------------------------- */
.pmc-audit-filters{
  display:grid; gap:var(--pmc-sp-3); align-items:end;
  grid-template-columns:minmax(240px,1fr) auto;
}
.pmc-audit-filters .pmc-field{ margin-bottom:0; }
.pmc-audit-submit{ justify-self:end; }
@media (max-width:640px){
  .pmc-audit-filters{ grid-template-columns:minmax(0,1fr); }
  .pmc-audit-submit{ justify-self:stretch; }
  .pmc-audit-submit .pmc-btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — famille AuditLog (#3053)
   Partagé par AuditLog/user et AuditLog/page : une tuile KPI peut porter un
   horodatage complet ou une IP plutôt qu'un nombre, et ne peut donc pas
   s'afficher au corps 2xl des autres tuiles sans déborder de la grille.
   Tokens uniquement — le reste de ces écrans réutilise les aides pmc-al-*
   introduites par AuditLog/index et AuditLog/visitors.
   -------------------------------------------------------------------------- */
.pmc-stat .pmc-value.pmc-al-stat-ts{
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-md);
  font-weight:600; color:var(--pmc-text-2); word-break:break-all;
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — AuditLog/page (#3053)
   Detail d'un rendu de page : une tuile KPI peut porter un horodatage ou une
   IP (pas un chiffre), et le tableau « Tree » distingue le rendu racine de ses
   requetes AJAX filles par un lisere + une indentation. Tokens uniquement.
   -------------------------------------------------------------------------- */
.pmc-tbl tbody tr.pmc-al-tree-root > td{
  background:var(--pmc-primary-soft); font-weight:600;
}
.pmc-tbl tbody tr.pmc-al-tree-root > td:first-child{
  box-shadow:inset 3px 0 0 var(--pmc-primary);
}
.pmc-tbl td.pmc-al-tree-child{ padding-left:var(--pmc-sp-6); }
.pmc-tbl td.pmc-al-tree-child::before{ content:"↳ "; color:var(--pmc-text-3); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — AuditLog/verify (#3053)
   Verification de la chaine de hachage : la note sous les tuiles KPI doit
   suivre le rythme vertical de la carte (un <p> natif porte une marge 1em),
   et la colonne « reasons » empile plusieurs motifs par ligne, ce qui exige
   une cellule a hauteur libre alignee en haut. Tokens uniquement — le reste
   de l'ecran reutilise les composants generiques (pmc-card-head-crit,
   pmc-stat, pmc-badge, pmc-tbl).
   -------------------------------------------------------------------------- */
.pmc-al-verify-note{ margin:var(--pmc-sp-4) 0 0; }
.pmc-tbl td.pmc-al-reasons{
  height:auto; padding-top:var(--pmc-sp-1); padding-bottom:var(--pmc-sp-1);
  vertical-align:top; white-space:normal;
}
.pmc-tbl td.pmc-al-reasons > div + div{ margin-top:2px; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — AuditLog/correlation (#3053)
   Correlation d'une requete : deux blocs de paires cle/valeur (entete de la
   requete, metriques client) dont la valeur est un identifiant, une URI ou un
   horodatage qui doit pouvoir se couper. Remplace l'ancienne grille .al-kv.
   Tokens uniquement — le reste de l'ecran reutilise les aides pmc-al-*
   introduites par AuditLog/index, /visitors et /page.
   -------------------------------------------------------------------------- */
.pmc-al-kv{
  display:grid; grid-template-columns:180px minmax(0,1fr);
  gap:var(--pmc-sp-1) var(--pmc-sp-4); align-items:baseline;
}
.pmc-al-kv-k{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }
.pmc-al-kv-v{
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-sm);
  color:var(--pmc-text); word-break:break-all;
}
@media (max-width:640px){
  .pmc-al-kv{ grid-template-columns:minmax(0,1fr); gap:0; }
  .pmc-al-kv-v{ margin-bottom:var(--pmc-sp-2); }
}

/* --------------------------------------------------------------------------
   FAMILLE — pastilles user-agent (App\Library\Audit\UaIcon, #3073)
   Aide partagée, pas propre à un écran : le helper UaIcon rendait des icônes
   Font Awesome colorées en style inline, il rend désormais un pmc-badge dont
   le ton vient des variantes de statut. Ces pastilles vivent dans des
   cellules de tableau : le libellé de famille ne doit pas se couper sur deux
   lignes, et une famille inconnue reste lisible mais discrète.
   Tokens uniquement.
   -------------------------------------------------------------------------- */
.pmc-ua{ white-space:nowrap; }
.pmc-ua > .pmc-dot{ flex:0 0 auto; }
.pmc-ua-unknown{ font-weight:500; opacity:.85; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — AuthSession/tokenMismatch (#3053)
   Diagnostic du pipeline de session persistante : le chemin du fichier de log
   et les extraits d'User-Agent sont des chaines longues qui doivent pouvoir se
   couper, la table d'evenements garde des colonnes de largeur fixe (l'ancien
   <colgroup style="width:…">), et un <code> pose dans une alerte au fond
   sature doit rester lisible (le fond surface-alt par defaut y passe sous le
   texte clair). Tokens uniquement.
   -------------------------------------------------------------------------- */
.pmc-as-file{ display:inline-block; max-width:100%; word-break:break-all; }
.pmc-as-note{ margin:0; }
.pmc-as-ev-scroll{ max-height:640px; overflow-y:auto; }
table.pmc-as-ev{ table-layout:fixed; }
.pmc-as-ev col.pmc-as-c-ts{ width:270px; }
.pmc-as-ev col.pmc-as-c-reason{ width:210px; }
.pmc-as-ev col.pmc-as-c-sel{ width:140px; }
.pmc-as-ev col.pmc-as-c-ip{ width:130px; }
.pmc-tbl td.pmc-as-sel, .pmc-tbl td.pmc-as-ua{
  height:auto; padding-top:var(--pmc-sp-1); padding-bottom:var(--pmc-sp-1);
  vertical-align:top; white-space:normal; word-break:break-all;
}
.pmc-tbl td.pmc-as-ua{
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2);
}

/* --------------------------------------------------------------------------
   SHARED — Common/displayClientEnvironment (#3073, #3128)
   Barre de filtre Client / Environnement / Tag partagee par ~21 ecrans.
   #4262 : barre compacte — plus de carte ni de fond, libelle et select sur
   la meme ligne, selects en mode bouton (`data-pmc-search-toggle`, rendu
   bootstrap-select). Les regles de hauteur sur la listbox native ne
   concernent que le repli sans JS, d'ou le `:not(.pmc-ssel-native)` — sans
   lui, le min-height s'appliquerait a l'element masque une fois le widget
   monte. Tokens uniquement.
   -------------------------------------------------------------------------- */
.pmc-cef{ margin-bottom:var(--pmc-sp-3); }
/* #4469 — dans une grille pmc-wrap / pmc-stack le gap espace déjà la barre : pas de marge en doublon. */
.pmc-wrap > .pmc-cef, .pmc-stack > .pmc-cef{ margin-bottom:0; }
.pmc-cef-bar{ align-items:center; gap:var(--pmc-sp-2) var(--pmc-sp-4); }
.pmc-cef-field{
  display:flex; align-items:center; gap:var(--pmc-sp-2);
  margin-bottom:0; flex:0 1 auto; min-width:0;
}
.pmc-cef-field label{ margin-bottom:0; white-space:nowrap; }
.pmc-cef-field .pmc-ssel{ flex:1 1 auto; min-width:170px; max-width:240px; }
.pmc-cef-select:not(.pmc-ssel-native){
  flex:1 1 auto; min-width:170px; max-width:240px;
  height:auto; min-height:calc(var(--pmc-h-ctl) * 2.5);
  padding:var(--pmc-sp-1) var(--pmc-sp-2);
}
.pmc-cef-select:not(.pmc-ssel-native) option{ padding:2px var(--pmc-sp-1); }
.pmc-cef-actions{ flex:0 0 auto; }
@media (max-width:768px){
  .pmc-cef-field{ flex:1 1 100%; }
  .pmc-cef-field .pmc-ssel,
  .pmc-cef-select:not(.pmc-ssel-native){ max-width:none; }
  .pmc-cef-actions{ flex:1 1 100%; }
  .pmc-cef-actions .pmc-btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   FAMILLE — select natif recherchable [data-pmc-search] (#3073)
   Amélioration progressive appliquée par design-system.js à un <select> qui
   porte `data-pmc-search` : le select natif reste le contrôle du formulaire
   (il est seulement masqué visuellement, jamais `display:none`, pour que la
   validation HTML puisse encore le cibler) et un combobox `pmc-ssel` le
   double avec un champ de recherche et une liste filtrable. Reprend le
   vocabulaire visuel de `pmc-dsel` (panneau, liste, coche) sans toucher à ce
   composant. Les classes d'état portées par les <option> (`pmc-opt-err`, …)
   sont recopiées sur les <li> : rien n'est redéfini ici pour ne pas les
   écraser. Tokens uniquement.
   -------------------------------------------------------------------------- */
/* Le composant peut être injecté dans un hôte Bootstrap non migré, sans
   `.pmc-app` parent. Il porte donc lui-même sa couleur de thème afin que son
   panneau `--pmc-surface` et ses options restent lisibles en thème sombre. */
.pmc-ssel{ position:relative; min-width:0; color:var(--pmc-text); }
.pmc-ssel.pmc-select-auto{
  display:inline-block; width:auto; min-width:min(100%, 260px); max-width:100%; vertical-align:middle;
}
.pmc-ssel.pmc-select-srv{ max-width:min(100%, 300px); }
/* La spécificité de la combinaison empêche un réordonnancement des deux règles
   précédentes de remplacer la borne du conteneur ou le cap serveur. */
.pmc-ssel.pmc-select-auto.pmc-select-srv{ max-width:min(100%, 300px); }
.pmc-ssel-native{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none;
}
.pmc-ssel-control{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-1);
  width:100%; min-height:var(--pmc-h-ctl); padding:2px 30px 2px var(--pmc-sp-2);
  position:relative; cursor:text;
  background:var(--pmc-surface); border:1px solid var(--pmc-border-strong); border-radius:var(--pmc-r-sm);
  transition:border-color var(--pmc-transition), box-shadow var(--pmc-transition);
}
.pmc-ssel-control::after{
  content:""; position:absolute; right:12px; top:50%; margin-top:-2px;
  border:4px solid transparent; border-top-color:var(--pmc-text-2);
}
.pmc-ssel-control:hover{ border-color:var(--pmc-text-3); }
.pmc-ssel.pmc-open .pmc-ssel-control, .pmc-ssel-control:focus-within{
  outline:none; border-color:var(--pmc-primary); box-shadow:0 0 0 3px var(--pmc-focus-ring);
}
.pmc-ssel-chips{ display:contents; }
.pmc-ssel-input{
  flex:1 1 90px; min-width:90px; height:calc(var(--pmc-h-ctl) - 6px); padding:0;
  font:400 var(--pmc-fs-base)/1.4 var(--pmc-font-sans); color:var(--pmc-text);
  background:none; border:0; outline:none; text-overflow:ellipsis;
}
.pmc-ssel-input::placeholder{ color:var(--pmc-text-3); }
.pmc-ssel-chip{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-1); max-width:100%;
  padding:2px 4px 2px 7px; border-radius:var(--pmc-r-sm);
  background:var(--pmc-primary-soft); color:var(--pmc-primary);
  font-size:var(--pmc-fs-xs); font-weight:600; white-space:nowrap;
}
.pmc-ssel-chip > span{ overflow:hidden; text-overflow:ellipsis; }
.pmc-ssel-chip-x{
  flex:none; padding:0 3px; border:0; background:none; cursor:pointer;
  color:inherit; font:600 var(--pmc-fs-sm)/1 var(--pmc-font-sans); border-radius:var(--pmc-r-sm);
}
.pmc-ssel-chip-x:hover{ background:var(--pmc-surface); }
.pmc-ssel-chip-x:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--pmc-focus-ring); }
.pmc-ssel-panel{
  position:absolute; z-index:var(--pmc-z-dropdown); top:calc(100% + 4px); left:0; min-width:100%; max-width:100%;
  background:var(--pmc-surface); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md);
  box-shadow:var(--pmc-shadow-md); display:none; overflow:hidden;
}
.pmc-ssel.pmc-open .pmc-ssel-panel{ display:block; }
.pmc-ssel.pmc-ssel-up .pmc-ssel-panel{ top:auto; bottom:calc(100% + 4px); }
.pmc-ssel-actions{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--pmc-sp-1);
  padding:var(--pmc-sp-1) var(--pmc-sp-2);
  background:var(--pmc-surface-alt); border-bottom:1px solid var(--pmc-border);
}
.pmc-ssel-list{
  position:relative; max-height:260px; overflow:auto;
  margin:0; padding:var(--pmc-sp-1); list-style:none;
}
.pmc-ssel-opt{
  display:flex; align-items:center; gap:var(--pmc-sp-2);
  padding:6px var(--pmc-sp-2); font-size:var(--pmc-fs-sm);
  border-radius:var(--pmc-r-sm); cursor:pointer;
}
.pmc-ssel-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmc-ssel-opt:hover{ background:var(--pmc-surface-alt); }
.pmc-ssel-opt.pmc-ssel-active{ background:var(--pmc-primary-soft); }
.pmc-ssel-opt.pmc-selected{ font-weight:600; }
.pmc-ssel-opt.pmc-selected::after{ content:"✓"; margin-left:auto; padding-left:var(--pmc-sp-2); }
.pmc-ssel-opt.pmc-ssel-off{ opacity:.5; cursor:not-allowed; }
.pmc-ssel-group{
  padding:var(--pmc-sp-2) var(--pmc-sp-2) var(--pmc-sp-1);
  font-size:var(--pmc-fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--pmc-text-3);
}
.pmc-ssel-empty{
  padding:var(--pmc-sp-3); font-size:var(--pmc-fs-sm);
  color:var(--pmc-text-3); text-align:center;
}
.pmc-ssel-disabled .pmc-ssel-control{
  background:var(--pmc-surface-alt); color:var(--pmc-text-3); cursor:not-allowed;
}
/* Mode bouton — `data-pmc-search-toggle` (#4262). Rendu bootstrap-select :
   fermé, un bouton résume la sélection (repli quand rien n'est choisi,
   valeurs jointes, puis modèle `{n}` de `data-pmc-search-count` au-delà de
   2) ; ouvert, la recherche est le premier bloc du panneau. */
.pmc-ssel-btn .pmc-ssel-control{ padding:0; cursor:pointer; }
.pmc-ssel-toggle{
  display:flex; align-items:center; width:100%; min-height:calc(var(--pmc-h-ctl) - 2px);
  margin:0; padding:0 28px 0 var(--pmc-sp-2); border:0; background:none; cursor:pointer;
  font:400 var(--pmc-fs-base)/1.4 var(--pmc-font-sans); color:var(--pmc-text);
  text-align:left; outline:none;
}
.pmc-ssel-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmc-ssel-value-empty{ color:var(--pmc-text-3); }
.pmc-ssel-search{
  padding:var(--pmc-sp-1) var(--pmc-sp-2);
  background:var(--pmc-surface-alt); border-bottom:1px solid var(--pmc-border);
}
.pmc-ssel-search .pmc-ssel-input{
  flex:none; width:100%; min-width:0; height:calc(var(--pmc-h-ctl) - 4px);
  padding:0 var(--pmc-sp-1);
  background:var(--pmc-surface); border:1px solid var(--pmc-border-strong); border-radius:var(--pmc-r-sm);
}
.pmc-ssel-search .pmc-ssel-input:focus{
  border-color:var(--pmc-primary); box-shadow:0 0 0 2px var(--pmc-focus-ring);
}
@media (max-width:768px){
  .pmc-ssel-control{ min-height:40px; }
  .pmc-ssel-opt{ padding:9px var(--pmc-sp-2); }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Backup/index (#3053)
   Console de sauvegarde : 8 onglets (vue d'ensemble, plans, executions,
   artefacts, restaurations, stockage, calendrier, reglages) rendus cote
   serveur ET re-rendus par App/Webroot/js/Backup/console.js a chaque
   rafraichissement / pagination / commande. Les classes ci-dessous sont donc
   partagees par la vue PHP et par le JS : toute renommee doit etre faite des
   deux cotes. Le JS ne pose aucun style inline — la barre de progression
   utilise les paliers .pmc-bk-fill-* (pas de width en dur).
   Tokens uniquement ; l'ancienne feuille bespoke Backup n'est plus chargee.
   -------------------------------------------------------------------------- */

/* Racine de la console : le JS bascule les panneaux via l'attribut [hidden],
   qui doit l'emporter sur les display:grid/flex des conteneurs. */
.pmc-bk-console{ display:grid; gap:var(--pmc-sp-4); }
.pmc-bk-console [hidden]{ display:none !important; }
/* Icones Lucide (SVG en ligne, injectees par le JS) : taille relative au texte,
   aucune fonte d'icone. */
.pmc-bk-console svg{ width:1.15em; height:1.15em; flex:none; }
.pmc-bk-console .is-loading{ opacity:.6; }

.pmc-sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Barre d'outils de tete (mode d'execution, horodatage, actions globales) */
.pmc-bk-toolbar{ gap:var(--pmc-sp-2); }
.pmc-bk-updated{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-3); }

/* Onglets : le JS pilote l'etat par aria-selected, pas par une classe */
.pmc-bk-tabs button{ display:inline-flex; align-items:center; gap:var(--pmc-sp-2); }
.pmc-bk-tabs button[aria-selected="true"]{
  color:var(--pmc-primary); border-bottom-color:var(--pmc-primary);
}

.pmc-bk-panel{ display:grid; gap:var(--pmc-sp-4); align-content:start; }
.pmc-bk-head{ display:flex; align-items:flex-start; gap:var(--pmc-sp-4); flex-wrap:wrap; }
.pmc-bk-head > div:first-child{ flex:1; min-width:0; }
.pmc-bk-head h2, .pmc-bk-head h3{ margin:0; }
.pmc-bk-head p{ margin:2px 0 0; font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); }
.pmc-bk-head > .pmc-btn{ margin-left:auto; }
/* Lien posé sur l'en-tête de carte en dégradé bleu (« View all », Lab §7). */
.pmc-bk-console .pmc-card-head a{ color:var(--pmc-grad-head-text); }

/* Bandeau d'etat d'une section (donnees partielles, non provisionnees, ...) */
.pmc-bk-state{
  display:flex; align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap;
  padding:var(--pmc-sp-2) var(--pmc-sp-3); font-size:var(--pmc-fs-sm);
  border:1px solid var(--pmc-border); border-left-width:3px;
  border-radius:var(--pmc-r-sm); background:var(--pmc-surface-alt); color:var(--pmc-text-2);
}
.pmc-bk-state strong{ color:var(--pmc-text); }
.pmc-bk-state--partial{ border-left-color:var(--pmc-warn); background:var(--pmc-warn-soft); color:var(--pmc-warn); }
.pmc-bk-state--error{ border-left-color:var(--pmc-crit); background:var(--pmc-crit-soft); color:var(--pmc-crit); }
.pmc-bk-state--unavailable{ border-left-color:var(--pmc-neutral); }
.pmc-bk-state--empty{ border-left-color:var(--pmc-info); }
.pmc-bk-state--partial strong, .pmc-bk-state--error strong{ color:inherit; }

.pmc-bk-empty{
  display:flex; flex-direction:column; align-items:center; gap:var(--pmc-sp-1);
  border:0; border-top:1px solid var(--pmc-border); border-radius:0;
}

/* Pastilles de statut : meme jeu de valeurs cote PHP et cote JS */
.pmc-bk-st{ color:var(--pmc-neutral); background:var(--pmc-neutral-soft); text-transform:capitalize; }
.pmc-bk-st--success, .pmc-bk-st--passed, .pmc-bk-st--verified,
.pmc-bk-st--enabled, .pmc-bk-st--healthy, .pmc-bk-st--clear,
.pmc-bk-st--completed, .pmc-bk-st--ok, .pmc-bk-st--best, .pmc-bk-st--full{
  color:var(--pmc-ok); background:var(--pmc-ok-soft); border-color:var(--pmc-ok-border);
}
.pmc-bk-st--running, .pmc-bk-st--active, .pmc-bk-st--ready{
  color:var(--pmc-info); background:var(--pmc-info-soft); border-color:var(--pmc-info-border);
}
.pmc-bk-st--queued, .pmc-bk-st--pending, .pmc-bk-st--warning, .pmc-bk-st--warming,
.pmc-bk-st--migration, .pmc-bk-st--recommended, .pmc-bk-st--review{
  color:var(--pmc-warn); background:var(--pmc-warn-soft); border-color:var(--pmc-warn-border);
}
.pmc-bk-st--error, .pmc-bk-st--failed, .pmc-bk-st--broken, .pmc-bk-st--quarantined,
.pmc-bk-st--offline, .pmc-bk-st--conflict, .pmc-bk-st--danger, .pmc-bk-st--critical, .pmc-bk-st--waste, .pmc-bk-st--refused{
  color:var(--pmc-crit); background:var(--pmc-crit-soft); border-color:var(--pmc-crit-border);
}
.pmc-bk-st--cancelled, .pmc-bk-st--disabled, .pmc-bk-st--unknown{
  color:var(--pmc-neutral); background:var(--pmc-neutral-soft); border-color:transparent;
}
.pmc-bk-st--immutable, .pmc-bk-st--required, .pmc-bk-st--enforced{
  color:var(--pmc-chart-3); background:color-mix(in srgb, var(--pmc-chart-3) 12%, transparent);
  border-color:color-mix(in srgb, var(--pmc-chart-3) 40%, transparent);
}

/* Cellules a deux niveaux (libelle + identifiant) produites par primaryCell() */
.pmc-bk-tbl td{ height:auto; padding-top:5px; padding-bottom:5px; }
.pmc-bk-tbl td small{
  display:block; font-size:11px; color:var(--pmc-text-3);
  font-family:var(--pmc-font-mono); overflow-wrap:anywhere;
}
.pmc-bk-tbl td code{ font-size:11px; }
.pmc-bk-tbl td .pmc-bk-failure-code,
.pmc-bk-tbl td .pmc-bk-failure-message{
  color:var(--pmc-crit); max-width:28rem; white-space:pre-wrap; overflow-wrap:anywhere;
}
/* SLA RPO / RTO déclaré vs atteint (Backup/index > Scorecard, #1065). */
.pmc-bk-tbl td small.pmc-bk-sla--breached{ color:var(--pmc-crit); }
.pmc-bk-tbl td small.pmc-bk-sla--met{ color:var(--pmc-ok); }
.pmc-bk-sla-note{ margin:0; padding:var(--pmc-sp-2) var(--pmc-sp-3); color:var(--pmc-text-2); font-size:var(--pmc-fs-xs); }
.pmc-bk-sla-days{ display:flex; gap:2px; margin-top:4px; }
.pmc-bk-sla-day{ width:8px; height:12px; border-radius:2px; background:var(--pmc-border); }
.pmc-bk-sla-day--met{ background:var(--pmc-ok); }
.pmc-bk-sla-day--breached{ background:var(--pmc-crit); }
.pmc-bk-sla-day--unproven{ background:var(--pmc-warn); }
.pmc-bk-actions{ white-space:nowrap; }
.pmc-bk-actions .pmc-btn{ margin-right:var(--pmc-sp-1); }
.pmc-bk-actions .pmc-btn:last-child{ margin-right:0; }

/* Paliers de remplissage de la barre de progression : le JS ne pose pas de
   width inline, il choisit le palier le plus proche (pas de 5). */
.pmc-progress > span.pmc-bk-fill-0{ width:0%; }
.pmc-progress > span.pmc-bk-fill-5{ width:5%; }
.pmc-progress > span.pmc-bk-fill-10{ width:10%; }
.pmc-progress > span.pmc-bk-fill-15{ width:15%; }
.pmc-progress > span.pmc-bk-fill-20{ width:20%; }
.pmc-progress > span.pmc-bk-fill-25{ width:25%; }
.pmc-progress > span.pmc-bk-fill-30{ width:30%; }
.pmc-progress > span.pmc-bk-fill-35{ width:35%; }
.pmc-progress > span.pmc-bk-fill-40{ width:40%; }
.pmc-progress > span.pmc-bk-fill-45{ width:45%; }
.pmc-progress > span.pmc-bk-fill-50{ width:50%; }
.pmc-progress > span.pmc-bk-fill-55{ width:55%; }
.pmc-progress > span.pmc-bk-fill-60{ width:60%; }
.pmc-progress > span.pmc-bk-fill-65{ width:65%; }
.pmc-progress > span.pmc-bk-fill-70{ width:70%; }
.pmc-progress > span.pmc-bk-fill-75{ width:75%; }
.pmc-progress > span.pmc-bk-fill-80{ width:80%; }
.pmc-progress > span.pmc-bk-fill-85{ width:85%; }
.pmc-progress > span.pmc-bk-fill-90{ width:90%; }
.pmc-progress > span.pmc-bk-fill-95{ width:95%; }
.pmc-progress > span.pmc-bk-fill-100{ width:100%; }

/* Vue d'ensemble : table principale + colonne « prochaines executions » */
.pmc-bk-split{ display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); gap:var(--pmc-sp-4); align-items:start; }
@media (max-width:1024px){ .pmc-bk-split{ grid-template-columns:minmax(0,1fr); } }
.pmc-bk-runs{ margin:0; padding-left:var(--pmc-sp-5); display:grid; gap:var(--pmc-sp-2); }
.pmc-bk-runs strong{ display:block; font-size:var(--pmc-fs-sm); }
.pmc-bk-runs span{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-3); font-family:var(--pmc-font-mono); }
.pmc-stat .pmc-value.pmc-bk-ts{
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-md);
  font-weight:600; color:var(--pmc-text-2); overflow-wrap:anywhere;
}

/* Pied de table : le JS y injecte un libelle + deux boutons de pagination */
.pmc-bk-pager > span{ margin-right:auto; }
.pmc-bk-pager .pmc-btn{ margin-left:var(--pmc-sp-1); }
.pmc-bk-filters .pmc-btn[aria-pressed="true"]{
  background:var(--pmc-primary); border-color:var(--pmc-primary); color:var(--pmc-on-primary);
}
@media (max-width:768px){
  .pmc-bk-filters{
    flex:1 1 100%; width:100%; max-width:100%; min-width:0;
    overflow-x:auto; overscroll-behavior-x:contain;
    padding:3px; box-sizing:border-box;
  }
  .pmc-bk-filters .pmc-btn{ flex:0 0 auto; }
  .pmc-bk-filters .pmc-btn:last-child{ scroll-margin-inline-end:4px; }
  .pmc-bk-filters::after{ content:""; flex:0 0 4px; }
}

/* Assistant de creation de plan */
.pmc-bk-stepper{ display:flex; gap:var(--pmc-sp-2); flex-wrap:wrap; margin-bottom:var(--pmc-sp-4); }
.pmc-bk-stepper button{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-2) var(--pmc-sp-3); cursor:pointer;
  font:600 var(--pmc-fs-sm)/1 var(--pmc-font-sans); color:var(--pmc-text-2);
  background:var(--pmc-surface); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
}
.pmc-bk-stepper button > span{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%; flex:none;
  background:var(--pmc-neutral-soft); font:700 11px/1 var(--pmc-font-mono);
}
.pmc-bk-stepper button[aria-selected="true"]{
  color:var(--pmc-primary); border-color:var(--pmc-primary); background:var(--pmc-primary-soft);
}
.pmc-bk-stepper button[aria-selected="true"] > span{ background:var(--pmc-primary); color:var(--pmc-on-primary); }
.pmc-bk-step{ border:0; margin:0; padding:0; min-width:0; }
.pmc-bk-step legend{
  padding:0; margin-bottom:var(--pmc-sp-3); border:0; width:auto;
  font:700 var(--pmc-fs-md)/1.3 var(--pmc-font-sans); color:var(--pmc-text);
}
.pmc-bk-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--pmc-sp-4); }
.pmc-bk-form-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:768px){ .pmc-bk-form-grid, .pmc-bk-form-grid-3{ grid-template-columns:minmax(0,1fr); } }
.pmc-bk-segmented{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--pmc-sp-2); margin-bottom:var(--pmc-sp-4); }
.pmc-bk-segmented-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:768px){ .pmc-bk-segmented, .pmc-bk-segmented-2{ grid-template-columns:minmax(0,1fr); } }
.pmc-bk-segmented label{ margin:0; cursor:pointer; }
.pmc-bk-segmented input{ position:absolute; opacity:0; width:1px; height:1px; }
.pmc-bk-segmented label > span{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--pmc-sp-1);
  min-height:60px; padding:var(--pmc-sp-2) var(--pmc-sp-3); text-align:center;
  font:600 var(--pmc-fs-sm)/1.3 var(--pmc-font-sans); color:var(--pmc-text-2);
  background:var(--pmc-surface); border:1px solid var(--pmc-border-strong); border-radius:var(--pmc-r-sm);
  transition:all var(--pmc-transition);
}
.pmc-bk-segmented label > span small{ font-weight:400; color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); }
.pmc-bk-segmented input:checked + span{
  border-color:var(--pmc-primary); background:var(--pmc-primary-soft); color:var(--pmc-primary);
}
.pmc-bk-segmented input:disabled + span{ opacity:.45; cursor:not-allowed; }
.pmc-bk-segmented input:focus-visible + span{ box-shadow:0 0 0 3px var(--pmc-focus-ring); }
.pmc-bk-option-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--pmc-sp-3);
  flex-wrap:wrap; margin-bottom:var(--pmc-sp-4);
}
.pmc-bk-options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--pmc-sp-3); margin-bottom:var(--pmc-sp-4); }
.pmc-bk-galera{ max-width:280px; }
.pmc-bk-preflight{
  display:flex; align-items:flex-start; gap:var(--pmc-sp-3);
  padding:var(--pmc-sp-3); border:1px dashed var(--pmc-border-strong); border-radius:var(--pmc-r-md);
  background:var(--pmc-surface-alt); font-size:var(--pmc-fs-sm); color:var(--pmc-text-2);
}
.pmc-bk-preflight > i, .pmc-bk-preflight > svg{ flex:0 0 auto; }
.pmc-bk-preflight-content{ flex:1 1 auto; min-width:0; }
.pmc-bk-preflight-heading{ display:block; color:var(--pmc-text); }
.pmc-bk-preflight-summary{ display:block; overflow-wrap:anywhere; }
.pmc-bk-preflight--ready{ border-style:solid; border-color:var(--pmc-ok-border); background:var(--pmc-ok-soft); color:var(--pmc-ok); }
.pmc-bk-preflight--warning{ border-style:solid; border-color:var(--pmc-warn-border); background:var(--pmc-warn-soft); color:var(--pmc-warn); }
.pmc-bk-preflight--blocked{ border-style:solid; border-color:var(--pmc-crit-border); background:var(--pmc-crit-soft); color:var(--pmc-crit); }
.pmc-bk-preflight--ready > .pmc-bk-preflight-content > .pmc-bk-preflight-heading,
.pmc-bk-preflight--warning > .pmc-bk-preflight-content > .pmc-bk-preflight-heading,
.pmc-bk-preflight--blocked > .pmc-bk-preflight-content > .pmc-bk-preflight-heading{ color:inherit; }
.pmc-bk-preflight-findings{
  display:grid; gap:var(--pmc-sp-2); margin:var(--pmc-sp-3) 0 0; padding:0; list-style:none;
}
.pmc-bk-preflight-finding{
  min-width:0; padding:var(--pmc-sp-2) var(--pmc-sp-3);
  border:1px solid var(--pmc-border); border-left:3px solid var(--pmc-info);
  border-radius:var(--pmc-r-sm); background:var(--pmc-surface); color:var(--pmc-text);
  overflow-wrap:anywhere;
}
.pmc-bk-preflight-finding--error{ border-left-color:var(--pmc-crit); }
.pmc-bk-preflight-finding--warning{ border-left-color:var(--pmc-warn); }
.pmc-bk-preflight-finding--info{ border-left-color:var(--pmc-info); }
.pmc-bk-preflight-finding-heading{
  display:flex; align-items:baseline; gap:var(--pmc-sp-2); flex-wrap:wrap; min-width:0;
}
.pmc-bk-preflight-severity{
  flex:0 0 auto; font:700 var(--pmc-fs-xs)/1.3 var(--pmc-font-sans); text-transform:uppercase;
}
.pmc-bk-preflight-severity--error{ color:var(--pmc-crit); }
.pmc-bk-preflight-severity--warning{ color:var(--pmc-warn); }
.pmc-bk-preflight-severity--info{ color:var(--pmc-info); }
.pmc-bk-preflight-code{
  min-width:0; color:var(--pmc-text); background:var(--pmc-surface-alt);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
  padding:1px var(--pmc-sp-1); overflow-wrap:anywhere;
}
.pmc-bk-preflight-subject{ min-width:0; color:var(--pmc-text-3); overflow-wrap:anywhere; }
.pmc-bk-preflight-message, .pmc-bk-preflight-remediation{
  margin:var(--pmc-sp-1) 0 0; color:var(--pmc-text-2); overflow-wrap:anywhere;
}
.pmc-bk-preflight-remediation strong{ color:var(--pmc-text); }
.pmc-bk-wizard-foot{
  display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap;
  margin-top:var(--pmc-sp-4); padding-top:var(--pmc-sp-3); border-top:1px solid var(--pmc-border);
  font-size:var(--pmc-fs-xs); color:var(--pmc-text-3);
}

/* Combobox « serveur source » : progressive enhancement du <select> par le JS
   (is-enhanced), l'option active est marquee is-active. */
.pmc-bk-combo{ position:relative; min-width:0; }
.pmc-bk-combo.is-enhanced > select{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pmc-bk-combo-indicator{ position:absolute; right:var(--pmc-sp-2); top:50%; margin-top:-9px; color:var(--pmc-text-3); pointer-events:none; }
.pmc-bk-combo-list{
  position:absolute; z-index:var(--pmc-z-dropdown); top:calc(100% + 4px); left:0; right:0;
  max-height:min(240px, 40vh); overflow:auto; padding:var(--pmc-sp-1);
  background:var(--pmc-surface); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md); box-shadow:var(--pmc-shadow-md);
}
.pmc-bk-combo-option{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:6px var(--pmc-sp-2); border:0; border-radius:var(--pmc-r-sm);
  background:transparent; color:var(--pmc-text); font:400 var(--pmc-fs-sm)/1.4 var(--pmc-font-sans);
}
.pmc-bk-combo-option small{ display:block; font-family:var(--pmc-font-mono); font-size:11px; color:var(--pmc-text-3); }
.pmc-bk-combo-option:hover, .pmc-bk-combo-option.is-active{ background:var(--pmc-primary-soft); color:var(--pmc-primary); }
.pmc-bk-combo-empty{ padding:var(--pmc-sp-3); font-size:var(--pmc-fs-sm); color:var(--pmc-text-3); text-align:center; }

/* Chemin de donnees signe et bandeau de preuves */
.pmc-bk-path{
  display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap;
  padding:var(--pmc-sp-3); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md);
  background:var(--pmc-surface);
}
.pmc-bk-path > div{ display:flex; align-items:center; gap:var(--pmc-sp-2); font-weight:600; font-size:var(--pmc-fs-sm); }
.pmc-bk-path > small{ flex:1 0 100%; font-size:var(--pmc-fs-xs); color:var(--pmc-text-3); }
.pmc-bk-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--pmc-sp-3); }
.pmc-bk-strip > div{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--pmc-sp-1) var(--pmc-sp-2);
  padding:var(--pmc-sp-3); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md);
  background:var(--pmc-surface);
}
.pmc-bk-strip > div > span{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }
.pmc-bk-tbl td.pmc-bk-wrap{ white-space:normal; min-width:260px; max-width:420px; line-height:1.4; }
/* ROI des codecs de compression (Backup/index > Storage, #1054). */
.pmc-bk-roi-advice{ list-style:none; margin:0; padding:var(--pmc-sp-3) var(--pmc-sp-4) 0; display:grid; gap:var(--pmc-sp-2); font-size:var(--pmc-fs-sm); }
/* Validation du périmètre de restauration sélective (Backup/index > manifeste, #1057). */
.pmc-bk-scope{ margin-top:var(--pmc-sp-4); padding-top:var(--pmc-sp-4); border-top:1px solid var(--pmc-border); }
.pmc-bk-scope h3{ font-size:var(--pmc-fs-md); margin:0 0 var(--pmc-sp-1); }
.pmc-bk-scope-intro{ margin:0; font-size:var(--pmc-fs-sm); color:var(--pmc-text-3); }
.pmc-bk-scope .pmc-grid{ align-items:end; margin-top:var(--pmc-sp-3); }
.pmc-bk-scope-check{ display:flex !important; gap:var(--pmc-sp-2); align-items:center; font-weight:400 !important; margin-bottom:var(--pmc-sp-2) !important; }
.pmc-bk-scope-verdict{ display:flex; gap:var(--pmc-sp-3); align-items:center; flex-wrap:wrap; }
.pmc-bk-scope-messages{ margin:var(--pmc-sp-2) 0 0; padding-left:var(--pmc-sp-5); font-size:var(--pmc-fs-sm); }
.pmc-bk-scope-objects{ list-style:none; margin:var(--pmc-sp-2) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1) var(--pmc-sp-3); font-size:var(--pmc-fs-xs); font-family:var(--pmc-font-mono); }
/* Règles de cycle de vie des stockages objet (Backup/index > Storage, #1072). */
.pmc-bk-lifecycle{ margin-top:var(--pmc-sp-3); }
.pmc-bk-lifecycle-area + .pmc-bk-lifecycle-area{ border-top:1px solid var(--pmc-border); margin-top:var(--pmc-sp-2); padding-top:var(--pmc-sp-2); }
.pmc-bk-lifecycle-area summary{ cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-2); }
.pmc-bk-lifecycle-notes{ margin:var(--pmc-sp-2) 0; padding-left:var(--pmc-sp-4); font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); }
.pmc-bk-lifecycle-json{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); gap:var(--pmc-sp-3); }
.pmc-bk-lifecycle-json .pmc-sql{ margin:4px 0 0; max-height:22em; overflow:auto; font-size:var(--pmc-fs-xs); }
.pmc-bk-export{ width:100%; resize:vertical; font-size:var(--pmc-fs-xs); line-height:1.45; white-space:pre; overflow:auto; }
.pmc-bk-strip > div > strong{ grid-column:1 / -1; font-size:var(--pmc-fs-md); }
.pmc-bk-strip-proof{ margin:var(--pmc-sp-3) 0; }
.pmc-bk-proof-transfer{ padding:var(--pmc-sp-3) 0; border-top:1px solid var(--pmc-border); }
.pmc-bk-proof-transfer:first-child{ border-top:0; padding-top:0; }
.pmc-bk-proof-heading{ display:flex; align-items:baseline; gap:var(--pmc-sp-3); flex-wrap:wrap; margin-bottom:var(--pmc-sp-2); }
.pmc-bk-proof-heading span{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-3); }
.pmc-bk-proof-checksums{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--pmc-sp-1) var(--pmc-sp-4); }
.pmc-bk-proof-checksums > div{ display:flex; align-items:baseline; gap:var(--pmc-sp-2); min-width:0; font-size:var(--pmc-fs-xs); }
.pmc-bk-proof-checksums > div > span{ flex:0 0 42%; color:var(--pmc-text-2); }
.pmc-bk-proof-checksums code{ min-width:0; overflow-wrap:anywhere; }
.pmc-bk-manifest-proof{
  display:flex; align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap;
  margin-bottom:var(--pmc-sp-3); font-size:var(--pmc-fs-sm); color:var(--pmc-text-2);
}

/* Reglages et capacites */
.pmc-bk-settings, .pmc-bk-caps{ display:grid; gap:var(--pmc-sp-2); }
.pmc-bk-settings > div{
  display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap;
  padding-bottom:var(--pmc-sp-2); border-bottom:1px solid var(--pmc-border);
}
.pmc-bk-settings > div:last-child{ border-bottom:0; padding-bottom:0; }
.pmc-bk-settings > div > span:not(.pmc-bk-st){
  flex:1 1 auto; min-width:min-content;
  font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); text-transform:capitalize;
}
.pmc-bk-settings > div > .pmc-bk-st{ flex:0 0 auto; margin-left:auto; }
.pmc-bk-settings > div > strong{ font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-sm); }
.pmc-bk-caps > div{ display:grid; grid-template-columns:1fr auto; gap:2px var(--pmc-sp-3); padding-bottom:var(--pmc-sp-2); border-bottom:1px solid var(--pmc-border); }
.pmc-bk-caps > div:last-child{ border-bottom:0; padding-bottom:0; }
.pmc-bk-caps > div > span{ display:flex; align-items:center; gap:var(--pmc-sp-2); font-size:var(--pmc-fs-sm); text-transform:capitalize; }
.pmc-bk-caps > div > strong{ font-size:var(--pmc-fs-xs); }
.pmc-bk-caps > div > small{ grid-column:1 / -1; font-size:var(--pmc-fs-xs); color:var(--pmc-text-3); }
.pmc-bk-migration{ display:flex; gap:var(--pmc-sp-3); align-items:flex-start; }
.pmc-bk-migration strong{ display:block; color:var(--pmc-text); }
.pmc-bk-legend{ gap:var(--pmc-sp-2); }

/* Notifications de commande (region empilee, alimentee par le JS) */
.pmc-bk-toasts{
  position:fixed; bottom:var(--pmc-sp-5); right:var(--pmc-sp-5); z-index:var(--pmc-z-toast);
  display:grid; gap:var(--pmc-sp-2); justify-items:end; pointer-events:none;
}
.pmc-bk-toast{
  display:flex; align-items:center; gap:var(--pmc-sp-2);
  min-width:260px; max-width:90vw; padding:var(--pmc-sp-3) var(--pmc-sp-4);
  background:var(--pmc-surface); color:var(--pmc-text);
  border:1px solid var(--pmc-border); border-left:4px solid var(--pmc-ok);
  border-radius:var(--pmc-r-md); box-shadow:var(--pmc-shadow-lg);
  font-size:var(--pmc-fs-sm); pointer-events:auto;
}
.pmc-bk-toast-crit{ border-left-color:var(--pmc-crit); }
@media print{ .pmc-bk-toasts{ display:none !important; } }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Backup/settings (#3053)
   Liste legacy des plannings de sauvegarde. Deux besoins seulement :
   un CTA espace dans l'etat vide et un etat vide integre dans une cellule.
   -------------------------------------------------------------------------- */
.pmc-empty > .pmc-bk-empty-cta{ margin-top:var(--pmc-sp-3); }
.pmc-tbl td > .pmc-empty{ border:0; background:transparent; padding:var(--pmc-sp-4) 0; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Backup/dump (#3053)
   Historique des dumps sur 12 jours. Trois besoins : un filet de separation
   entre deux journees (remplace la ligne vide a bordure inline de l'ancienne
   vue), l'alignement du drapeau de la zone de stockage et des cellules
   d'action non secables.
   -------------------------------------------------------------------------- */
.pmc-dmp-tbl tr.pmc-dmp-daybreak > td{ border-top:2px solid var(--pmc-border-strong); }
.pmc-dmp-flag{ vertical-align:middle; margin-right:var(--pmc-sp-1); }
.pmc-dmp-actions{ white-space:nowrap; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Backup/add (#3053)
   Formulaire de creation d'un plan de sauvegarde legacy. Tout est couvert par
   les composants existants (pmc-card, pmc-field, pmc-bk-step/legend,
   pmc-bk-form-grid) sauf la ligne crontab : cinq champs de meme largeur.
   Prefixe `pmc-bkadd-` volontairement distinct de la famille `pmc-bk-*` pour
   ne pas entrer en collision avec les ecrans Backup migres en parallele.
   -------------------------------------------------------------------------- */
.pmc-bkadd-cron{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 var(--pmc-sp-4);
}
@media (max-width:1024px){ .pmc-bkadd-cron{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:768px){ .pmc-bkadd-cron{ grid-template-columns:minmax(0,1fr); } }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Deploy/index (#3053)
   Assistant de deploiement : groupes de boutons radio (architecture, vendor,
   version) et zone de transfert de noeuds. `pmc-seg*` est volontairement
   nomme sans prefixe d'ecran : c'est la version generique du controle
   segmente (l'ecran Backup a sa propre copie `pmc-bk-segmented`, orientee
   icone + sous-titre, a fusionner ici dans un second temps).
   -------------------------------------------------------------------------- */
/* Chemins / hotes saisis dans un champ texte (le pendant de .pmc-textarea.pmc-mono). */
.pmc-input.pmc-mono{ font-family:var(--pmc-font-mono); font-size:12px; }

.pmc-seg-group{ border:0; margin:0 0 var(--pmc-sp-4); padding:0; min-width:0; }
.pmc-seg-group > legend{
  padding:0; margin-bottom:var(--pmc-sp-1);
  font:600 var(--pmc-fs-sm)/1.4 var(--pmc-font-sans); color:var(--pmc-text);
}
.pmc-seg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--pmc-sp-2); }
.pmc-seg label{ margin:0; cursor:pointer; min-width:0; }
.pmc-seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.pmc-seg label > span{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:var(--pmc-h-ctl); padding:var(--pmc-sp-1) var(--pmc-sp-3);
  font:600 var(--pmc-fs-sm)/1.3 var(--pmc-font-sans); color:var(--pmc-text-2);
  background:var(--pmc-surface); border:1px solid var(--pmc-border-strong);
  border-radius:var(--pmc-r-sm); transition:all var(--pmc-transition);
}
.pmc-seg label > span:hover{ border-color:var(--pmc-text-3); }
.pmc-seg input:checked + span{
  border-color:var(--pmc-primary); background:var(--pmc-primary-soft); color:var(--pmc-primary);
}
.pmc-seg input:disabled + span{ opacity:.45; cursor:not-allowed; }
.pmc-seg input:focus-visible + span{ box-shadow:0 0 0 3px var(--pmc-focus-ring); }

/* Ajout de noeuds : deux colonnes de saisie separees par l'indicateur de transfert. */
.pmc-dep-xfer{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:var(--pmc-sp-4); align-items:center;
}
.pmc-dep-xfer-sep{
  font-size:var(--pmc-fs-xl); color:var(--pmc-text-3); text-align:center; white-space:nowrap;
}
@media (max-width:768px){
  .pmc-dep-xfer{ grid-template-columns:minmax(0,1fr); }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Slave/index (#3147)
   -------------------------------------------------------------------------- */
.pmc-slave-index-table-scroll{
  --pmc-slave-index-table-max-height:min(68vh, calc(var(--pmc-h-row-dense) * 18 + var(--pmc-h-ctl)));
  max-height:var(--pmc-slave-index-table-max-height);
  overflow:auto;
  overscroll-behavior:contain;
}
.pmc-slave-index-server small[data-info]{
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
}
.slave-sparkline-cell{
  --pmc-slave-sparkline-width:176px;
  --pmc-slave-sparkline-height:25px;
  display:inline-grid;
  width:var(--pmc-slave-sparkline-width);
  height:var(--pmc-slave-sparkline-height);
  vertical-align:middle;
}
.slave-sparkline-cell > *{
  grid-area:1 / 1;
}
.slave-sparkline-cell .slave-sparkline-spinner{
  display:none;
  width:100%;
  height:100%;
  margin:0;
}
.slave-sparkline-canvas{
  display:none;
  width:100%;
  height:100%;
}
.slave-sparkline-status{
  display:none;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
}
.slave-sparkline-status > span{
  display:none;
}
.pmc-sparkline-loading .slave-sparkline-spinner{
  display:block;
}
.pmc-sparkline-ready .slave-sparkline-canvas{
  display:block;
}
.pmc-sparkline-empty .slave-sparkline-status,
.pmc-sparkline-error .slave-sparkline-status{
  display:flex;
}
.pmc-sparkline-empty .slave-sparkline-empty,
.pmc-sparkline-error .slave-sparkline-error{
  display:inline;
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Slave/show (#3053)
   --------------------------------------------------------------------------
   Cet ecran a une particularite : une partie de son JavaScript vit dans
   App/Controller/Slave.php::show() -> code_javascript(), et
   App/Library/Display.php::statusDot(). Ce JS :
     - reinjecte `<span class="sv-dot ok|info|fail halo">` toutes les 5 s ;
     - REECRIT l'attribut class de #sv-live-lag avec `sv-lag <etat>` ;
     - bascule `.pmc-hidden` sur les lignes/catégories du filtre ;
     - produit `#sv-eta` avec les classes `pmc-sv-eta-*`.
   Les selecteurs `sv-*` ci-dessous sont donc un CONTRAT : ils ne peuvent pas
   etre renommes sans changer le controleur. Ils sont scopes sous `.pmc-app`
   pour ne rien laisser fuir ailleurs et ne consomment que des tokens.
   Tout le reste de l'ecran utilise les composants standards
   (pmc-card, pmc-stat, pmc-badge, pmc-tbl, pmc-btn, pmc-field).
   -------------------------------------------------------------------------- */

/* ---- Pastille d'etat (contrat Display::statusDot + poller 5 s) ---- */
.pmc-app.pmc-sv-page{ max-width:100%; overflow-x:clip; }
/* La pastille .sv-dot (palette fixe, halo) est définie une seule fois, section Server/main (#5257). */

/* ---- Pilule de lag (contrat : #sv-live-lag voit son class= reecrit) ---- */
.pmc-app .sv-lag{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-1);
  padding:1px 10px; border-radius:var(--pmc-r-full);
  font-size:var(--pmc-fs-md); font-weight:700; font-variant-numeric:tabular-nums;
  border:1px solid transparent;
}
.pmc-app .sv-lag.ok,
.pmc-app .sv-lag.behind{   color:var(--pmc-ok);   background:var(--pmc-ok-soft);   border-color:var(--pmc-ok-border); }
.pmc-app .sv-lag.warning{  color:var(--pmc-warn); background:var(--pmc-warn-soft); border-color:var(--pmc-warn-border); }
.pmc-app .sv-lag.critical{ color:var(--pmc-crit); background:var(--pmc-crit-soft); border-color:var(--pmc-crit-border); }
.pmc-app .sv-lag.stopped{  color:var(--pmc-info); background:var(--pmc-info-soft); border-color:var(--pmc-info-border); }

/* ---- Conteneur de graphe jour (emis par Slave::buildShowGraphDayHtml) ---- */
.pmc-app .sv-chart-wrap{ position:relative; height:180px; margin-bottom:var(--pmc-sp-1); }
.pmc-app .sv-chart-wrap canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; }
/* Emplacement en attente de chargement AJAX (rendu par la vue) */
.pmc-app .pmc-sv-day-pending{
  display:flex; align-items:center; justify-content:center; gap:var(--pmc-sp-2);
  min-height:120px; color:var(--pmc-text-3); font-size:var(--pmc-fs-sm);
  border:1px dashed var(--pmc-border); border-radius:var(--pmc-r-md);
}
.pmc-app .pmc-sv-day-empty{
  display:flex; align-items:center; justify-content:center;
  color:var(--pmc-text-3); font-size:var(--pmc-fs-xs);
  border:1px dashed var(--pmc-border); border-radius:var(--pmc-r-md);
}
.pmc-app .pmc-sv-day-fail{ color:var(--pmc-crit); font-size:var(--pmc-fs-sm); padding:var(--pmc-sp-3); }

/* ---- Bandeau de sante en tete de carte ---- */
.pmc-app .pmc-sv-strip{ height:4px; background:var(--pmc-neutral); border-radius:var(--pmc-r-md) var(--pmc-r-md) 0 0; }
.pmc-app .pmc-sv-strip-ok,
.pmc-app .pmc-sv-strip-behind{   background:var(--pmc-ok); }
.pmc-app .pmc-sv-strip-warning{  background:var(--pmc-warn); }
.pmc-app .pmc-sv-strip-critical{ background:var(--pmc-crit); }
.pmc-app .pmc-sv-strip-stopped{  background:var(--pmc-info); }

/* ---- Tuiles de statut de replication (pmc-stat compactees) ---- */
.pmc-app .pmc-sv-metrics{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
/* #4640 — l'encart d'erreur IO/SQL qui suit la grille de tuiles (GTID / SSL)
   collait aux tuiles : on redonne l'espacement standard entre les deux. */
.pmc-app .pmc-sv-metrics + .pmc-alert{ margin-top:var(--pmc-sp-3); }
.pmc-app .pmc-sv-metric .pmc-value{
  font-size:var(--pmc-fs-md); font-weight:700; line-height:1.35;
  display:flex; align-items:center; gap:var(--pmc-sp-1); flex-wrap:wrap;
}
.pmc-app .pmc-sv-metric .pmc-value small{ font-size:var(--pmc-fs-xs); font-weight:400; color:var(--pmc-text-3); }
/* `pmc-num` / `pmc-mono` ne sont definis que sous `.pmc-tbl` ; les tuiles de
   statut affichent des positions de binlog et des hotes qui doivent rester
   monospaces et alignes de la meme facon hors table. */
.pmc-app .pmc-sv-metric .pmc-num{ font-family:var(--pmc-font-mono); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pmc-app .pmc-sv-metric .pmc-mono{ font-family:var(--pmc-font-mono); font-size:12px; white-space:nowrap; }
.pmc-app .pmc-sv-metric-wide{ grid-column:1 / -1; }
/* Valeur du « Relay gap » : jamais adoucir un retard critique. */
.pmc-app .pmc-sv-gap{ font-weight:700; }
.pmc-app .pmc-sv-gap-ok{   color:var(--pmc-ok); }
.pmc-app .pmc-sv-gap-warn{ color:var(--pmc-warn); }
.pmc-app .pmc-sv-gap-crit{ color:var(--pmc-crit); }
.pmc-app .pmc-sv-spark{ flex:1 1 120px; min-width:120px; height:32px; }
.pmc-app .pmc-sv-eta{ font-size:var(--pmc-fs-xs); white-space:nowrap; }
.pmc-app .pmc-sv-eta small{ color:var(--pmc-text-3); }
.pmc-app .pmc-sv-eta-ok > span{ color:var(--pmc-ok); }
.pmc-app .pmc-sv-eta-warn > span{ color:var(--pmc-warn); }
.pmc-app .pmc-sv-eta-crit > span{ color:var(--pmc-crit); }

/* ---- Onglets de sources de replication ---- */
.pmc-app .pmc-sv-tabdot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--pmc-neutral); }
.pmc-app .pmc-sv-tabdot-ok,
.pmc-app .pmc-sv-tabdot-behind{   background:var(--pmc-ok); }
.pmc-app .pmc-sv-tabdot-warning{  background:var(--pmc-warn); }
.pmc-app .pmc-sv-tabdot-critical{ background:var(--pmc-crit); }
.pmc-app .pmc-sv-tabdot-stopped{  background:var(--pmc-info); }
.pmc-app .pmc-sv-tablag{ font-size:var(--pmc-fs-xs); font-weight:400; color:var(--pmc-text-3); }

/* ---- Cartes d'observabilite : corps a hauteur homogene ---- */
.pmc-app .pmc-sv-ob .pmc-card-body{ min-height:92px; }
.pmc-app .pmc-sv-ob h4{ font-size:var(--pmc-fs-sm); text-transform:uppercase; letter-spacing:.04em; color:var(--pmc-text-2); margin-bottom:var(--pmc-sp-2); }
.pmc-app .pmc-sv-ob p{ margin:var(--pmc-sp-1) 0 0; font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }
.pmc-app .pmc-sv-ob code{ display:block; white-space:pre-wrap; word-break:break-all; margin-top:var(--pmc-sp-1); }
/* #1045 — couverture des filtres par schéma de la source : carte pleine largeur. */
.pmc-app .pmc-sv-ob .pmc-sv-ob-wide{ grid-column:1 / -1; }
.pmc-app .pmc-sv-ob:has(.pmc-sv-ob-wide){ grid-auto-flow:row dense; }
.pmc-app .pmc-sv-ob .pmc-sv-coverage-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-2); margin:var(--pmc-sp-2) 0; }
.pmc-app .pmc-sv-ob #sv-filter-coverage{ margin-top:var(--pmc-sp-2); }

/* ---- Groupes d'actions ---- */
.pmc-app .sv-action-group{ margin-bottom:var(--pmc-sp-4); }
.pmc-app .sv-action-group:last-child{ margin-bottom:0; }
.pmc-app .pmc-sv-group-title{
  font-size:var(--pmc-fs-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--pmc-text-2); font-weight:600; margin-bottom:var(--pmc-sp-2);
}
.pmc-app .pmc-sv-group-title small{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--pmc-text-3); }
.pmc-app .pmc-sv-group-title b{ color:var(--pmc-primary); }
.pmc-app .sv-action-group .pmc-btn{ margin-right:var(--pmc-sp-1); margin-bottom:var(--pmc-sp-1); }
.pmc-app .sv-action-group .sv-inline-form{ display:inline; margin:0; }
/* Bouton neutralise (GTID bloque / incompatible) : le curseur doit dire non. */
.pmc-app .pmc-sv-btn-locked{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.pmc-app .pmc-sv-locked-tip{
  display:inline-block; vertical-align:top; margin-right:var(--pmc-sp-1); margin-bottom:var(--pmc-sp-1);
}
.pmc-app .sv-action-group .pmc-sv-locked-tip > .pmc-btn{ margin:0; }
/* #1028 — arbre de décision du SKIP : verdict + recette GTID copiable. */
.pmc-app .pmc-sv-skip-advice{ margin-top:var(--pmc-sp-2); }
.pmc-app .pmc-sv-skip-recipe{ margin:var(--pmc-sp-2) 0 0; padding:var(--pmc-sp-2) var(--pmc-sp-3); font-family:var(--pmc-font-mono); font-size:12px; white-space:pre-wrap; word-break:break-all; background:var(--pmc-surface); color:var(--pmc-text); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm); user-select:all; }
.pmc-app .pmc-sv-threads{ width:70px; text-align:center; }
.pmc-app .pmc-sv-range{ flex:1 1 100px; min-width:100px; accent-color:var(--pmc-primary); }
.pmc-app .pmc-sv-mode{ width:auto; min-width:140px; }

/* ---- Editeur inline de variable de replication (#1198) ---- */
.pmc-app .pmc-sv-rv-picker{ margin-top:var(--pmc-sp-1); display:flex; gap:var(--pmc-sp-1); align-items:center; justify-content:center; flex-wrap:wrap; }
.pmc-app .pmc-sv-rv-value{ width:88px; text-align:center; }
.pmc-app .pmc-sv-rv-select{ width:auto; min-width:120px; }
.pmc-app .pmc-sv-help{ cursor:help; }
.pmc-app .pmc-sv-var{ font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-sv-var-sub{ font-family:var(--pmc-font-mono); font-size:11px; color:var(--pmc-text-3); line-height:1.3; margin-top:2px; }
.pmc-app .pmc-sv-var-sub span{ opacity:.75; }
.pmc-app .pmc-sv-drift{
  background:var(--pmc-warn-soft); border-left:3px solid var(--pmc-warn);
  color:var(--pmc-warn); padding:var(--pmc-sp-1) var(--pmc-sp-2);
  font-size:var(--pmc-fs-xs); border-radius:0 var(--pmc-r-sm) var(--pmc-r-sm) 0;
}
.pmc-app .pmc-sv-kv{
  --pmc-sv-value-col: 140px;
}
.pmc-app .pmc-sv-kv td{ height:auto; padding-top:var(--pmc-sp-1); padding-bottom:var(--pmc-sp-1); }
.pmc-app .pmc-sv-kv th:nth-child(2),
.pmc-app .pmc-sv-kv th:nth-child(3),
.pmc-app .pmc-sv-kv td:nth-child(2),
.pmc-app .pmc-sv-kv td:nth-child(3){
  width:var(--pmc-sv-value-col); text-align:center;
}

/* ---- Explorateur SHOW SLAVE STATUS (contrat : filtre du controleur) ---- */
.pmc-app .sv-vars-head{
  background:var(--pmc-grad-head); color:var(--pmc-grad-head-text);
  padding:var(--pmc-sp-2) var(--pmc-sp-4); border-radius:var(--pmc-r-md) var(--pmc-r-md) 0 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--pmc-sp-2);
}
.pmc-app .sv-vars-head-title{ font-size:var(--pmc-fs-sm); font-weight:600; display:flex; align-items:center; gap:var(--pmc-sp-2); }
.pmc-app .sv-vars-search{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:var(--pmc-grad-head-text); padding:0 var(--pmc-sp-3); height:var(--pmc-h-ctl);
  border-radius:var(--pmc-r-full); font-size:var(--pmc-fs-xs); width:240px; outline:none;
  font-family:var(--pmc-font-sans);
}
.pmc-app .sv-vars-search::placeholder{ color:var(--pmc-grad-head-muted); }
.pmc-app .sv-vars-search:focus{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5); }
.pmc-app .sv-vars-body{
  border:1px solid var(--pmc-border); border-top:0; background:var(--pmc-surface);
  border-radius:0 0 var(--pmc-r-md) var(--pmc-r-md); max-height:520px; overflow-y:auto;
}
.pmc-app .sv-vars-cat{ border-bottom:1px solid var(--pmc-border); }
.pmc-app .sv-vars-cat:last-of-type{ border-bottom:0; }
.pmc-app .sv-vars-cat-head{
  background:var(--pmc-surface-alt); padding:var(--pmc-sp-1) var(--pmc-sp-4);
  font-size:var(--pmc-fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--pmc-text-2); position:sticky; top:0; z-index:1; border-bottom:1px solid var(--pmc-border);
}
.pmc-app .sv-vars-cat-count{ font-weight:400; opacity:.7; margin-left:var(--pmc-sp-1); }
.pmc-app .sv-vars-row{
  display:flex; padding:var(--pmc-sp-1) var(--pmc-sp-4); font-size:var(--pmc-fs-xs);
  border-bottom:1px solid var(--pmc-border); align-items:baseline;
}
.pmc-app .sv-vars-row:last-child{ border-bottom:0; }
.pmc-app .sv-vars-row:hover{ background:var(--pmc-surface-alt); }
.pmc-app .sv-vars-name{ width:45%; color:var(--pmc-text); font-weight:600; padding-right:var(--pmc-sp-2); word-break:break-all; }
.pmc-app .sv-alias{ color:var(--pmc-text-3); font-weight:400; }
.pmc-app .sv-vars-val{ width:55%; color:var(--pmc-text-2); word-break:break-all; font-family:var(--pmc-font-mono); font-size:11px; }
.pmc-app .sv-val-empty{ color:var(--pmc-text-3); font-style:italic; }
.pmc-app .sv-val-yes{ color:var(--pmc-ok); font-weight:600; }
.pmc-app .sv-val-no{ color:var(--pmc-crit); font-weight:600; }
.pmc-app .sv-val-num{ color:var(--pmc-primary); }
.pmc-app .sv-val-err{ color:var(--pmc-crit); background:var(--pmc-crit-soft); padding:1px 5px; border-radius:var(--pmc-r-sm); }
.pmc-app .sv-vars-no-match{ display:none; padding:var(--pmc-sp-6); text-align:center; color:var(--pmc-text-3); font-size:var(--pmc-fs-sm); }

/* ---- Sections repliables (performance_schema, binlog analysis) ---- */
.pmc-app .pmc-sv-acc-head{
  background:var(--pmc-surface-alt); color:var(--pmc-text-2);
  padding:var(--pmc-sp-2) var(--pmc-sp-4); font-size:var(--pmc-fs-sm); font-weight:600;
  cursor:pointer; border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md);
  display:flex; align-items:center; gap:var(--pmc-sp-2);
}
.pmc-app .pmc-sv-acc-head:hover{ background:var(--pmc-border); }
.pmc-app .pmc-sv-acc-head[aria-expanded="true"]{ border-radius:var(--pmc-r-md) var(--pmc-r-md) 0 0; }
.pmc-app .pmc-sv-acc-head .pmc-badge{ margin-left:auto; }
.pmc-app .pmc-sv-caret::before{ content:"\25B8"; display:inline-block; transition:transform var(--pmc-transition); }
.pmc-app .pmc-sv-acc-head[aria-expanded="true"] .pmc-sv-caret::before{ transform:rotate(90deg); }
.pmc-app .pmc-sv-acc-body{
  border:1px solid var(--pmc-border); border-top:0; overflow:hidden;
  border-radius:0 0 var(--pmc-r-md) var(--pmc-r-md); margin-bottom:var(--pmc-sp-4);
}
.pmc-app .pmc-sv-acc-body-pad{ padding:var(--pmc-sp-4); }
.pmc-app .pmc-sv-acc-body-scroll{ overflow-x:auto; }

/* ---- Formulaire « nouvelle source » ---- */
.pmc-app .pmc-sv-new-source{ max-width:760px; }
.pmc-app .pmc-sv-fieldset{
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md);
  padding:var(--pmc-sp-4); margin:0 0 var(--pmc-sp-4);
}
/* Runbook de recâblage du replica (Slave/reloadFromMaster, #889) : le `pre`
   Bootstrap global garde fond/bordure clairs sous le texte `--pmc-text` de
   `.pmc-sql` (illisible en thème sombre) — surface sur tokens. */
.pmc-app .pmc-sv-runbook{
  margin:0; color:var(--pmc-text); background:var(--pmc-surface-alt);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm); padding:var(--pmc-sp-3);
}
/* Runbook de reprise sur replica différé (Slave/show, #1027). */
.pmc-app .pmc-sv-recovery-steps{ margin:var(--pmc-sp-2) 0 0; padding-left:var(--pmc-sp-5); }
.pmc-app .pmc-sv-recovery-steps li{ margin-bottom:var(--pmc-sp-2); }
.pmc-app .pmc-sv-recovery-steps .pmc-sv-runbook{ margin-top:var(--pmc-sp-1); white-space:pre-wrap; word-break:break-word; }
.pmc-app .pmc-sv-fieldset legend{
  font-size:var(--pmc-fs-xs); font-weight:700; color:var(--pmc-primary);
  text-transform:uppercase; letter-spacing:.06em; padding:0 var(--pmc-sp-2); width:auto;
}
.pmc-app .pmc-sv-fieldset .pmc-field:last-child{ margin-bottom:0; }
.pmc-app .pmc-sv-check{ display:flex; align-items:center; gap:var(--pmc-sp-2); cursor:pointer; font-weight:600; }
.pmc-app .pmc-sv-check input{ margin:0; }

/* ---- Analyse de binlogs ---- */
.pmc-app .pmc-sv-ba-range{ align-items:flex-end; margin-bottom:var(--pmc-sp-4); }
.pmc-app .pmc-sv-ba-range .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-sv-ba-dt{ width:220px; }
.pmc-app .pmc-sv-ba-progress{ margin-bottom:var(--pmc-sp-4); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md); overflow:hidden; }
.pmc-app .pmc-sv-ba-progress-head{
  background:var(--pmc-grad-head); color:var(--pmc-grad-head-text);
  padding:var(--pmc-sp-1) var(--pmc-sp-3); font-size:var(--pmc-fs-xs);
  font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.pmc-app .pmc-sv-ba-log{
  background:var(--pmc-surface-alt); color:var(--pmc-text);
  padding:var(--pmc-sp-2) var(--pmc-sp-3); font-family:var(--pmc-font-mono);
  font-size:11px; max-height:300px; overflow-y:auto; line-height:1.7;
}
.pmc-app .pmc-sv-ba-log-time{ color:var(--pmc-text-3); margin-right:var(--pmc-sp-1); }
.pmc-app .pmc-sv-ba-log-done{ color:var(--pmc-ok); }
.pmc-app .pmc-sv-ba-log-error{ color:var(--pmc-crit); }
.pmc-app .pmc-sv-ba-log-pending{ color:var(--pmc-warn); }
.pmc-app .pmc-sv-ba-history{ margin-bottom:var(--pmc-sp-4); display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1); align-items:center; }
.pmc-app .pmc-sv-ba-history .pmc-btn{ height:auto; padding:var(--pmc-sp-1) var(--pmc-sp-2); }
.pmc-app .pmc-sv-ba-canvas{
  position:relative; background:var(--pmc-surface-alt); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md); padding:var(--pmc-sp-2); margin-bottom:var(--pmc-sp-4);
}
/* Hauteur pilotee par le JS via la custom property --pmc-sv-tl-h (nombre de
   pistes de binlogs), avec un repli sur la hauteur d'une piste unique. */
.pmc-app .pmc-sv-ba-h-timeline{ height:var(--pmc-sv-tl-h, 92px); }
.pmc-app .pmc-sv-ba-h-chart{ height:250px; }
.pmc-app .pmc-sv-ba-h-parallel{ height:360px; }
.pmc-app .pmc-sv-ba-h-treemap{ height:440px; padding:var(--pmc-sp-1); margin-bottom:0; }
/* Masquage pilote par la classe utilitaire `pmc-hidden` (pas de style inline). */
.pmc-app .pmc-sv-ba-tooltip{
  position:absolute; z-index:4; pointer-events:none;
  background:var(--pmc-text); color:var(--pmc-surface); border-radius:var(--pmc-r-sm);
  padding:var(--pmc-sp-1) var(--pmc-sp-2); font-size:var(--pmc-fs-xs);
  line-height:1.45; box-shadow:var(--pmc-shadow-md); max-width:320px;
}
.pmc-app .pmc-sv-ba-treemap-empty{
  display:flex; align-items:center; justify-content:center; height:100%;
  color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); text-align:center; padding:var(--pmc-sp-3);
}
.pmc-app .pmc-sv-ba-zoombar{ display:flex; align-items:center; justify-content:flex-end; gap:var(--pmc-sp-2); margin-bottom:var(--pmc-sp-2); }
.pmc-app .pmc-sv-ba-risk{ margin-bottom:var(--pmc-sp-3); }
.pmc-app .pmc-sv-ba-risk ul{ margin:var(--pmc-sp-1) 0 0 var(--pmc-sp-5); padding:0; }
.pmc-app .pmc-sv-ba-recs{ margin:0; padding-left:var(--pmc-sp-5); }
.pmc-app .pmc-sv-ba-recs li{ margin-bottom:var(--pmc-sp-1); }
.pmc-app .pmc-sv-zoomed{ color:var(--pmc-chart-3); }
.pmc-app .pmc-sv-total-row td{ background:var(--pmc-primary-soft); }
.pmc-app .pmc-sv-t-alter{ color:var(--pmc-warn); font-weight:700; }
.pmc-app .pmc-sv-t-drop,
.pmc-app .pmc-sv-t-truncate{ color:var(--pmc-crit); font-weight:700; }
.pmc-app .pmc-sv-t-create{ color:var(--pmc-ok); font-weight:700; }
.pmc-app .pmc-sv-t-other{ color:var(--pmc-text); font-weight:700; }
.pmc-app .pmc-sv-ddl-stmt{ max-width:400px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--pmc-text-3); font-size:11px; }
/* Zone de selection au glisser sur les graphes de lag (creee par le JS). */
.pmc-app .pmc-sv-dragbox{
  position:absolute; top:0; bottom:0; z-index:10; display:none; pointer-events:none;
  background:var(--pmc-primary-soft); border:1px dashed var(--pmc-primary);
}
.pmc-app .pmc-sv-dragbox.pmc-sv-dragging{ display:block; }
.pmc-app .pmc-sv-muted{ color:var(--pmc-text-3); }
.pmc-app .pmc-sv-nowrap{ white-space:nowrap; }
.pmc-app .pmc-sv-break{ word-break:break-all; }
.pmc-app .pmc-sv-headnote{ font-size:var(--pmc-fs-xs); color:var(--pmc-grad-head-muted); margin-left:auto; }
.pmc-app .pmc-sv-relpos{ position:relative; }

@media (max-width:768px){
  .pmc-app .sv-vars-search{ width:100%; }
  .pmc-app .sv-vars-name,
  .pmc-app .sv-vars-val{ width:100%; }
  .pmc-app .sv-vars-row{ flex-direction:column; }
  .pmc-app .pmc-sv-ba-dt{ width:100%; }
}
/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Blackhole/index (#3053)
   --------------------------------------------------------------------------
   Ecran de conversion d'un esclave en relais binlog BLACKHOLE (epique #1212).
   Operation DESTRUCTIVE : les avertissements passent par les composants
   standards (pmc-alert-crit, pmc-btn-danger, pmc-badge-warn) — rien n'est
   adouci ici. Les classes `bh-*` restantes dans la vue sont des points
   d'ancrage JS (querySelectorAll) et ne portent AUCUN style : ne rien
   ajouter pour elles.
   Le JS inline de la vue ne pose aucun style : il bascule `pmc-hidden` et
   remplace la classe du badge de statut (voir PILL_CLASS / STEP_CLASS).
   Tokens uniquement.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   FAMILLE — paliers de remplissage `pmc-fill-0` … `pmc-fill-100`
   --------------------------------------------------------------------------
   Une barre dont la largeur vient de la donnee ne peut pas porter
   `style="width:x%"` (regle : zero attribut style dans les vues migrees). La
   vue arrondit le pourcentage a l'entier et pose la classe de palier
   correspondante. Utilise par Home/index (barres environnements / clients /
   versions) ; disponible pour tout autre ecran (Backup/index a sa propre
   variante historique `pmc-bk-fill-*` par pas de 5, non fusionnee ici pour ne
   pas toucher a un ecran deja migre).
   -------------------------------------------------------------------------- */
.pmc-app .pmc-fill-0{ width:0%; } .pmc-app .pmc-fill-1{ width:1%; } .pmc-app .pmc-fill-2{ width:2%; } .pmc-app .pmc-fill-3{ width:3%; } .pmc-app .pmc-fill-4{ width:4%; } .pmc-app .pmc-fill-5{ width:5%; } .pmc-app .pmc-fill-6{ width:6%; } .pmc-app .pmc-fill-7{ width:7%; } .pmc-app .pmc-fill-8{ width:8%; } .pmc-app .pmc-fill-9{ width:9%; }
.pmc-app .pmc-fill-10{ width:10%; } .pmc-app .pmc-fill-11{ width:11%; } .pmc-app .pmc-fill-12{ width:12%; } .pmc-app .pmc-fill-13{ width:13%; } .pmc-app .pmc-fill-14{ width:14%; } .pmc-app .pmc-fill-15{ width:15%; } .pmc-app .pmc-fill-16{ width:16%; } .pmc-app .pmc-fill-17{ width:17%; } .pmc-app .pmc-fill-18{ width:18%; } .pmc-app .pmc-fill-19{ width:19%; }
.pmc-app .pmc-fill-20{ width:20%; } .pmc-app .pmc-fill-21{ width:21%; } .pmc-app .pmc-fill-22{ width:22%; } .pmc-app .pmc-fill-23{ width:23%; } .pmc-app .pmc-fill-24{ width:24%; } .pmc-app .pmc-fill-25{ width:25%; } .pmc-app .pmc-fill-26{ width:26%; } .pmc-app .pmc-fill-27{ width:27%; } .pmc-app .pmc-fill-28{ width:28%; } .pmc-app .pmc-fill-29{ width:29%; }
.pmc-app .pmc-fill-30{ width:30%; } .pmc-app .pmc-fill-31{ width:31%; } .pmc-app .pmc-fill-32{ width:32%; } .pmc-app .pmc-fill-33{ width:33%; } .pmc-app .pmc-fill-34{ width:34%; } .pmc-app .pmc-fill-35{ width:35%; } .pmc-app .pmc-fill-36{ width:36%; } .pmc-app .pmc-fill-37{ width:37%; } .pmc-app .pmc-fill-38{ width:38%; } .pmc-app .pmc-fill-39{ width:39%; }
.pmc-app .pmc-fill-40{ width:40%; } .pmc-app .pmc-fill-41{ width:41%; } .pmc-app .pmc-fill-42{ width:42%; } .pmc-app .pmc-fill-43{ width:43%; } .pmc-app .pmc-fill-44{ width:44%; } .pmc-app .pmc-fill-45{ width:45%; } .pmc-app .pmc-fill-46{ width:46%; } .pmc-app .pmc-fill-47{ width:47%; } .pmc-app .pmc-fill-48{ width:48%; } .pmc-app .pmc-fill-49{ width:49%; }
.pmc-app .pmc-fill-50{ width:50%; } .pmc-app .pmc-fill-51{ width:51%; } .pmc-app .pmc-fill-52{ width:52%; } .pmc-app .pmc-fill-53{ width:53%; } .pmc-app .pmc-fill-54{ width:54%; } .pmc-app .pmc-fill-55{ width:55%; } .pmc-app .pmc-fill-56{ width:56%; } .pmc-app .pmc-fill-57{ width:57%; } .pmc-app .pmc-fill-58{ width:58%; } .pmc-app .pmc-fill-59{ width:59%; }
.pmc-app .pmc-fill-60{ width:60%; } .pmc-app .pmc-fill-61{ width:61%; } .pmc-app .pmc-fill-62{ width:62%; } .pmc-app .pmc-fill-63{ width:63%; } .pmc-app .pmc-fill-64{ width:64%; } .pmc-app .pmc-fill-65{ width:65%; } .pmc-app .pmc-fill-66{ width:66%; } .pmc-app .pmc-fill-67{ width:67%; } .pmc-app .pmc-fill-68{ width:68%; } .pmc-app .pmc-fill-69{ width:69%; }
.pmc-app .pmc-fill-70{ width:70%; } .pmc-app .pmc-fill-71{ width:71%; } .pmc-app .pmc-fill-72{ width:72%; } .pmc-app .pmc-fill-73{ width:73%; } .pmc-app .pmc-fill-74{ width:74%; } .pmc-app .pmc-fill-75{ width:75%; } .pmc-app .pmc-fill-76{ width:76%; } .pmc-app .pmc-fill-77{ width:77%; } .pmc-app .pmc-fill-78{ width:78%; } .pmc-app .pmc-fill-79{ width:79%; }
.pmc-app .pmc-fill-80{ width:80%; } .pmc-app .pmc-fill-81{ width:81%; } .pmc-app .pmc-fill-82{ width:82%; } .pmc-app .pmc-fill-83{ width:83%; } .pmc-app .pmc-fill-84{ width:84%; } .pmc-app .pmc-fill-85{ width:85%; } .pmc-app .pmc-fill-86{ width:86%; } .pmc-app .pmc-fill-87{ width:87%; } .pmc-app .pmc-fill-88{ width:88%; } .pmc-app .pmc-fill-89{ width:89%; }
.pmc-app .pmc-fill-90{ width:90%; } .pmc-app .pmc-fill-91{ width:91%; } .pmc-app .pmc-fill-92{ width:92%; } .pmc-app .pmc-fill-93{ width:93%; } .pmc-app .pmc-fill-94{ width:94%; } .pmc-app .pmc-fill-95{ width:95%; } .pmc-app .pmc-fill-96{ width:96%; } .pmc-app .pmc-fill-97{ width:97%; } .pmc-app .pmc-fill-98{ width:98%; } .pmc-app .pmc-fill-99{ width:99%; }
.pmc-app .pmc-fill-100{ width:100%; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Home/index (#3053)
   --------------------------------------------------------------------------
   Le tableau de bord d'accueil n'avait aucune classe Bootstrap : il portait sa
   propre feuille `<style>` locale (prefixe `.hm-`) avec 122 couleurs / tailles
   en dur, illisibles en theme v2 (Dark Ops). Tout est repris ici sur les
   tokens. Deux points de contrat :

   1. `.hm-card` / `.hm-card-head` / `.hm-card-body` / `.hm-badge` sont
      CONSOMMEES par les partials de plugin injectes dans le slot
      `home.cards` (`PluginSlot::partials('home.cards')`, ex. le plugin EOL).
      Ces partials vivent hors du depot : on garde donc les selecteurs a
      l'identique, rebranches sur les tokens, jusqu'a leur propre migration.
   2. Les anneaux SVG (disponibilite / replication) portent leurs couleurs par
      classe (`.pmc-hm-ring-arc`), jamais par attribut `stroke="#..."`.
   -------------------------------------------------------------------------- */

/* ---- Tuiles KPI (pmc-stat centrees + anneau SVG) ---- */
.pmc-app .pmc-hm-kpis{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.pmc-app .pmc-hm-kpi{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:2px; padding:var(--pmc-sp-4);
}
.pmc-app .pmc-hm-kpi .pmc-label{ margin-top:var(--pmc-sp-1); }
.pmc-app .pmc-hm-kpi .pmc-delta{ line-height:1.5; }
.pmc-app .pmc-hm-kpi-total{ font-size:var(--pmc-fs-md); color:var(--pmc-text-3); font-weight:600; }

.pmc-app .pmc-hm-ring{ position:relative; width:80px; height:80px; margin-bottom:var(--pmc-sp-1); }
.pmc-app .pmc-hm-ring svg{ transform:rotate(-90deg); }
.pmc-app .pmc-hm-ring-track{ stroke:var(--pmc-neutral-soft); }
.pmc-app .pmc-hm-ring-arc{ stroke:var(--pmc-primary); }
.pmc-app .pmc-hm-kpi.pmc-ok   .pmc-hm-ring-arc{ stroke:var(--pmc-ok); }
.pmc-app .pmc-hm-kpi.pmc-warn .pmc-hm-ring-arc{ stroke:var(--pmc-warn); }
.pmc-app .pmc-hm-kpi.pmc-crit .pmc-hm-ring-arc{ stroke:var(--pmc-crit); }
.pmc-app .pmc-hm-ring-val{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:var(--pmc-fs-lg); font-weight:800; color:var(--pmc-text);
  font-variant-numeric:tabular-nums;
}

/* ---- Couleurs de texte d'etat (compteurs up/down/err/lag/stop) ---- */
.pmc-app .pmc-hm-t-ok{    color:var(--pmc-ok);     font-weight:600; }
.pmc-app .pmc-hm-t-warn{  color:var(--pmc-warn);   font-weight:600; }
.pmc-app .pmc-hm-t-crit{  color:var(--pmc-crit);   font-weight:600; }
.pmc-app .pmc-hm-t-info{  color:var(--pmc-info);   font-weight:600; }
.pmc-app .pmc-hm-t-muted{ color:var(--pmc-text-3); }

/* ---- Cartes d'alerte : liseret gauche selon la gravite ---- */
.pmc-app .pmc-hm-card-crit{ border-left:4px solid var(--pmc-crit); }
.pmc-app .pmc-hm-card-warn{ border-left:4px solid var(--pmc-warn); }
.pmc-app .pmc-hm-card-ok{   border-left:4px solid var(--pmc-ok); }
.pmc-app .pmc-hm-card-crit > .pmc-card-head,
.pmc-app .pmc-hm-card-warn > .pmc-card-head,
.pmc-app .pmc-hm-card-ok   > .pmc-card-head{ border-radius:0 calc(var(--pmc-r-md) - 1px) 0 0; }

/* ---- Lignes d'incident (serveur injoignable, MaxScale, VIP, orphelins…) ---- */
.pmc-app .pmc-hm-list{ display:flex; flex-direction:column; gap:var(--pmc-sp-1); }
.pmc-app .pmc-hm-item{
  display:flex; align-items:baseline; gap:var(--pmc-sp-2); flex-wrap:wrap;
  padding:6px var(--pmc-sp-3); border-left:3px solid var(--pmc-border-strong);
  border-radius:0 var(--pmc-r-sm) var(--pmc-r-sm) 0;
  background:var(--pmc-surface-alt); font-size:var(--pmc-fs-sm); color:var(--pmc-text);
}
.pmc-app .pmc-hm-item-crit{ border-left-color:var(--pmc-crit); background:var(--pmc-crit-soft); }
.pmc-app .pmc-hm-item-warn{ border-left-color:var(--pmc-warn); background:var(--pmc-warn-soft); }
.pmc-app .pmc-hm-item-info{ border-left-color:var(--pmc-info); background:var(--pmc-info-soft); }
.pmc-app .pmc-hm-item-name{ font-weight:700; min-width:160px; }
.pmc-app .pmc-hm-item-path{ font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); word-break:break-all; }
.pmc-app .pmc-hm-item-meta{ color:var(--pmc-text-2); font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-hm-item-msg{ flex:1 1 240px; min-width:0; color:var(--pmc-text-2); overflow-wrap:anywhere; }
.pmc-app .pmc-hm-more{ text-align:center; padding:6px; color:var(--pmc-text-3); font-size:var(--pmc-fs-sm); }

/* ---- Carte « Replication issues » (#1210) : un bloc par bucket, une ligne
       par signature d'erreur dedupliquee. Aucune couleur en dur : la gravite
       du bucket vient des tokens d'etat, jamais adoucie. ---- */
.pmc-app .pmc-hm-bucket{
  padding:6px var(--pmc-sp-3); border-left:3px solid var(--pmc-border-strong);
  border-radius:0 var(--pmc-r-sm) var(--pmc-r-sm) 0; background:var(--pmc-surface-alt);
}
.pmc-app .pmc-hm-bucket-crit{ border-left-color:var(--pmc-crit); background:var(--pmc-crit-soft); }
.pmc-app .pmc-hm-bucket-warn{ border-left-color:var(--pmc-warn); background:var(--pmc-warn-soft); }
.pmc-app .pmc-hm-bucket-info{ border-left-color:var(--pmc-info); background:var(--pmc-info-soft); }
.pmc-app .pmc-hm-bucket-head{ font-weight:600; font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-hm-bucket-crit .pmc-hm-bucket-head{ color:var(--pmc-crit); }
.pmc-app .pmc-hm-bucket-warn .pmc-hm-bucket-head{ color:var(--pmc-warn); }
.pmc-app .pmc-hm-bucket-info .pmc-hm-bucket-head{ color:var(--pmc-info); }
.pmc-app .pmc-hm-bucket-count{ color:var(--pmc-text-3); font-weight:400; }
.pmc-app .pmc-hm-group{ margin:var(--pmc-sp-1) 0 var(--pmc-sp-1) 14px; font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-hm-group-msg{
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs);
  color:var(--pmc-text); word-break:break-word;
}
.pmc-app .pmc-hm-channels{ color:var(--pmc-text-3); margin-left:6px; }
.pmc-app .pmc-hm-channels small{ color:var(--pmc-text-3); }

/* ---- Carte d'audit ProxySQL (#929) : les suffixes `-critical` / `-warning`
       / `-info` sont epingles par tests/View/HomeProxysqlAuditCardViewTest ---- */
.pmc-app .pmc-hm-pa-sev{ display:inline-flex; align-items:baseline; gap:var(--pmc-sp-1); font-weight:600; font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-hm-pa-sev-critical{ color:var(--pmc-crit); }
.pmc-app .pmc-hm-pa-sev-warning{  color:var(--pmc-warn); }
.pmc-app .pmc-hm-pa-sev-info{     color:var(--pmc-info); }
.pmc-app .pmc-hm-pa-count{ font-size:var(--pmc-fs-lg); font-weight:800; font-variant-numeric:tabular-nums; }
.pmc-app .pmc-hm-pa-title{ flex:0 1 auto; min-width:0; }
.pmc-app .pmc-hm-pa-action{ min-width:0; max-width:100%; }
.pmc-app .pmc-hm-pa-action-label{ flex:0 0 auto; }
.pmc-app .pmc-hm-pa-name{
  display:block; flex:0 1 auto; min-width:0;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
@media (max-width:768px){
  .pmc-app .pmc-hm-pa-head{ align-items:stretch; flex-wrap:wrap; }
  .pmc-app .pmc-hm-pa-title{ flex:1 1 100%; }
  .pmc-app .pmc-hm-pa-action{ flex:1 1 100%; width:100%; margin-left:0; }
}

/* ---- Carte CVE : table dense a en-tete collant + pastilles de gravite ---- */
.pmc-app .pmc-hm-cve-scroll{ max-height:460px; overflow:auto; }
.pmc-app .pmc-hm-cve-id{ font-weight:700; }
.pmc-app .pmc-hm-cve-title{ color:var(--pmc-text-2); font-size:var(--pmc-fs-xs); margin-top:2px; max-width:560px; }
.pmc-app .pmc-hm-cve-sub{ color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); margin-top:3px; }
/* `critical` doit rester distinct de `high` : fond plein, jamais adouci. */
.pmc-app .pmc-badge.pmc-hm-sev-critical{
  background:var(--pmc-crit); color:var(--pmc-on-crit); border-color:var(--pmc-crit);
}
.pmc-app .pmc-hm-chip{ margin:1px 2px 1px 0; }
.pmc-app a.pmc-hm-chip:hover{ text-decoration:none; }
/* Badges poses sur un en-tete degrade (resume CVE). */
.pmc-app .pmc-card-head .pmc-hm-head-badges{ display:flex; align-items:center; gap:var(--pmc-sp-1); flex-wrap:wrap; }
.pmc-app .pmc-card-head .pmc-hm-head-badges .pmc-badge{ margin-left:0; }
.pmc-app .pmc-hm-on-grad{
  background:rgba(255,255,255,.18); color:var(--pmc-grad-head-text);
  border-color:rgba(255,255,255,.25); text-transform:uppercase; letter-spacing:.03em;
}

/* ---- Barres de repartition (environnements / clients / versions) ---- */
.pmc-app .pmc-hm-bar{ display:flex; align-items:center; gap:var(--pmc-sp-2); margin-bottom:6px; font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-hm-bar:last-child{ margin-bottom:0; }
.pmc-app .pmc-hm-bar-label{
  min-width:110px; max-width:110px; color:var(--pmc-text-2); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pmc-app .pmc-hm-bar-track{
  flex:1; height:20px; background:var(--pmc-surface-alt); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm); overflow:hidden;
}
.pmc-app .pmc-hm-bar-fill{
  height:100%; border-radius:var(--pmc-r-sm); min-width:2px;
  background:var(--pmc-neutral); transition:width .6s ease;
}
.pmc-app .pmc-hm-bar-count{
  min-width:30px; text-align:right; color:var(--pmc-text-2); font-weight:700;
  font-size:var(--pmc-fs-sm); font-variant-numeric:tabular-nums;
}

/* ---- Palette categorielle : environnements / clients / SGBD (#3495) ----
   Sur ces trois cartes la couleur n'exprime pas un etat : elle IDENTIFIE une
   categorie (couleur de marque du moteur, code couleur d'environnement, serie
   client). Les teintes d'avant migration sont donc conservees a l'identique
   (decision produit, PR #3107), mais declarees ici comme tokens nommes et
   consommees via var() — la vue ne porte que des classes, aucun `style=`.
   Elles sont volontairement identiques dans les 3 themes : une couleur de
   marque ne suit pas le theme. Seul le lisere `--pmc-cat-ring` est theme-aware,
   pour qu'un aplat sombre (MariaDB #003545, ProxySQL #2a2a2a) reste detache de
   sa piste en v2 (Dark Ops). Ne pas reutiliser ces teintes pour du texte :
   plusieurs sont illisibles sur fond sombre. */
:root{
  /* Environnements — cle `env.class` renvoyee par le controleur */
  --pmc-hm-env-danger:#ef4444;
  --pmc-hm-env-warning:#f59e0b;
  --pmc-hm-env-default:#94a3b8;
  --pmc-hm-env-info:#3b82f6;
  --pmc-hm-env-success:#10b981;
  --pmc-hm-env-primary:#6366f1;
  /* Clients — serie cyclique de 10 teintes, indexee sur la position */
  --pmc-hm-cli-1:#1e3a8a; --pmc-hm-cli-2:#3b82f6; --pmc-hm-cli-3:#0ea5e9;
  --pmc-hm-cli-4:#06b6d4; --pmc-hm-cli-5:#14b8a6; --pmc-hm-cli-6:#10b981;
  --pmc-hm-cli-7:#84cc16; --pmc-hm-cli-8:#eab308; --pmc-hm-cli-9:#f97316;
  --pmc-hm-cli-10:#ef4444;
  /* SGBD — couleurs de marque */
  --pmc-hm-fork-mariadb:#003545;
  --pmc-hm-fork-mysql:#e97b00;
  --pmc-hm-fork-percona:#c3281c;
  --pmc-hm-fork-proxysql:#2a2a2a;
  --pmc-hm-fork-maxscale:#00b5e2;
  --pmc-hm-fork-mysql-router:#5a9e3f;
  --pmc-hm-fork-clickhouse:#ffcc01;
  /* Repli commun aux trois cartes (categorie inconnue) */
  --pmc-hm-cat-other:#64748b;
}
.pmc-app .pmc-hm-bar-fill.pmc-hm-cat{ box-shadow:inset 0 0 0 1px var(--pmc-cat-ring); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-env-danger{  background:var(--pmc-hm-env-danger); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-env-warning{ background:var(--pmc-hm-env-warning); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-env-default{ background:var(--pmc-hm-env-default); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-env-info{    background:var(--pmc-hm-env-info); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-env-success{ background:var(--pmc-hm-env-success); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-env-primary{ background:var(--pmc-hm-env-primary); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-1{  background:var(--pmc-hm-cli-1); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-2{  background:var(--pmc-hm-cli-2); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-3{  background:var(--pmc-hm-cli-3); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-4{  background:var(--pmc-hm-cli-4); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-5{  background:var(--pmc-hm-cli-5); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-6{  background:var(--pmc-hm-cli-6); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-7{  background:var(--pmc-hm-cli-7); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-8{  background:var(--pmc-hm-cli-8); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-9{  background:var(--pmc-hm-cli-9); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cli-10{ background:var(--pmc-hm-cli-10); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-fork-mariadb{      background:var(--pmc-hm-fork-mariadb); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-fork-mysql{        background:var(--pmc-hm-fork-mysql); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-fork-percona{      background:var(--pmc-hm-fork-percona); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-fork-proxysql{     background:var(--pmc-hm-fork-proxysql); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-fork-maxscale{     background:var(--pmc-hm-fork-maxscale); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-fork-mysql-router{ background:var(--pmc-hm-fork-mysql-router); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-fork-clickhouse{   background:var(--pmc-hm-fork-clickhouse); }
.pmc-app .pmc-hm-bar-fill.pmc-hm-cat-other{         background:var(--pmc-hm-cat-other); }

/* Teintes de serie sur tokens : pastille contour des produits CVE. */
.pmc-app .pmc-badge.pmc-hm-c1{ color:var(--pmc-chart-1); }
.pmc-app .pmc-badge.pmc-hm-c2{ color:var(--pmc-chart-2); }
.pmc-app .pmc-badge.pmc-hm-c3{ color:var(--pmc-chart-3); }
.pmc-app .pmc-badge.pmc-hm-c4{ color:var(--pmc-chart-4); }
.pmc-app .pmc-badge.pmc-hm-c5{ color:var(--pmc-chart-5); }
.pmc-app .pmc-badge.pmc-hm-c-warn{    color:var(--pmc-warn); }
.pmc-app .pmc-badge.pmc-hm-c-neutral{ color:var(--pmc-neutral); }
.pmc-app .pmc-badge.pmc-hm-c1, .pmc-app .pmc-badge.pmc-hm-c2, .pmc-app .pmc-badge.pmc-hm-c3,
.pmc-app .pmc-badge.pmc-hm-c4, .pmc-app .pmc-badge.pmc-hm-c5,
.pmc-app .pmc-badge.pmc-hm-c-warn, .pmc-app .pmc-badge.pmc-hm-c-neutral{
  background:transparent; border-color:currentColor;
}

/* ---- Grille compacte des daemons ---- */
.pmc-app .pmc-hm-daemons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:6px; }
.pmc-app .pmc-hm-daemon{
  display:flex; align-items:center; gap:var(--pmc-sp-2); padding:5px var(--pmc-sp-2);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
  background:var(--pmc-surface-alt); font-size:var(--pmc-fs-xs);
}
.pmc-app .pmc-hm-daemon-name{
  flex:1; min-width:0; font-weight:600; color:var(--pmc-text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pmc-app .pmc-hm-daemon .pmc-badge{ text-transform:uppercase; }

/* ---- Acces rapides (cartes-liens du bas de page) ---- */
.pmc-app .pmc-hm-quick{
  display:flex; align-items:center; justify-content:space-between; gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-3) var(--pmc-sp-4); font-weight:600; color:var(--pmc-text);
}
.pmc-app .pmc-hm-quick:hover{ border-color:var(--pmc-primary); color:var(--pmc-primary); text-decoration:none; }
.pmc-app .pmc-hm-quick-title{ font-size:var(--pmc-fs-md); }
.pmc-app .pmc-hm-quick-go{ color:var(--pmc-primary); font-size:var(--pmc-fs-lg); }

/* ---- CONTRAT plugins : partials du slot `home.cards` (hors depot) ----------
   Ils emettent encore `.hm-card` / `.hm-card-head` / `.hm-card-body` /
   `.hm-badge`. On les rebranche sur les composants pmc (tokens uniquement)
   pour qu'une carte de plugin reste lisible dans les 3 themes. A supprimer
   quand les plugins concernes auront migre. */
.pmc-app .hm-card{
  background:var(--pmc-surface); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md); box-shadow:var(--pmc-shadow-sm); overflow:hidden;
}
.pmc-app .hm-card-head{
  background:var(--pmc-grad-head); color:var(--pmc-grad-head-text);
  padding:var(--pmc-sp-2) var(--pmc-sp-4); font-size:var(--pmc-fs-sm); font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:var(--pmc-sp-2);
}
.pmc-app .hm-card-head a{ color:var(--pmc-grad-head-text); }
.pmc-app .hm-card-body{ padding:var(--pmc-sp-4); }
.pmc-app .hm-badge{
  background:rgba(255,255,255,.2); color:var(--pmc-grad-head-text);
  padding:2px 8px; border-radius:var(--pmc-r-full); font-size:var(--pmc-fs-xs); font-weight:400;
}

@media (max-width:768px){
  .pmc-app .pmc-hm-item-name{ min-width:0; }
  .pmc-app .pmc-hm-bar-label{ min-width:80px; max-width:80px; }
}

/* Logo « trou noir » du bandeau de tete. Il n'est rendu que sur un
   `pmc-card-head`, dont le fond `--pmc-grad-head` est sombre dans les trois
   themes : le coeur et le halo sont donc des tokens de marque locaux, le
   disque d'accretion et le jet reprennent les tokens de graphique. */
.pmc-app .pmc-bh-logo{
  --pmc-bh-void:#000000;
  --pmc-bh-halo:#1a1a2e;
  width:18px; height:18px; flex:none;
}
.pmc-app .pmc-bh-logo .pmc-bh-stop-void{ stop-color:var(--pmc-bh-void); }
.pmc-app .pmc-bh-logo .pmc-bh-stop-halo{ stop-color:var(--pmc-bh-halo); }
.pmc-app .pmc-bh-logo .pmc-bh-stop-disc{ stop-color:var(--pmc-chart-3); }
.pmc-app .pmc-bh-logo .pmc-bh-stop-jet{  stop-color:var(--pmc-chart-4); }
.pmc-app .pmc-bh-logo .pmc-bh-stop-fade{ stop-color:var(--pmc-chart-4); stop-opacity:0; }
.pmc-app .pmc-bh-logo .pmc-bh-core{ fill:var(--pmc-bh-void); }

/* Complement de titre dans un bandeau de card (contexte, lien vers l'issue). */
.pmc-app .pmc-bh-sub{
  font-weight:400; font-size:var(--pmc-fs-xs); color:var(--pmc-grad-head-muted);
}
.pmc-app .pmc-bh-sub a{ color:var(--pmc-grad-head-text); text-decoration:underline; }

.pmc-app .pmc-bh-intro{ margin:0; font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); }
.pmc-app .pmc-bh-note{ color:var(--pmc-text-2); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-bh-na{ color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); font-style:italic; }
.pmc-app .pmc-bh-ok{ color:var(--pmc-ok); }
/* Un candidat avec des esclaves en aval est celui qui gagne le plus a passer
   derriere un relais : on le teinte comme une donnee remarquable, pas comme
   une alerte. */
.pmc-app .pmc-bh-benefit{ color:var(--pmc-chart-3); }

/* Cellule d'actions : boutons compacts sur une seule ligne. */
.pmc-app .pmc-tbl td.pmc-bh-actions{
  height:auto; padding-top:var(--pmc-sp-1); padding-bottom:var(--pmc-sp-1); white-space:nowrap;
}
.pmc-app .pmc-bh-actions > *{ vertical-align:middle; margin-right:var(--pmc-sp-1); }
.pmc-app .pmc-bh-actions > *:last-child{ margin-right:0; }

/* Nombre de workers ALTER paralleles : champ numerique tres court. */
.pmc-app .pmc-input.pmc-bh-par{
  display:inline-block; width:60px; height:var(--pmc-h-ctl-sm);
  padding:0 var(--pmc-sp-1); text-align:center; font-size:var(--pmc-fs-xs);
}

/* Barre « % migre » de la carte des relais actifs (#1252). Reutilise le
   composant pmc-progress et les paliers de 5 % .pmc-bk-fill-* deja definis
   pour Backup/index — aucune width en dur, aucune famille dupliquee. */
.pmc-app .pmc-progress.pmc-bh-bar{
  display:inline-block; width:90px; vertical-align:middle; margin-right:var(--pmc-sp-1);
}
.pmc-app .pmc-bh-pct{
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2);
}

/* Journal de progression : terminal (pmc-log-viewer) borne en hauteur et
   defilant, les etapes reprennent les couleurs d'etat du theme. */
.pmc-app .pmc-bh-meta{
  font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); margin-bottom:var(--pmc-sp-2);
}
/* Le fond de pmc-log-viewer est le degrade sombre --pmc-grad-head dans les
   trois themes : les etats doivent donc rester les variantes CLAIRES, sinon
   `--pmc-warn` (#b45309 en v1) devient illisible sur du bleu nuit. On declare
   des tokens locaux plutot que de figer les couleurs sur chaque regle. */
.pmc-app .pmc-bh-log{
  --pmc-bh-step-running: var(--pmc-warn);
  --pmc-bh-step-done:    var(--pmc-ok);
  --pmc-bh-step-error:   var(--pmc-crit);
  max-height:320px; white-space:pre-wrap; line-height:1.6;
}
:root[data-theme="v1"] .pmc-app .pmc-bh-log,
:root[data-theme="v3"] .pmc-app .pmc-bh-log,
:root:not([data-theme]) .pmc-app .pmc-bh-log{
  --pmc-bh-step-running:#facc15;
  --pmc-bh-step-done:#4ade80;
  --pmc-bh-step-error:#f87171;
}
.pmc-app .pmc-bh-step{ color:var(--pmc-grad-head-text); }
.pmc-app .pmc-bh-step-running{ color:var(--pmc-bh-step-running); }
.pmc-app .pmc-bh-step-done{ color:var(--pmc-bh-step-done); }
.pmc-app .pmc-bh-step-error{ color:var(--pmc-bh-step-error); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Perf/index (#3053)
   Tableau de bord KPI d'auto-supervision (SuperAdmin > Performance).
   Tokens uniquement. Les paliers de largeur des barres de disque reutilisent
   la famille partagee `.pmc-bk-fill-*` (pas de nouvelle famille).
   -------------------------------------------------------------------------- */

/* Conteneurs de canvas Chart.js : hauteur bornee + contexte de positionnement
   (Chart.js exige un parent positionne pour le mode responsive). */
.pmc-app .pmc-pf-chart{ position:relative; height:240px; }
.pmc-app .pmc-pf-chart.pmc-pf-chart-md{ height:300px; }
.pmc-app .pmc-pf-chart.pmc-pf-chart-lg{ height:360px; }

/* Segment hour/day/week : Perf/index.js bascule la classe `active` (nom
   conserve a l'octet pres), on ne fait que la restyler sur les tokens. */
.pmc-app .pmc-pf-seg .pmc-btn.active{
  background:var(--pmc-primary); color:var(--pmc-on-primary);
  border-color:var(--pmc-primary); position:relative; z-index:1;
}

/* Notes discretes (legendes de graphique, totaux disque) — remplace text-muted. */
.pmc-app .pmc-pf-note{
  font-size:var(--pmc-fs-xs); color:var(--pmc-text-3); font-variant-numeric:tabular-nums;
}
.pmc-app .pmc-card-body > .pmc-pf-note{ display:block; margin-top:var(--pmc-sp-2); }

/* Liste des avertissements du payload, dans une pmc-alert (qui est en flex). */
.pmc-app .pmc-pf-warn-list{ margin:0; padding-left:18px; }

/* Table « Top tables » : zone defilante bornee, en-tete collant (pmc-tbl-sticky). */
.pmc-app .pmc-pf-tables{ max-height:360px; overflow:auto; }

/* Une ligne « systeme de fichiers » : chemin + chiffres, puis la barre. */
.pmc-app .pmc-pf-disk{ margin-bottom:var(--pmc-sp-3); }
.pmc-app .pmc-pf-disk-head{
  display:flex; align-items:baseline; gap:var(--pmc-sp-2); flex-wrap:wrap;
  margin-bottom:var(--pmc-sp-1);
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — CollectionFreshness/index
   Historique du garde de collecte : filtres, graphiques et moments statistiques.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-cf-filter{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap:var(--pmc-sp-3);
  align-items:end;
}
.pmc-app .pmc-cf-filter .pmc-field{ margin:0; }
.pmc-app .pmc-cf-chart{
  position:relative;
  height:300px;
}
.pmc-app .pmc-cf-chart.pmc-cf-chart-aggregate{ height:340px; }
.pmc-app .pmc-cf-note{
  display:block;
  margin-top:var(--pmc-sp-2);
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
}
.pmc-app .pmc-cf-sample-time{ font-size:var(--pmc-fs-xl); }
.pmc-app .pmc-cf-stats{ min-width:1600px; }
@media (max-width:760px){
  .pmc-app .pmc-cf-filter{ grid-template-columns:minmax(0, 1fr); }
  .pmc-app .pmc-cf-filter .pmc-btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlRouter/index (#3053)
   Control plane MySQL Router : une carte par Router (en-tete degrade
   `--pmc-grad-head`, badge d'etat de l'API Admin), puis trois panneaux —
   runtime, metadata cache / Group Replication, routes publiees.
   Tokens uniquement ; les composants generiques (pmc-card, pmc-stat,
   pmc-badge, pmc-empty, pmc-alert, pmc-section-label, pmc-grid-3) portent
   l'essentiel du rendu, les regles ci-dessous ne couvrent que le reste.
   -------------------------------------------------------------------------- */

/* Barre de titre de l'ecran : le h2 garde sa marge basse hors contexte flex. */
.pmc-app .pmc-rt-head h2{ margin:0; }

/* En-tete de carte : identite a gauche, badge d'etat pousse a droite par la
   regle generique `.pmc-card-head .pmc-badge`, identifiants a la suite.
   Le wrap evite que les trois blocs se compriment sous 768px. */
.pmc-app .pmc-rt-hd{ flex-wrap:wrap; }
/* Ligne de sante de l'API REST du Router (#1009) au-dessus des trois colonnes. */
.pmc-app .pmc-rt-health{ gap:var(--pmc-sp-2); margin-bottom:var(--pmc-sp-3); }
.pmc-app .pmc-rt-health-meta{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }
.pmc-app .pmc-rt-who{ min-width:0; display:flex; flex-direction:column; }
.pmc-app .pmc-rt-who b{ font-size:var(--pmc-fs-md); }
.pmc-app .pmc-rt-who small,
.pmc-app .pmc-rt-cred{
  font-size:var(--pmc-fs-xs); font-weight:400; color:var(--pmc-grad-head-muted);
}
.pmc-app .pmc-rt-who small code,
.pmc-app .pmc-rt-cred code{
  background:rgba(255,255,255,.12); border-color:transparent; color:var(--pmc-grad-head-text);
}
/* Bouton de copie du mot de passe (fragment Server/passwd, pmc-btn-ghost) posé sur
   l'en-tête en dégradé : même rendu que pmc-btn-on-grad (#5584). */
.pmc-app .pmc-rt-cred .pmc-copy{ --pmc-btn-text:var(--pmc-grad-head-text); color:var(--pmc-grad-head-text); }
.pmc-app .pmc-rt-cred .pmc-copy:hover:not(:disabled){ background:rgba(255,255,255,.2); color:var(--pmc-grad-head-text); }

/* `pmc-num` / `pmc-mono` ne sont definis que sous `.pmc-tbl` ; les panneaux de
   cet ecran n'utilisent pas de table (meme precedent que `.pmc-sv-metric`). */
.pmc-app .pmc-rt-card .pmc-num{
  font-family:var(--pmc-font-mono); font-size:12.5px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.pmc-app .pmc-rt-card .pmc-mono{
  font-family:var(--pmc-font-mono); font-size:12px; overflow-wrap:anywhere;
}

/* Paires cle / valeur d'un panneau (remplacent les anciens `<b>cle</b>: valeur`). */
.pmc-app .pmc-rt-kv{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:2px var(--pmc-sp-3); font-size:var(--pmc-fs-sm);
}
.pmc-app .pmc-rt-k{ color:var(--pmc-text-2); font-weight:600; }
.pmc-app .pmc-rt-v{ min-width:0; overflow-wrap:anywhere; }

/* Intertitres des panneaux (Connections, Mapped Frontends, Cluster nodes…). */
.pmc-app .pmc-rt-card .pmc-section-label{
  display:block; margin:var(--pmc-sp-3) 0 var(--pmc-sp-1);
}
.pmc-app .pmc-rt-card .pmc-section-label:first-child{ margin-top:0; }

.pmc-app .pmc-rt-list{
  margin:0; padding-left:18px; display:grid; gap:2px; font-size:var(--pmc-fs-sm);
}

/* Sous-bloc repete dans un panneau : une entree de metadata cache, une route. */
.pmc-app .pmc-rt-block{
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
  background:var(--pmc-surface-alt); padding:var(--pmc-sp-3);
}
.pmc-app .pmc-rt-block + .pmc-rt-block{ margin-top:var(--pmc-sp-3); }
.pmc-app .pmc-rt-block-title{
  display:flex; align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap;
  font-weight:700; margin-bottom:var(--pmc-sp-2);
}
/* Etat vide au fond d'un sous-bloc deja encadre : on compacte et on retire le
   fond pour ne pas empiler deux surfaces. */
.pmc-app .pmc-rt-block .pmc-empty{
  padding:var(--pmc-sp-3); background:transparent; font-size:var(--pmc-fs-sm);
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlServer/plugins (#3053)
   Onglet « Plugins » d'un serveur : moteurs de stockage live, plugins
   charges, puis la matrice du catalogue (`App\Library\PluginCatalog`) avec
   les colonnes Install / Uninstall reservees au SuperAdmin.
   L'essentiel du rendu vient des composants generiques (pmc-table-card,
   pmc-tbl, pmc-badge, pmc-btn, pmc-empty, pmc-card-foot) ; les regles
   ci-dessous ne couvrent que les teintes de ligne / colonne et les textes
   secondaires de l'ancien rendu inline. Tokens uniquement.
   Prefixe `pmc-pg-` (plugins) — verifie sans collision dans ce fichier.
   -------------------------------------------------------------------------- */

/* Sous-titre d'en-tete de carte (version du serveur, source Aspirateur…) :
   pose sur le degrade `--pmc-grad-head`, donc couleur « muted » dediee. */
.pmc-app .pmc-card-head .pmc-pg-sub{
  font-weight:400; font-size:var(--pmc-fs-xs); color:var(--pmc-grad-head-muted);
}
/* Compteur de lignes dans le titre de carte (n moteurs / n plugins). */
.pmc-app .pmc-card-head .pmc-pg-count{
  font-family:var(--pmc-font-mono); font-variant-numeric:tabular-nums;
}

/* Textes secondaires en cellule (commentaire moteur, type, licence, hint
   d'installation) — remplacent les `<small style="color:#…">`. */
.pmc-app .pmc-pg-note{ font-size:var(--pmc-fs-sm); color:var(--pmc-text-3); }
/* Placeholder d'une colonne d'action (« — », « SuperAdmin only ») : meme
   discretion, mais jamais coupe sur deux lignes dans une colonne etroite. */
.pmc-app .pmc-pg-muted{
  font-size:var(--pmc-fs-sm); color:var(--pmc-text-3); white-space:nowrap;
}
/* Description du catalogue : la seule cellule autorisee a passer a la ligne. */
.pmc-app .pmc-tbl td.pmc-pg-desc{
  font-size:var(--pmc-fs-sm); color:var(--pmc-text-2);
  white-space:normal; min-width:220px;
}

/* #5363 (Design Lab §7) : plus de teinte de ligne selon l'etat (badges +
   liseré pmc-row-warn/crit generiques) ni de teinte sur les `th` d'action
   (en-tete uniforme). Les cellules des deux colonnes d'action restent
   teintees (vert = Install, rouge = Uninstall) : garde-fou anti-mauvais clic
   decrit dans docs/plugin_catalog.md. */
.pmc-app .pmc-tbl td.pmc-pg-col-install{ background:color-mix(in srgb, var(--pmc-ok) 9%, transparent); }
.pmc-app .pmc-tbl td.pmc-pg-col-uninstall{ background:color-mix(in srgb, var(--pmc-crit) 9%, transparent); }

/* Legende du catalogue en pied de carte : les badges restent en ligne avec
   le texte explicatif, d'ou un interligne aere plutot qu'un flex. */
.pmc-app .pmc-pg-legend{ line-height:2; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlServer/processlist (#3053, épique #4027)
   Processlist temps réel d'un serveur : toolbar de rafraîchissement,
   jauge de connexions (pmc-progress), Metadata Lock Info et table des
   threads rechargée par AJAX dans `#processlist`.
   L'essentiel vient des composants génériques (pmc-card, pmc-table-card,
   pmc-tbl, pmc-progress, pmc-alert, pmc-btn-group, pmc-switch) ; ne
   restent ici que les teintes de ligne par ancienneté de requête et la
   mise en forme de la toolbar. Tokens uniquement.
   Préfixe `pmc-pl-` (processlist) — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */

/* Toolbar : libellé + groupe d'intervalles + interrupteur « Show all
   threads » sur une seule ligne, repliable sur petits écrans. */
.pmc-app .pmc-pl-toolbar{
  display:flex; align-items:center; gap:var(--pmc-sp-4); flex-wrap:wrap;
}
.pmc-app .pmc-pl-toolbar-label{ font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); }
.pmc-app .pmc-pl-toolbar-switch{ margin-left:auto; }

/* Intervalle actif du groupe de rafraîchissement : même accent que les
   onglets `pmc-tabs .pmc-active`. */
.pmc-app .pmc-pl-toolbar .pmc-btn.pmc-active{
  background:var(--pmc-primary); border-color:var(--pmc-primary);
  color:var(--pmc-on-primary);
}

/* Jauge de connexions (#5134) : les trois métriques pmc-progress tiennent
   côte à côte sur une seule ligne compacte, la note « max = 100 % » fermant
   la ligne ; le tout se replie sur petits écrans. */
.pmc-app .pmc-pl-meter{
  display:flex; align-items:center; gap:var(--pmc-sp-4); flex-wrap:wrap;
}
.pmc-app .pmc-pl-meter-item{ flex:1 1 200px; min-width:160px; }
.pmc-app .pmc-pl-meter-note{
  flex:0 0 auto; margin-left:auto; font-size:var(--pmc-fs-xs);
  color:var(--pmc-text-3); text-align:right;
}

/* Sous-titre d'en-tête de carte (heure de rafraîchissement des metadata
   locks) : posé sur le dégradé `--pmc-grad-head`. */
.pmc-app .pmc-card-head .pmc-pl-sub{
  font-weight:400; font-size:var(--pmc-fs-xs); color:var(--pmc-grad-head-muted);
}

/* Client pool notice: match the card header spacing and text line height. */
.pmc-app .pmc-pl-client-alert{ padding:var(--pmc-sp-2) var(--pmc-sp-4); }
.pmc-app .pmc-pl-client-alert > strong{ font-size:inherit; }

/* #5376 (Design Lab §7) : plus de teinte de ligne selon l'ancienneté du
   thread — liseré générique pmc-row-crit (> 600 s) / pmc-row-warn (> 60 s). */

/* Colonne Query : requête tronquée à 2048 caractères, rendue en mono avec
   les mots-clés SQL accentués (remplace le <span style> de l'ancien
   highlight_mariadb_keywords). */
.pmc-app .pmc-tbl th.pmc-pl-col-query{ width:40%; }
.pmc-app .pmc-tbl td.pmc-pl-query{
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs);
  word-break:break-word;
}
.pmc-app .pmc-pl-sql-kw{ color:var(--pmc-primary); font-weight:700; }
.pmc-app .pmc-pl-observations{ margin-top:var(--pmc-sp-2); }
.pmc-app .pmc-pl-observation + .pmc-pl-observation{ border-top:1px solid var(--pmc-border); margin-top:var(--pmc-sp-2); padding-top:var(--pmc-sp-2); }
.pmc-app .pmc-pl-observation-metrics{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-2); }
.pmc-app .pmc-pl-observation-query{ white-space:pre-wrap; overflow-wrap:anywhere; margin-top:var(--pmc-sp-2); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlServer/ratios (#5388, Design Lab §7)
   Table détail au balisage pmc-tbl (en-tête, zébrage, survol génériques) ;
   les cellules gardent leurs classes `tr-` (famille tuning-ratio). Préfixe
   `pmc-tr-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-mysqlserver-ratios .pmc-tbl.pmc-tr-detail{ min-width:920px; }
.pmc-mysqlserver-ratios .pmc-tr-detail > tbody > tr > th,
.pmc-mysqlserver-ratios .pmc-tr-detail > tbody > tr > td{
  height:auto; padding-block:var(--pmc-sp-2); vertical-align:middle;
}
/* Le th[scope=row] de l'indicateur est une cellule de données : pas l'habillage d'en-tête. */
.pmc-mysqlserver-ratios .pmc-tr-detail > tbody > tr > th{
  background:transparent; box-shadow:none; border-bottom:1px solid var(--pmc-border);
  font-size:var(--pmc-fs-sm); white-space:normal;
}
.pmc-mysqlserver-ratios .pmc-tr-detail > tbody > tr:last-child > th{ border-bottom:0; }
/* Liseré d'état (pmc-row-warn/crit) sur la première cellule, ici un th. */
.pmc-mysqlserver-ratios .pmc-tr-detail > tbody > tr.pmc-row-crit > th:first-child{ box-shadow:inset 3px 0 0 var(--pmc-crit); }
.pmc-mysqlserver-ratios .pmc-tr-detail > tbody > tr.pmc-row-warn > th:first-child{ box-shadow:inset 3px 0 0 var(--pmc-warn); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlServer/main (#3053, épique #4027)
   Onglet Info d'un serveur : cartes de groupes clé/valeur (Résumé, OS,
   InnoDB, Galera…), jauges d'utilisation, tables Disques / Processlist,
   puis le tableau « last refresh ». L'essentiel vient des composants
   génériques (pmc-card, pmc-tbl, pmc-progress, pmc-badge, pmc-btn) ;
   restent ici la disposition en colonnes (remplace masonry/jquery) et
   les finitions clé/valeur. Tokens uniquement.
   Préfixe `pmc-mi-` (main info) — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */

/* Disposition « maçonnerie » pure CSS : les cartes s'empilent dans des
   colonnes équilibrées, sans trous sous les cartes courtes. */
.pmc-app .pmc-mi-columns{ columns:3 var(--pmc-mi-col, 320px); column-gap:var(--pmc-sp-4); }
.pmc-app .pmc-mi-columns > .pmc-mi-card{
  break-inside:avoid; margin-bottom:var(--pmc-sp-4);
}
@media (max-width:1200px){ .pmc-app .pmc-mi-columns{ columns:2 var(--pmc-mi-col, 320px); } }
@media (max-width:768px){ .pmc-app .pmc-mi-columns{ columns:1; } }

/* Carte Résumé quand MySQL est indisponible : liseré + fond critiques. */
.pmc-app .pmc-mi-card-crit{ border-color:var(--pmc-crit-border); }
.pmc-app .pmc-mi-card-crit .pmc-tbl tbody tr,
.pmc-app .pmc-mi-card-crit .pmc-tbl tbody tr:nth-child(even){ background:var(--pmc-crit-soft); }

/* Tables clé/valeur : libellé à gauche, valeur alignée à droite (sauf les
   panneaux Galera, plus verbeux, qui restent à gauche). */
.pmc-app .pmc-mi-kv{ table-layout:fixed; }
.pmc-app .pmc-mi-kv td{ word-break:break-word; }
.pmc-app .pmc-mi-kv .pmc-mi-k{ width:50%; color:var(--pmc-text-2); }
.pmc-app .pmc-mi-kv .pmc-mi-v{ width:50%; text-align:right; }
.pmc-app .pmc-mi-kv .pmc-mi-v-left{ text-align:left; }
/* #879: ZFS datadir advisor findings inside the OS panel */
.pmc-app .pmc-mi-kv .pmc-zfs-summary{ margin-top:.3rem; text-align:left; font-size:.78rem; line-height:1.35; opacity:.9; overflow-wrap:anywhere; }
.pmc-app .pmc-mi-kv .pmc-zfs-findings{ margin:.35rem 0 0; padding-left:1.1rem; text-align:left; font-size:.8rem; line-height:1.35; }
.pmc-app .pmc-mi-kv .pmc-zfs-findings li{ margin:.15rem 0; }
.pmc-app .pmc-mi-kv .pmc-zfs-findings em{ display:block; opacity:.8; font-style:normal; }
.pmc-app .pmc-mi-kv .pmc-zfs-critical strong{ color:var(--pmc-crit, #b42318); }
.pmc-app .pmc-mi-kv .pmc-zfs-warning strong{ color:var(--pmc-warn, #b54708); }
.pmc-app .pmc-mi-kv .pmc-zfs-ref{ display:block; margin-top:.25rem; font-size:.75rem; text-align:left; }

/* Lignes teintées des nœuds Galera (indisponible / non-Primary). */
.pmc-app .pmc-tbl tbody tr.pmc-mi-row-crit,
.pmc-app .pmc-tbl tbody tr.pmc-mi-row-crit:nth-child(even){ background:var(--pmc-crit-soft); }
.pmc-app .pmc-tbl tbody tr.pmc-mi-row-warn,
.pmc-app .pmc-tbl tbody tr.pmc-mi-row-warn:nth-child(even){ background:var(--pmc-warn-soft); }

/* Jauge d'utilisation en cellule : texte au-dessus, barre fine dessous. */
.pmc-app .pmc-mi-meter{ display:grid; gap:var(--pmc-sp-1); justify-items:end; }
.pmc-app .pmc-mi-v-left .pmc-mi-meter{ justify-items:start; }
.pmc-app .pmc-mi-meter .pmc-progress{ width:100%; height:4px; }
.pmc-app .pmc-mi-meter-text{ font-size:var(--pmc-fs-sm); }

/* Statut + bouton d'action (Monitoring, SET PRIMARY…) sur une ligne. */
.pmc-app .pmc-mi-actions{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-2);
  justify-content:flex-end; flex-wrap:wrap;
}
.pmc-app .pmc-mi-inline-form{ display:inline; margin:0; }

/* Les pseudo-systèmes restent consultables sans indenter ni ternir leur
   tableau à l'intérieur de l'accordéon natif. */
.pmc-app details.pmc-mi-virtual-disks{
  margin:0; border-width:1px 0 0; border-radius:0;
}
.pmc-app details.pmc-mi-virtual-disks .pmc-acc-body{
  padding:0; color:inherit; font-size:inherit;
}

/* Icône de distribution devant le libellé OS (émise par le contrôleur) :
   calée sur la ligne de texte, sans attribut style. */
.pmc-app .pmc-mi-os-icon{ width:1em; height:1em; vertical-align:text-bottom; }
:root[data-theme="v2"] .pmc-app .pmc-mi-chart-icon{ filter:invert(1); }

/* Instantané processlist : hauteur plafonnée, défilement interne. */
.pmc-app .pmc-mi-scroll-cap{ max-height:600px; overflow-y:auto; }

/* Tableau « last refresh » : colonne Action à droite, diffs discrets. */
.pmc-app .pmc-mi-th-action, .pmc-app .pmc-mi-td-action{ text-align:right; white-space:nowrap; }
.pmc-app .pmc-mi-muted{ color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-mi-treemap-canvas{ position:relative; height:360px; }
.pmc-app .pmc-mi-treemap-links{ margin-top:var(--pmc-sp-3); }
.pmc-app .pmc-mi-treemap-links .pmc-acc-body{
  display:flex; flex-wrap:wrap; gap:var(--pmc-sp-2) var(--pmc-sp-4);
  max-height:160px; overflow-y:auto;
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlServer/cve (#3053, épique #4027)
   CVE actives d'un serveur : en-tête + KPI `pmc-stat`, puis une carte par
   CVE (gravité en badges — mêmes conventions que la carte CVE du Home :
   critical en fond plein — chips serveurs impactés, table des versions
   affectées triable côté client (#5292) et références). La pastille produit reprend la palette
   catégorielle à tokens (#3495) au lieu d'une couleur hex libre en base.
   Préfixe `pmc-cv-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */

/* Sous-titre d'en-tête de carte (serveur, endpoint, contexte produit) et
   titre CVE : posés sur le dégradé `--pmc-grad-head`. */
.pmc-app .pmc-card-head .pmc-cv-sub{
  font-weight:400; font-size:var(--pmc-fs-xs); color:var(--pmc-grad-head-muted);
}
.pmc-app .pmc-card-head .pmc-cv-id{ color:var(--pmc-grad-head-text); font-weight:700; }
.pmc-app .pmc-card-head .pmc-cv-id:hover{ text-decoration:underline; }
.pmc-app .pmc-card-head .pmc-cv-actions,
.pmc-app .pmc-card-head .pmc-cv-head-badges{
  display:flex; align-items:center; gap:var(--pmc-sp-1); flex-wrap:wrap; margin-left:auto;
}

/* `critical` doit rester distinct de `high` : fond plein, jamais adouci. */
.pmc-app .pmc-badge.pmc-cv-sev-critical{
  background:var(--pmc-crit); color:var(--pmc-on-crit); border-color:var(--pmc-crit);
}

/* Palette catégorielle produit (mêmes tokens que le Home, #3495). */
.pmc-app .pmc-badge.pmc-cv-c1{ color:var(--pmc-chart-1); }
.pmc-app .pmc-badge.pmc-cv-c2{ color:var(--pmc-chart-2); }
.pmc-app .pmc-badge.pmc-cv-c4{ color:var(--pmc-chart-4); }
.pmc-app .pmc-badge.pmc-cv-c5{ color:var(--pmc-chart-5); }
.pmc-app .pmc-badge.pmc-cv-c-neutral{ color:var(--pmc-neutral); }

.pmc-app .pmc-cv-risk{ margin:0 0 var(--pmc-sp-2); line-height:1.45; }
.pmc-app .pmc-cv-meta{
  display:flex; flex-wrap:wrap; gap:var(--pmc-sp-2); align-items:center;
  color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); margin-bottom:var(--pmc-sp-2);
}

/* Chips des serveurs impactés : ligne au-dessus de la table des versions
   affectées (#5292 — plus de cellule fusionnée, incompatible avec le tri §7). */
.pmc-app .pmc-cv-impacted{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--pmc-sp-2); margin-bottom:var(--pmc-sp-2); }
.pmc-app .pmc-cv-impacted-label{ font-size:var(--pmc-fs-xs); font-weight:700; color:var(--pmc-text-2); padding-top:var(--pmc-sp-1); }
.pmc-app .pmc-cv-servers{ display:flex; flex-direction:column; gap:var(--pmc-sp-1); min-width:190px; }
.pmc-app .pmc-cv-impacted .pmc-cv-servers{ flex-direction:row; flex-wrap:wrap; min-width:0; }
.pmc-app .pmc-cv-impacted .pmc-cv-server{ min-width:190px; }
.pmc-app .pmc-cv-server{
  display:block; background:var(--pmc-surface-alt); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm); padding:var(--pmc-sp-1) var(--pmc-sp-2);
  color:var(--pmc-text); text-decoration:none;
}
.pmc-app .pmc-cv-server:hover{ background:var(--pmc-primary-soft); text-decoration:none; }
.pmc-app .pmc-cv-server-name{ display:block; font-weight:700; }
.pmc-app .pmc-cv-server-version{ display:block; color:var(--pmc-primary); font-weight:600; }
.pmc-app .pmc-cv-server-endpoint{ display:block; color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); }

/* Références externes en chips-liens sous la carte. */
.pmc-app .pmc-cv-links{ margin-top:var(--pmc-sp-2); display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1); }
.pmc-app a.pmc-cv-link:hover{ text-decoration:none; background:var(--pmc-primary-soft); }
.pmc-app .pmc-cv-muted{ color:var(--pmc-text-3); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlServer/logs (#3053, épique #4027)
   Journaux d'un serveur : widget d'événements agrégés (Logs/explorer.js),
   onglets par type de log, activité mensuelle (Chart.js) et lignes
   paginées (MysqlServer/logs.js). Les deux compagnons JS émettent ces
   classes : les garder synchronisées avec logs.js / explorer.js. La
   classe-hook `mysql-logs-page-link` (délégation par data-page) n'est
   volontairement pas stylée. Tokens uniquement, préfixe `pmc-lg-` —
   vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */

/* Chips d'en-tête (serveur + onglet actif) sur le dégradé de carte. */
.pmc-app .pmc-card-head .pmc-lg-head-chips{
  display:flex; align-items:center; gap:var(--pmc-sp-1); flex-wrap:wrap; margin-left:auto;
}
.pmc-app .pmc-lg-chip{
  display:inline-block; padding:2px 10px; border-radius:var(--pmc-r-full);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  font-size:var(--pmc-fs-xs); font-weight:400; color:var(--pmc-grad-head-text);
}
.pmc-app .pmc-lg-chip a{ color:inherit; }
.pmc-app .pmc-card-head .pmc-lg-head-link{
  margin-left:auto; font-size:var(--pmc-fs-xs); font-weight:400;
  color:var(--pmc-grad-head-text);
}
.pmc-lg-hidden{ display:none; }

/* Onglets par type de log : pilules avec compteur. */
.pmc-app .pmc-lg-tabs{
  display:flex; flex-wrap:wrap; gap:var(--pmc-sp-2);
  margin:0; padding:0; list-style:none;
}
.pmc-app .pmc-lg-tabs a{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-1);
  padding:6px 12px; border-radius:var(--pmc-r-full);
  background:var(--pmc-surface-alt); border:1px solid var(--pmc-border);
  color:var(--pmc-text); text-decoration:none;
}
.pmc-app .pmc-lg-tabs a:hover{ background:var(--pmc-primary-soft); text-decoration:none; }
.pmc-app .pmc-lg-tabs a.pmc-active{
  background:var(--pmc-primary); border-color:var(--pmc-primary); color:var(--pmc-on-primary);
}
.pmc-app .pmc-lg-tab-source{ opacity:.85; font-size:var(--pmc-fs-xs); }

/* Toolbar + zone du graphique d'activité. */
.pmc-app .pmc-lg-chart-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--pmc-sp-3); margin-bottom:var(--pmc-sp-2); flex-wrap:wrap;
}
.pmc-app .pmc-lg-chart-wrap{ position:relative; width:100%; height:280px; }
.pmc-app .pmc-lg-crash-item{ border-top:1px solid var(--pmc-border); padding:var(--pmc-sp-2) 0; }
.pmc-app .pmc-lg-crash-item:first-child{ border-top:0; }
.pmc-app .pmc-lg-crash-item summary{ cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-2); }
.pmc-app .pmc-lg-crash-meta{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:2px var(--pmc-sp-3); margin:var(--pmc-sp-2) 0; font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-lg-crash-meta dt{ color:var(--pmc-text-3); font-weight:600; }
.pmc-app .pmc-lg-crash-meta dd{ margin:0; overflow-wrap:anywhere; }
.pmc-app .pmc-lg-crash-query{ margin:0 0 var(--pmc-sp-2); white-space:pre-wrap; overflow-wrap:anywhere; max-height:16em; overflow:auto; }

/* Lignes de journal : pagination (markup dupliqué par logs.js), badge de
   niveau et cellules pré-formatées. */
.pmc-app .pmc-lg-lines-state{ margin-bottom:var(--pmc-sp-2); }
.pmc-app .pmc-lg-pagination{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--pmc-sp-3); margin-bottom:var(--pmc-sp-2); flex-wrap:wrap;
}
.pmc-app .pmc-lg-pagination-actions{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1); }
.pmc-app .pmc-lg-pagination .pmc-btn.pmc-active{
  background:var(--pmc-primary); border-color:var(--pmc-primary);
  color:var(--pmc-on-primary); pointer-events:none;
}
.pmc-app .pmc-lg-page-gap{
  display:inline-flex; align-items:center; color:var(--pmc-text-3); padding:0 4px;
}
.pmc-lg-muted{ color:var(--pmc-text-3); }
.pmc-lg-center{ text-align:center; }

.pmc-lg-level-badge{
  display:inline-block; padding:3px 8px; border-radius:var(--pmc-r-full);
  font-size:var(--pmc-fs-xs); line-height:1.2; border:1px solid transparent; font-weight:700;
}
.pmc-lg-level-error{ background:var(--pmc-crit-soft); color:var(--pmc-crit); border-color:var(--pmc-crit-border); }
.pmc-lg-level-warning{ background:var(--pmc-warn-soft); color:var(--pmc-warn); border-color:var(--pmc-warn-border); }
.pmc-lg-level-default{ background:var(--pmc-info-soft); color:var(--pmc-info); border-color:var(--pmc-info-border); }

.pmc-app .pmc-lg-table{ table-layout:fixed; }
.pmc-app .pmc-lg-table th.pmc-lg-col-num{ width:70px; }
.pmc-app .pmc-lg-table th.pmc-lg-col-date{ width:160px; }
.pmc-app .pmc-lg-table th.pmc-lg-col-level{ width:120px; }
.pmc-app .pmc-lg-table th.pmc-lg-col-code{ width:90px; }
.pmc-app .pmc-lg-table th.pmc-lg-col-meta{ width:120px; }
.pmc-app .pmc-lg-table th.pmc-lg-col-host{ width:140px; }
.pmc-app .pmc-lg-table td{ word-break:break-word; vertical-align:top; }
.pmc-lg-pre{ white-space:pre-wrap; word-break:break-word; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlServer/runDetail (#3053, épique #4027)
   Détail d'un run de collecte : synthèse `pmc-stat`, matrice fichiers ×
   types de métrique, sections avec métriques et valeurs TEXT/JSON
   dépliables (arbre <details> généré par run_detail_render_json_tree).
   Tokens uniquement, préfixe `pmc-rd-` — vérifié sans collision.
   -------------------------------------------------------------------------- */

/* Titres de carte (serveur, Run Runtime, Collected Files, General / Slave /
   Digest) : de vrais <h2> pour la navigation par en-têtes, reposant sur la
   typographie de pmc-card-head plutôt que sur celle des titres de page. */
.pmc-app .pmc-card-head .pmc-rd-card-title{
  margin:0; font-size:inherit; font-weight:inherit; line-height:inherit; color:inherit;
}

/* Chips d'en-tête (date de run, id, endpoint…) sur le dégradé de carte. */
.pmc-app .pmc-card-head .pmc-rd-head-chips{
  display:flex; align-items:center; gap:var(--pmc-sp-1); flex-wrap:wrap; margin-left:auto;
}
.pmc-app .pmc-rd-chip{
  display:inline-block; padding:2px 10px; border-radius:var(--pmc-r-full);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  font-size:var(--pmc-fs-xs); font-weight:400; color:var(--pmc-grad-head-text);
}

/* Runtime (1/3) + Collected Files (2/3), empilés sur petits écrans. */
.pmc-app .pmc-rd-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--pmc-sp-4); }
@media (max-width:992px){ .pmc-app .pmc-rd-cols{ grid-template-columns:minmax(0,1fr); } }
.pmc-app .pmc-rd-back{ margin-top:var(--pmc-sp-3); }

/* Liste-chips des fichiers collectés, ancrées vers leur section. */
.pmc-app .pmc-rd-file-list{
  display:flex; flex-wrap:wrap; gap:var(--pmc-sp-2);
  list-style:none; margin:0 0 var(--pmc-sp-3) 0; padding:0;
}
.pmc-app .pmc-rd-file-link{
  display:inline-block; padding:4px 8px; border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm); background:var(--pmc-surface-alt);
  color:var(--pmc-text); word-break:break-word;
}
.pmc-app a.pmc-rd-file-link:hover{ background:var(--pmc-primary-soft); text-decoration:none; }
.pmc-app .pmc-rd-file-count{ color:var(--pmc-text-3); font-weight:700; }
.pmc-app .pmc-rd-matrix tfoot td{ background:var(--pmc-surface-alt); font-weight:700; }
.pmc-app .pmc-rd-matrix-total{ font-weight:700; }

/* Navigation bornée et indépendante pour General, Slave et Digest. */
.pmc-app .pmc-rd-pagination{
  display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap;
  margin:var(--pmc-sp-3); padding:var(--pmc-sp-2) var(--pmc-sp-3);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md);
  background:var(--pmc-surface-alt);
}
.pmc-app .pmc-rd-pagination-status{ color:var(--pmc-text-2); }

/* Sous-section (un fichier / groupe de métriques) dans la carte de section. */
.pmc-app .pmc-rd-subsection{
  margin:var(--pmc-sp-3); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md); overflow:hidden; background:var(--pmc-surface);
}
.pmc-app .pmc-rd-subsection-head{
  display:flex; justify-content:space-between; gap:var(--pmc-sp-3);
  padding:var(--pmc-sp-2) var(--pmc-sp-3);
  background:var(--pmc-surface-alt); border-bottom:1px solid var(--pmc-border);
}
/* Nom de sous-section (fichier / groupe) : <h3> aligné sur son compteur. */
.pmc-app .pmc-rd-subsection-name{ margin:0; font-size:inherit; font-weight:700; line-height:inherit; }
.pmc-app .pmc-rd-subsection-count{ color:var(--pmc-text-3); white-space:nowrap; }

/* Table des métriques : libellés en gras, valeur en mono défilable. */
.pmc-app .pmc-rd-table{ table-layout:fixed; }
.pmc-app .pmc-rd-table th.pmc-rd-col-id{ width:7%; }
.pmc-app .pmc-rd-table th.pmc-rd-col-metric{ width:21%; }
.pmc-app .pmc-rd-table th.pmc-rd-col-type{ width:10%; }
.pmc-app .pmc-rd-table th.pmc-rd-col-source{ width:17%; }
.pmc-app .pmc-rd-table th.pmc-rd-col-radical{ width:15%; }
.pmc-app .pmc-rd-table th.pmc-rd-col-value{ width:30%; }
.pmc-app .pmc-rd-table td{ word-break:break-word; vertical-align:top; }
.pmc-app .pmc-rd-id{ color:var(--pmc-text-3); font-weight:700; }
.pmc-app .pmc-rd-metric-name{ font-weight:700; margin-bottom:4px; }
.pmc-app .pmc-rd-value-wrap{ max-width:100%; overflow:auto; }

/* Digest (requête normalisée) sous la valeur brute. */
.pmc-app .pmc-rd-digest{
  margin-top:var(--pmc-sp-1); padding:var(--pmc-sp-2);
  background:var(--pmc-surface-alt); border-left:3px solid var(--pmc-neutral);
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); white-space:pre-wrap;
}

/* Valeur JSON : arbre dépliable <details> à coloration par tokens. */
.pmc-app .pmc-rd-json{
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); line-height:1.45;
  background:var(--pmc-surface-alt); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm); padding:var(--pmc-sp-2);
}
.pmc-app .pmc-rd-json-invalid{
  white-space:pre-wrap; background:var(--pmc-warn-soft);
  border:1px solid var(--pmc-warn-border); border-radius:var(--pmc-r-sm);
  padding:var(--pmc-sp-2);
}
.pmc-app .pmc-rd-json-node{ margin:2px 0; }
.pmc-app .pmc-rd-json-node > summary{
  cursor:pointer; list-style:none; outline:none;
  color:var(--pmc-text-2); font-weight:700;
}
.pmc-app .pmc-rd-json-node > summary::-webkit-details-marker{ display:none; }
.pmc-app .pmc-rd-json-node > summary::before{
  content:"+"; display:inline-block; width:14px; color:var(--pmc-ok);
}
.pmc-app .pmc-rd-json-node[open] > summary::before{ content:"-"; }
.pmc-app .pmc-rd-json-list{
  list-style:none; margin:6px 0 0 18px; padding:0;
  border-left:1px dashed var(--pmc-border-strong);
}
.pmc-app .pmc-rd-json-item{ margin:4px 0; padding-left:10px; }
.pmc-app .pmc-rd-json-key{ color:var(--pmc-warn); }
.pmc-app .pmc-rd-json-sep,
.pmc-app .pmc-rd-json-bracket,
.pmc-app .pmc-rd-json-empty{ color:var(--pmc-text-3); }
.pmc-app .pmc-rd-json-string{ color:var(--pmc-ok); }
.pmc-app .pmc-rd-json-number{ color:var(--pmc-primary); }
.pmc-app .pmc-rd-json-bool{ color:var(--pmc-info); }
.pmc-app .pmc-rd-json-null{ color:var(--pmc-text-3); font-style:italic; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — ProxySQL/config (#3053)
   Editeur de configuration ProxySQL : onglets de tables, pipeline de
   propagation DISK <-> MEMORY <-> RUNTIME (4 formulaires POST CSRF), puis
   paires de tables <table> avec editeur PMC natif / runtime_*.
   Prefixe `pmc-cfg-` — verifie sans collision dans ce fichier.
   Tokens uniquement.
   -------------------------------------------------------------------------- */

/* Pipeline : 3 etages (Disk / Memory / Runtime) et, entre chaque paire,
   une colonne de deux boutons SAVE/LOAD. Les fleches sont posees en
   pseudo-elements pour garder le libelle du bouton intact. */
.pmc-cfg-flow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;
  gap:var(--pmc-sp-3); align-items:center;
}
.pmc-cfg-stage{
  padding:var(--pmc-sp-3) var(--pmc-sp-4); text-align:center;
  background:var(--pmc-surface-alt); border:1px solid var(--pmc-border-strong);
  border-radius:var(--pmc-r-md); font-weight:700; font-size:var(--pmc-fs-sm);
  text-transform:uppercase; letter-spacing:.06em; color:var(--pmc-text-2);
}
.pmc-cfg-links{
  display:flex; flex-direction:column; gap:var(--pmc-sp-2);
  align-items:center; min-width:0;
}
.pmc-cfg-links form{ margin:0; display:flex; justify-content:center; max-width:100%; }
/* Les libelles (SAVE MYSQL SERVERS TO DISK…) sont longs : on autorise le
   retour a la ligne dans le bouton au lieu de deborder de la colonne. */
.pmc-cfg-links .pmc-btn{
  white-space:normal; height:auto; min-height:var(--pmc-h-ctl-sm);
  padding-top:var(--pmc-sp-1); padding-bottom:var(--pmc-sp-1); text-align:center;
}
.pmc-cfg-to-left::before{ content:"\2190"; margin-right:var(--pmc-sp-1); }
.pmc-cfg-to-right::after{ content:"\2192"; margin-left:var(--pmc-sp-1); }
@media (max-width:1024px){
  .pmc-cfg-flow{ grid-template-columns:minmax(0,1fr); }
}

/* Cellules de cle primaire (lecture seule, non editables) : en retrait
   visuel de l'ancien `style="color:#777777"`. */
.pmc-app .pmc-tbl td.pmc-cfg-pk{ color:var(--pmc-text-3); }

/* Colonne Delete : bouton compact, formulaire POST inline dans la cellule
   (ancien `style="padding:2px"` + form inline). */
.pmc-app .pmc-tbl td.pmc-cfg-del{ padding:var(--pmc-sp-1); white-space:nowrap; }
.pmc-cfg-del form{ display:inline; margin:0; }

/* Lien croise vers la config du ProxySQL pair (#893) — remplace le
   glyphicon + style inline de l'ancien rendu. */
.pmc-app a.pmc-cfg-peer{ display:inline-block; margin-left:var(--pmc-sp-1); text-decoration:none; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Tag/index (#3053)
   Table de tags editable. Les couleurs sont des donnees configurees par
   l'utilisateur : typed attr() les applique sans style inline, avec repli
   sur les tokens du theme. L'editeur natif remplace x-editable sans classes
   Bootstrap ni mutation de style.
   -------------------------------------------------------------------------- */
.pmc-tag-index .pmc-tag-editable{
  cursor:pointer;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-color:var(--pmc-border-strong);
  text-underline-offset:var(--pmc-sp-1);
}
.pmc-tag-index .pmc-tag-editable[data-pmc-editing="true"]{
  text-decoration:none;
}
.pmc-tag-index .pmc-tag-preview{
  color:attr(data-pmc-tag-color type(<color>), var(--pmc-text));
  background:attr(data-pmc-tag-background type(<color>), var(--pmc-surface-alt));
  border-color:color-mix(in srgb, currentColor 25%, transparent);
}
.pmc-tag-index .pmc-tag-editor{
  display:flex; align-items:flex-start; gap:var(--pmc-sp-1); flex-wrap:wrap;
  min-width:calc(var(--pmc-h-ctl) * 5);
}
.pmc-tag-index .pmc-tag-editor-input{
  flex:1 1 calc(var(--pmc-h-ctl) * 3);
  min-width:calc(var(--pmc-h-ctl) * 3);
}
.pmc-tag-index .pmc-tag-editor-actions{
  display:flex; gap:var(--pmc-sp-1);
}
.pmc-tag-index .pmc-tag-edit-error{
  flex:1 1 100%; color:var(--pmc-crit); font-size:var(--pmc-fs-xs);
}
.pmc-tag-index .pmc-tag-action-cell{ white-space:nowrap; }
.pmc-tag-index .pmc-tag-delete-button{ height:var(--pmc-h-ctl-sm); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Telegram/add (#3053)
   Formulaire court borne sur desktop, puis pleine largeur sur mobile.
   -------------------------------------------------------------------------- */
.pmc-telegram-add .pmc-telegram-add-card{
  width:100%; max-width:calc(var(--pmc-h-ctl) * 24); justify-self:start;
}
.pmc-telegram-add .pmc-telegram-add-form{ margin:0; }
.pmc-telegram-add .pmc-telegram-add-errors{
  margin:0; padding-left:var(--pmc-sp-5);
}
.pmc-telegram-add .pmc-telegram-add-actions{ margin-top:var(--pmc-sp-1); }
@media (max-width:768px){
  .pmc-telegram-add .pmc-telegram-add-card{ max-width:100%; }
  .pmc-telegram-add .pmc-telegram-add-actions{
    flex-direction:column; align-items:stretch;
  }
  .pmc-telegram-add .pmc-telegram-add-actions .pmc-btn{
    width:100%; height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Telegram/index (#3053)
   La table conserve ses six colonnes et defile dans sa carte sur mobile.
   -------------------------------------------------------------------------- */
.pmc-telegram-index .pmc-telegram-index-table{
  min-width:calc(var(--pmc-h-ctl) * 28);
}
.pmc-telegram-index .pmc-telegram-index-secret code,
.pmc-telegram-index .pmc-telegram-index-date{
  white-space:nowrap;
}
.pmc-telegram-index .pmc-telegram-index-actions{
  display:flex; align-items:center; gap:var(--pmc-sp-1); white-space:nowrap;
}
.pmc-telegram-index .pmc-telegram-index-delete{
  display:inline-flex; margin:0;
}
@media (max-width:768px){
  .pmc-telegram-index .pmc-page-head .pmc-actions .pmc-btn{
    width:100%; height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-telegram-index .pmc-telegram-index-actions .pmc-btn{
    height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Telegram/view (#3053)
   Fiche Light unique : carte bornee sur desktop, puis pleine largeur et
   actions empilees sur mobile. Les valeurs et actions restent inchangees.
   -------------------------------------------------------------------------- */
.pmc-telegram-view .pmc-telegram-view-card{
  width:100%; max-width:calc(var(--pmc-h-ctl) * 30); justify-self:start;
}
.pmc-telegram-view .pmc-telegram-view-table{
  table-layout:fixed;
}
.pmc-telegram-view .pmc-telegram-view-table th:first-child,
.pmc-telegram-view .pmc-telegram-view-table td:first-child{
  width:calc(var(--pmc-h-ctl) * 6);
}
.pmc-telegram-view .pmc-telegram-view-table td:first-child{
  color:var(--pmc-text-2); font-weight:600;
}
.pmc-telegram-view .pmc-telegram-view-secret code{
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}
.pmc-telegram-view .pmc-telegram-view-date{
  white-space:nowrap;
}
.pmc-telegram-view .pmc-telegram-view-actions{
  align-items:center;
}
.pmc-telegram-view .pmc-telegram-view-delete{
  display:inline-flex; margin:0;
}
@media (max-width:768px){
  .pmc-telegram-view .pmc-telegram-view-card{ max-width:100%; }
  .pmc-telegram-view .pmc-telegram-view-table th:first-child,
  .pmc-telegram-view .pmc-telegram-view-table td:first-child{
    width:calc(var(--pmc-h-ctl) * 5);
  }
  .pmc-telegram-view .pmc-telegram-view-actions{
    flex-direction:column; align-items:stretch;
  }
  .pmc-telegram-view .pmc-telegram-view-actions .pmc-btn,
  .pmc-telegram-view .pmc-telegram-view-delete{
    width:100%;
  }
  .pmc-telegram-view .pmc-telegram-view-actions .pmc-btn{
    height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Tools/_compare_result (#3053)
   Fragment Light partage par le rendu PHP initial et le renderer AJAX.
   Le conteneur parent porte `pmc-app`; les grilles generiques assurent le
   passage 4 → 2 KPI et 2 → 1 cartes de differences sur mobile.
   -------------------------------------------------------------------------- */
.pmc-app.pmc-tools-compare-result{
  display:grid; gap:var(--pmc-sp-4);
  background:var(--pmc-surface);
}
.pmc-tools-compare-result .pmc-tools-compare-status{
  display:flex; align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap;
}
.pmc-tools-compare-result .pmc-tools-compare-status-label{
  color:var(--pmc-text-2); font-size:var(--pmc-fs-sm); font-weight:600;
}
.pmc-tools-compare-result .pmc-tools-compare-diff{
  min-width:0;
}
.pmc-tools-compare-result .pmc-tools-compare-diff-title{
  margin:0; font-size:var(--pmc-fs-sm);
}
.pmc-tools-compare-result .pmc-tools-compare-list{
  display:grid; gap:var(--pmc-sp-1);
  max-height:calc(var(--pmc-h-row) * 6); overflow:auto;
  margin:0; padding-left:var(--pmc-sp-5);
}
.pmc-tools-compare-result .pmc-tools-compare-list code{
  overflow-wrap:anywhere; word-break:break-word;
}
.pmc-tools-compare-result .pmc-tools-compare-empty{
  padding:var(--pmc-sp-4); background:var(--pmc-surface-alt);
}
.pmc-tools-compare-result .pmc-tools-compare-loading{
  margin:0;
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Tools/index (#3053)
   Page Light des outils SuperAdmin : trois cartes, alertes de retour et
   actions preservees. Le titre Glial est reproduit dans le bandeau PMC avec
   son fil d'Ariane, puis masque uniquement pour cet ecran.
   -------------------------------------------------------------------------- */
#page:has(.pmc-tools-index) > #glial-title{
  display:none;
}
.pmc-tools-index > .pmc-wrap > .pmc-alert{
  margin-bottom:0;
}
.pmc-tools-index .pmc-tools-index-card-title{
  margin:0; font-size:var(--pmc-fs-base);
}
.pmc-tools-index .pmc-tools-index-card-desc{
  margin:0 0 var(--pmc-sp-4); color:var(--pmc-text-2);
}
.pmc-tools-index .pmc-tools-index-card-desc:last-child{
  margin-bottom:0;
}
.pmc-tools-index .pmc-tools-index-status{
  display:flex; align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap;
  margin-bottom:var(--pmc-sp-3);
}
.pmc-tools-index .pmc-tools-index-meta{
  min-width:0; color:var(--pmc-text-3); font-size:var(--pmc-fs-sm);
  overflow-wrap:anywhere;
}
.pmc-tools-index .pmc-tools-index-table-list{
  display:flex; flex-wrap:wrap; gap:var(--pmc-sp-2);
  margin:0 0 var(--pmc-sp-3);
}
.pmc-tools-index .pmc-tools-index-table-list:last-child{
  margin-bottom:0;
}
.pmc-tools-index .pmc-tools-index-card-body > .pmc-alert:last-child{
  margin-bottom:0;
}
.pmc-tools-index .pmc-tools-index-actions{
  display:flex; align-items:center; gap:var(--pmc-sp-2);
}
.pmc-tools-index .pmc-tools-index-form{
  display:inline-flex; margin:0;
}
@media (max-width:768px){
  .pmc-tools-index .pmc-tools-index-actions,
  .pmc-tools-index .pmc-tools-index-form,
  .pmc-tools-index .pmc-tools-index-actions .pmc-btn{
    width:100%;
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Translation/admin_translation (#3053)
   Editeur Light unique : filtres compacts, table de traduction defilante et
   actions empilees sur mobile. Les routes et controles existants sont gardes.
   -------------------------------------------------------------------------- */
#page:has(.pmc-translation-admin) > #glial-title{
  display:none;
}
.pmc-translation-admin .pmc-translation-admin-card-title{
  margin:0; font-size:var(--pmc-fs-base);
}
.pmc-translation-admin .pmc-translation-admin-validation-list{
  display:flex; align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap;
}
.pmc-translation-admin .pmc-translation-admin-filters > .pmc-card-body{
  display:grid; gap:var(--pmc-sp-4);
}
.pmc-translation-admin .pmc-translation-admin-types{
  margin-bottom:0;
}
.pmc-translation-admin .pmc-translation-admin-alpha,
.pmc-translation-admin .pmc-translation-admin-pager{
  margin-left:0; flex-wrap:wrap; align-items:center;
}
.pmc-translation-admin .pmc-translation-admin-alpha-link{
  flex:0 0 var(--pmc-h-ctl);
}
.pmc-translation-admin .pmc-translation-admin-pagination{
  padding-top:var(--pmc-sp-3); border-top:1px solid var(--pmc-border);
}
.pmc-translation-admin .pmc-translation-admin-page-jump{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-1);
  color:var(--pmc-text-2);
}
.pmc-translation-admin .pmc-translation-admin-page-input{
  width:calc(var(--pmc-h-ctl) * 2); height:var(--pmc-h-ctl-sm);
  padding:0 var(--pmc-sp-2);
}
.pmc-translation-admin .pmc-translation-admin-form{
  min-width:0; margin:0;
}
.pmc-translation-admin .pmc-translation-admin-table{
  min-width:calc(var(--pmc-h-ctl) * 30); table-layout:fixed;
}
.pmc-translation-admin .pmc-translation-admin-index{
  width:calc(var(--pmc-h-ctl) * 2);
}
.pmc-translation-admin .pmc-translation-admin-source{
  width:calc(var(--pmc-h-ctl) * 2);
}
.pmc-translation-admin .pmc-translation-admin-language{
  display:flex; align-items:center; gap:var(--pmc-sp-2);
}
.pmc-translation-admin .pmc-translation-admin-language-select{
  min-width:calc(var(--pmc-h-ctl) * 5);
}
.pmc-translation-admin .pmc-translation-admin-flag{
  flex:none;
}
.pmc-translation-admin .pmc-translation-admin-flag-code{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:calc(var(--pmc-sp-2) * 3); padding:0 var(--pmc-sp-1);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
  background:var(--pmc-surface-alt); color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs); font-weight:600; line-height:1.4;
  vertical-align:middle;
}
.pmc-translation-admin .pmc-translation-admin-source-cell{
  text-align:center;
}
.pmc-translation-admin .pmc-translation-admin-text-cell{
  height:auto; padding:var(--pmc-sp-2); vertical-align:top;
}
.pmc-translation-admin .pmc-translation-admin-textarea{
  field-sizing:content; min-height:calc(var(--pmc-h-row) * 2);
  resize:vertical; overflow:auto;
}
.pmc-translation-admin .pmc-translation-admin-textarea[readonly]{
  background:var(--pmc-surface-alt); color:var(--pmc-text-2);
}
.pmc-translation-admin .pmc-translation-admin-actions{
  align-items:center;
}
.pmc-translation-admin .pmc-translation-admin-info{
  margin:0;
}
.pmc-translation-admin .pmc-translation-admin-info strong{
  display:block; margin-bottom:var(--pmc-sp-2);
}
.pmc-translation-admin .pmc-translation-admin-info ul{
  margin:0; padding-left:var(--pmc-sp-5);
}
@media (max-width:768px){
  .pmc-translation-admin .pmc-translation-admin-types{
    display:grid; grid-template-columns:minmax(0,1fr);
  }
  .pmc-translation-admin .pmc-translation-admin-types a{
    margin:0; border:1px solid var(--pmc-border);
    border-radius:var(--pmc-r-sm); min-height:var(--pmc-h-ctl-lg);
    display:flex; align-items:center;
  }
  .pmc-translation-admin .pmc-translation-admin-types a.pmc-active{
    border-color:var(--pmc-primary);
  }
  .pmc-translation-admin .pmc-translation-admin-actions{
    flex-direction:column; align-items:stretch;
  }
  .pmc-translation-admin .pmc-translation-admin-actions .pmc-btn{
    width:100%; min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Tree/add (#3053)
   Formulaire Light unique : hierarchie de page, champs de route et action
   principale en pleine largeur sur mobile. Le contrat POST reste inchange.
   -------------------------------------------------------------------------- */
#page:has(.pmc-tree-add) > #glial-title{
  display:none;
}
.pmc-tree-add .pmc-tree-add-form{
  min-width:0; margin:0;
}
.pmc-tree-add .pmc-tree-add-card-title{
  margin:0; color:inherit; font-size:var(--pmc-fs-base);
}
.pmc-tree-add .pmc-tree-add-card-body{
  display:grid; gap:var(--pmc-sp-4);
}
.pmc-tree-add .pmc-tree-add-grid{
  display:grid; gap:var(--pmc-sp-4);
}
.pmc-tree-add .pmc-tree-add-primary-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.pmc-tree-add .pmc-tree-add-routing-grid{
  grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));
}
.pmc-tree-add .pmc-tree-add-field{
  min-width:0;
}
.pmc-tree-add .pmc-tree-add-field-label{
  display:block; margin-bottom:var(--pmc-sp-1);
  color:var(--pmc-text); font-size:var(--pmc-fs-sm); font-weight:600;
}
.pmc-tree-add .pmc-tree-add-actions{
  display:flex; justify-content:flex-end; align-items:center;
}
@media (max-width:768px){
  .pmc-tree-add .pmc-tree-add-primary-grid,
  .pmc-tree-add .pmc-tree-add-routing-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-tree-add .pmc-tree-add-actions{
    align-items:stretch;
  }
  .pmc-tree-add .pmc-tree-add-actions .pmc-btn{
    width:100%; min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Tree/index (#3053)
   Gestion Light du menu : selection compacte, table d'arbre dense et
   editeur inline habille en composants PMC. Les routes restent inchangees.
   -------------------------------------------------------------------------- */
#page:has(.pmc-tree-index) > #glial-title{
  display:none;
}
.pmc-tree-index .pmc-tree-index-selection-form,
.pmc-tree-index .pmc-tree-index-table-form{
  min-width:0; margin:0;
}
.pmc-tree-index .pmc-tree-index-card-title{
  margin:0; color:inherit; font-size:var(--pmc-fs-base);
}
.pmc-tree-index .pmc-tree-index-settings-body{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--pmc-sp-4); align-items:end;
}
.pmc-tree-index .pmc-tree-index-menu-field{
  min-width:0;
}
.pmc-tree-index .pmc-tree-index-menu-heading{
  display:flex; align-items:center; gap:var(--pmc-sp-2);
  margin-bottom:var(--pmc-sp-1);
}
.pmc-tree-index .pmc-tree-index-field-label{
  color:var(--pmc-text); font-size:var(--pmc-fs-sm); font-weight:600;
}
.pmc-tree-index .pmc-tree-index-menu-help{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--pmc-h-ctl-sm); height:var(--pmc-h-ctl-sm);
  color:var(--pmc-primary); background:var(--pmc-primary-soft);
  border:1px solid var(--pmc-primary); border-radius:var(--pmc-r-full);
  font-size:var(--pmc-fs-xs); font-weight:700; text-decoration:none;
}
.pmc-tree-index .pmc-tree-index-menu-help:hover{
  color:var(--pmc-on-primary); background:var(--pmc-primary);
  text-decoration:none;
}
.pmc-tree-index .pmc-tree-index-table-head{
  flex-wrap:wrap;
}
.pmc-tree-index .pmc-tree-index-table-head .pmc-right{
  margin-left:0;
}
.pmc-tree-index .pmc-tree-index-table-scroll{
  max-height:calc(var(--pmc-h-row-dense) * 22); overflow:auto;
}
.pmc-tree-index .pmc-tree-index-table{
  min-width:calc(var(--pmc-h-ctl) * 52);
}
.pmc-tree-index .pmc-tree-index-table td{
  white-space:nowrap;
}
.pmc-tree-index .pmc-tree-index-icon-preview{
  text-align:center;
}
.pmc-tree-index .pmc-tree-index-icon-source,
.pmc-tree-index .pmc-tree-index-title,
.pmc-tree-index .pmc-tree-index-url{
  max-width:calc(var(--pmc-h-ctl) * 12);
  overflow:hidden; text-overflow:ellipsis;
}
.pmc-tree-index .pmc-tree-index-editable{
  cursor:pointer;
}
.pmc-tree-index .pmc-tree-index-editable:hover{
  background:var(--pmc-primary-soft);
}
.pmc-tree-index .pmc-tree-index-row-actions{
  display:flex; align-items:center; gap:var(--pmc-sp-1);
}
.pmc-tree-index .pmc-tree-index-totals{
  font-family:var(--pmc-font-mono);
}
.pmc-tree-index .pmc-tree-index-editor{
  display:inline-block; width:100%; min-width:calc(var(--pmc-h-ctl) * 8);
}
.pmc-tree-index .pmc-tree-index-editor > div,
.pmc-tree-index .pmc-tree-index-editor-form{
  width:100%;
}
.pmc-tree-index .pmc-tree-index-editor-form{
  margin:0;
}
.pmc-tree-index .pmc-tree-index-editor-group > div{
  display:flex; align-items:center; gap:var(--pmc-sp-1);
}
.pmc-tree-index .pmc-tree-index-editor .editable-input{
  position:relative; flex:1; min-width:0;
}
.pmc-tree-index .pmc-tree-index-editor-input{
  min-width:calc(var(--pmc-h-ctl) * 6);
}
.pmc-tree-index .pmc-tree-index-editor .editable-buttons{
  display:flex; gap:var(--pmc-sp-1);
}
.pmc-tree-index .pmc-tree-index-editor .editableform-loading,
.pmc-tree-index .pmc-tree-index-editor .editable-error-block:empty,
.pmc-tree-index .pmc-tree-index-editor .editable-clear-x{
  display:none;
}
.pmc-tree-index .pmc-tree-index-editor .editable-error-block:not(:empty){
  display:block; margin-top:var(--pmc-sp-1);
  color:var(--pmc-crit); font-size:var(--pmc-fs-xs);
}
.pmc-tree-index .pmc-tree-index-table td:has(.pmc-tree-index-editor){
  padding:var(--pmc-sp-1);
}
@media (max-width:768px){
  .pmc-tree-index .pmc-tree-index-settings-body{
    grid-template-columns:minmax(0,1fr); align-items:stretch;
  }
  .pmc-tree-index .pmc-tree-index-settings-body > .pmc-btn{
    width:100%; min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-tree-index .pmc-tree-index-table-head .pmc-btn{
    flex-basis:100%; width:100%;
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-tree-index .pmc-tree-index-table-scroll{
    max-height:calc(var(--pmc-h-row-dense) * 16);
  }
  .pmc-tree-index .pmc-tree-index-row-actions .pmc-btn-icon{
    width:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Tunnel/index (#3232)
   Inventaire Light des tunnels SSH : etats, decisions de doublon, endpoints
   et commandes de copie dans une table large a defilement interne.
   -------------------------------------------------------------------------- */
#page:has(.pmc-tunnel-index) > #glial-title{
  display:none;
}
.pmc-tunnel-index .pmc-tunnel-index-stats{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.pmc-tunnel-index .pmc-tunnel-index-table-head{
  min-height:var(--pmc-h-ctl);
}
.pmc-tunnel-index .pmc-tunnel-index-table-head .pmc-badge-count{
  margin-left:auto;
}
.pmc-tunnel-index .pmc-tunnel-index-table-scroll{
  max-height:calc(var(--pmc-h-row-dense) * 18);
  overflow:auto;
}
.pmc-tunnel-index .pmc-tunnel-index-table{
  min-width:calc(var(--pmc-h-ctl) * 44);
}
.pmc-tunnel-index .pmc-tunnel-index-table td{
  height:auto; padding-top:var(--pmc-sp-2); padding-bottom:var(--pmc-sp-2);
  vertical-align:top;
}
.pmc-tunnel-index .pmc-tunnel-index-id,
.pmc-tunnel-index .pmc-tunnel-index-endpoint,
.pmc-tunnel-index .pmc-tunnel-index-duplicate,
.pmc-tunnel-index .pmc-tunnel-index-server,
.pmc-tunnel-index .pmc-tunnel-index-jumps{
  display:grid; gap:var(--pmc-sp-2); align-content:start;
}
.pmc-tunnel-index .pmc-tunnel-index-id .pmc-badge,
.pmc-tunnel-index .pmc-tunnel-index-endpoint .pmc-badge,
.pmc-tunnel-index .pmc-tunnel-index-duplicate .pmc-badge{
  justify-self:start;
}
.pmc-tunnel-index .pmc-tunnel-index-reason{
  color:var(--pmc-text-2); font-size:var(--pmc-fs-xs);
}
.pmc-tunnel-index .pmc-tunnel-index-duplicate-help{
  max-width:calc(var(--pmc-h-ctl) * 10);
  padding:var(--pmc-sp-2); border:1px solid;
  border-radius:var(--pmc-r-sm); font-size:var(--pmc-fs-xs);
  line-height:var(--pmc-lh);
}
.pmc-tunnel-index .pmc-tunnel-index-duplicate-help-keep{
  color:var(--pmc-ok); background:var(--pmc-ok-soft); border-color:var(--pmc-ok-border);
}
.pmc-tunnel-index .pmc-tunnel-index-duplicate-help-purge{
  color:var(--pmc-crit); background:var(--pmc-crit-soft); border-color:var(--pmc-crit-border);
}
.pmc-tunnel-index .pmc-tunnel-index-server{
  grid-template-columns:repeat(2,max-content);
  align-items:start;
}
.pmc-tunnel-index .pmc-tunnel-index-server .pmc-btn{
  justify-self:start;
}
.pmc-tunnel-index .pmc-tunnel-index-server-kind{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-1);
  color:var(--pmc-text-2); font-size:var(--pmc-fs-xs);
}
.pmc-tunnel-index .pmc-tunnel-index-server-icon{
  width:var(--pmc-sp-4); height:var(--pmc-sp-4); object-fit:contain;
}
.pmc-tunnel-index .pmc-tunnel-index-jump{
  color:var(--pmc-text-2); font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs); white-space:nowrap;
}
.pmc-tunnel-index .pmc-tunnel-index-date{
  color:var(--pmc-text-2); font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs); white-space:nowrap;
}
.pmc-tunnel-index .pmc-tunnel-index-empty-cell{
  padding:var(--pmc-sp-4);
}
.pmc-tunnel-index .pmc-tunnel-index-empty-cell .pmc-empty{
  border:0; background:transparent;
}
.pmc-tunnel-index .pmc-tunnel-index-table-foot{
  justify-content:flex-end;
}
.pmc-tunnel-index .pmc-tunnel-index-copy-actions{
  display:flex; justify-content:flex-end; align-items:flex-start;
  gap:var(--pmc-sp-3); flex-wrap:wrap; width:100%;
}
.pmc-tunnel-index .pmc-tunnel-index-copy-action{
  display:grid; gap:var(--pmc-sp-1); justify-items:end;
}
.pmc-tunnel-index .pmc-tunnel-index-copy-feedback{
  color:var(--pmc-ok); font-size:var(--pmc-fs-xs);
}
@media (max-width:1024px){
  .pmc-tunnel-index .pmc-tunnel-index-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:768px){
  .pmc-tunnel-index .pmc-tunnel-index-table-scroll{
    max-height:calc(var(--pmc-h-row-dense) * 16);
  }
  .pmc-tunnel-index .pmc-tunnel-index-copy-actions,
  .pmc-tunnel-index .pmc-tunnel-index-copy-action{
    display:grid; width:100%;
  }
  .pmc-tunnel-index .pmc-tunnel-index-copy-action{
    justify-items:stretch;
  }
  .pmc-tunnel-index .pmc-tunnel-index-copy-action .pmc-btn{
    width:100%; min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
    white-space:normal; line-height:var(--pmc-lh);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — User/connection (#3240)
   Carte de connexion Light centree, formulaire compact et actions tactiles.
   -------------------------------------------------------------------------- */
#page:has(.pmc-user-connection) > #glial-title{
  display:none;
}
/* Plein ecran : pas de padding de layout ni de marge blanche autour de la
   carte — le fond applicatif remplit tout le viewport sous la navbar fixe. */
#page:has(.pmc-user-connection) .pmc-layout-content{ padding:0; }
body:has(.pmc-user-connection){ padding-bottom:0; }
.pmc-user-connection .pmc-wrap{
  min-height:calc(100vh - var(--pmc-fixed-header-offset));
  place-items:center;
}
.pmc-user-connection .pmc-user-connection-shell{
  width:100%;
  max-width:calc(var(--pmc-h-row) * 16);
}
.pmc-user-connection .pmc-user-connection-card{
  overflow:hidden;
  box-shadow:var(--pmc-shadow-lg);
}
.pmc-user-connection .pmc-user-connection-card-head{
  justify-content:space-between;
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-user-connection .pmc-user-connection-brand{
  font-size:var(--pmc-fs-md);
  font-weight:700;
}
.pmc-user-connection .pmc-user-connection-context{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
}
.pmc-user-connection .pmc-user-connection-card-body{
  display:grid;
  gap:var(--pmc-sp-5);
  padding:var(--pmc-sp-6);
}
.pmc-user-connection .pmc-user-connection-intro{
  text-align:center;
}
.pmc-user-connection .pmc-user-connection-intro h1{
  margin:0;
  color:var(--pmc-text);
  font-size:var(--pmc-fs-xl);
}
.pmc-user-connection .pmc-user-connection-form{
  display:grid;
  gap:var(--pmc-sp-4);
}
.pmc-user-connection .pmc-user-connection-form .pmc-field{
  margin-bottom:0;
}
.pmc-user-connection .pmc-user-connection-label{
  margin-bottom:var(--pmc-sp-1);
  color:var(--pmc-text);
  font-size:var(--pmc-fs-sm);
  font-weight:600;
}
.pmc-user-connection .pmc-user-connection-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--pmc-sp-2);
  margin-top:var(--pmc-sp-1);
}
.pmc-user-connection .pmc-user-connection-actions .pmc-btn{
  width:100%;
  height:var(--pmc-h-ctl-lg);
}
.pmc-user-connection .pmc-user-connection-support{
  margin:0;
  text-align:center;
  font-size:var(--pmc-fs-sm);
}
.pmc-user-connection .pmc-user-connection-account-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--pmc-sp-2);
  text-align:center;
}
.pmc-user-connection .pmc-user-connection-link-separator{
  color:var(--pmc-text-3);
}
@media (max-width:768px){
  .pmc-user-connection .pmc-user-connection-card-body{
    padding:var(--pmc-sp-5);
  }
  .pmc-user-connection .pmc-user-connection-actions{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-user-connection .pmc-user-connection-actions .pmc-btn{
    height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
  }
  .pmc-user-connection .pmc-user-connection-account-links{
    display:grid;
  }
  .pmc-user-connection .pmc-user-connection-link-separator{
    display:none;
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — User/index (#3244)
   Inventaire Light des membres et affectation de groupe dans une table large
   a defilement interne.
   -------------------------------------------------------------------------- */
#page:has(.pmc-user-index) > #glial-title{
  display:none;
}
.pmc-user-index .pmc-user-index-form{
  min-width:0;
}
.pmc-user-index .pmc-user-index-table-scroll{
  max-height:calc(var(--pmc-h-row) * 18);
  overflow:auto;
}
.pmc-user-index .pmc-user-index-table{
  min-width:calc(var(--pmc-h-row) * 30);
}
.pmc-user-index .pmc-user-index-table td{
  height:auto;
  min-height:var(--pmc-h-row);
  padding-top:var(--pmc-sp-2);
  padding-bottom:var(--pmc-sp-2);
}
.pmc-user-index .pmc-user-index-location{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  white-space:nowrap;
}
.pmc-user-index .pmc-user-index-flag{
  width:var(--pmc-sp-5);
  height:var(--pmc-sp-3);
  flex:none;
  object-fit:cover;
}
.pmc-user-index .pmc-user-index-person{
  font-weight:600;
}
.pmc-user-index .pmc-user-index-email{
  color:var(--pmc-text-2);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
  white-space:nowrap;
}
.pmc-user-index .pmc-user-index-group-cell{
  min-width:calc(var(--pmc-h-row) * 8);
}
.pmc-user-index .pmc-user-index-group{
  min-width:calc(var(--pmc-h-row) * 7);
}
.pmc-user-index .pmc-user-index-actions{
  min-width:calc(var(--pmc-h-row) * 3);
  text-align:right;
  white-space:nowrap;
}
.pmc-user-index .pmc-user-index-empty-cell{
  padding:var(--pmc-sp-4);
}
.pmc-user-index .pmc-user-index-empty-cell .pmc-empty{
  border:0;
  background:transparent;
}
.pmc-user-index .pmc-user-index-table-foot{
  justify-content:space-between;
}
.pmc-user-index .pmc-user-index-table-foot .pmc-btn{
  margin-left:auto;
}
@media (max-width:768px){
  .pmc-user-index .pmc-user-index-table-scroll{
    max-height:calc(var(--pmc-h-row) * 16);
  }
  .pmc-user-index .pmc-user-index-table-foot{
    display:grid;
    justify-content:stretch;
  }
  .pmc-user-index .pmc-user-index-table-foot .pmc-btn{
    width:100%;
    height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
    margin-left:0;
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — User/lost_password (#3250)
   Carte Light centree pour la demande de recuperation de mot de passe.
   -------------------------------------------------------------------------- */
#page:has(.pmc-user-lost-password) > #glial-title{
  display:none;
}
.pmc-user-lost-password .pmc-wrap{
  min-height:calc(var(--pmc-h-row) * 15);
  place-items:center;
}
.pmc-user-lost-password .pmc-user-lost-password-shell{
  width:100%;
  max-width:calc(var(--pmc-h-row) * 12);
}
.pmc-user-lost-password .pmc-user-lost-password-card{
  overflow:hidden;
  box-shadow:var(--pmc-shadow-lg);
}
.pmc-user-lost-password .pmc-user-lost-password-card-head{
  justify-content:space-between;
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-user-lost-password .pmc-user-lost-password-brand{
  font-size:var(--pmc-fs-md);
  font-weight:700;
}
.pmc-user-lost-password .pmc-user-lost-password-context{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
}
.pmc-user-lost-password .pmc-user-lost-password-card-body{
  display:grid;
  gap:var(--pmc-sp-5);
  padding:var(--pmc-sp-6);
}
.pmc-user-lost-password .pmc-user-lost-password-intro{
  text-align:center;
}
.pmc-user-lost-password .pmc-user-lost-password-intro h1{
  margin:0;
  color:var(--pmc-text);
  font-size:var(--pmc-fs-xl);
}
.pmc-user-lost-password .pmc-user-lost-password-form{
  display:grid;
  gap:var(--pmc-sp-4);
}
.pmc-user-lost-password .pmc-user-lost-password-form .pmc-field{
  margin-bottom:0;
}
.pmc-user-lost-password .pmc-user-lost-password-label{
  margin-bottom:var(--pmc-sp-1);
  color:var(--pmc-text);
  font-size:var(--pmc-fs-sm);
  font-weight:600;
}
.pmc-user-lost-password .pmc-user-lost-password-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--pmc-sp-2);
  margin-top:var(--pmc-sp-1);
}
.pmc-user-lost-password .pmc-user-lost-password-actions .pmc-btn{
  width:100%;
  height:var(--pmc-h-ctl-lg);
}
@media (max-width:768px){
  .pmc-user-lost-password .pmc-wrap{
    min-height:calc(var(--pmc-h-row) * 13);
  }
  .pmc-user-lost-password .pmc-user-lost-password-card-body{
    padding:var(--pmc-sp-5);
  }
  .pmc-user-lost-password .pmc-user-lost-password-actions{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-user-lost-password .pmc-user-lost-password-actions .pmc-btn{
    height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — User/mailbox (#3257)
   Navigation, composition, detail et listes de la messagerie Light.
   -------------------------------------------------------------------------- */
#page:has(.pmc-user-mailbox) > #glial-title{
  display:none;
}
.pmc-user-mailbox .pmc-user-mailbox-nav{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-3);
}
.pmc-user-mailbox .pmc-user-mailbox-nav .pmc-btn{
  width:100%;
  min-width:0;
  height:var(--pmc-h-ctl-lg);
}
.pmc-user-mailbox .pmc-user-mailbox-nav .pmc-btn span{
  overflow:hidden;
  text-overflow:ellipsis;
}
.pmc-user-mailbox .pmc-user-mailbox-nav-icon,
.pmc-user-mailbox .pmc-user-mailbox-action-icon{
  width:var(--pmc-sp-4);
  height:var(--pmc-sp-4);
  flex:none;
  object-fit:contain;
}
.pmc-user-mailbox .pmc-user-mailbox-compose-card{
  width:100%;
  max-width:calc(var(--pmc-h-row) * 20);
  justify-self:center;
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-user-mailbox .pmc-user-mailbox-compose-body{
  padding:var(--pmc-sp-5);
}
.pmc-user-mailbox .pmc-user-mailbox-form{
  display:grid;
  gap:var(--pmc-sp-4);
}
.pmc-user-mailbox .pmc-user-mailbox-form .pmc-field{
  margin-bottom:0;
}
.pmc-user-mailbox .pmc-user-mailbox-label{
  display:grid;
  gap:var(--pmc-sp-1);
  margin:0;
  color:var(--pmc-text);
  font-size:var(--pmc-fs-sm);
}
.pmc-user-mailbox .pmc-user-mailbox-required{
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
}
.pmc-user-mailbox .pmc-user-mailbox-form .pmc-textarea{
  min-height:calc(var(--pmc-h-row) * 5);
}
.pmc-user-mailbox .pmc-user-mailbox-form .pmc-textarea.pmc-is-error{
  border-color:var(--pmc-crit);
}
.pmc-user-mailbox .pmc-user-mailbox-compose-actions{
  display:flex;
  justify-content:flex-end;
}
.pmc-user-mailbox .pmc-user-mailbox-compose-actions .pmc-btn{
  min-width:calc(var(--pmc-h-row) * 4);
  height:var(--pmc-h-ctl-lg);
}
.pmc-user-mailbox .pmc-user-mailbox-message-card{
  width:100%;
  max-width:calc(var(--pmc-h-row) * 24);
  justify-self:center;
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-user-mailbox .pmc-user-mailbox-message-details{
  margin:0;
}
.pmc-user-mailbox .pmc-user-mailbox-message-details > div{
  display:grid;
  grid-template-columns:calc(var(--pmc-h-row) * 4) minmax(0,1fr);
  gap:var(--pmc-sp-3);
  padding:var(--pmc-sp-2) var(--pmc-sp-4);
  border-bottom:1px solid var(--pmc-border);
}
.pmc-user-mailbox .pmc-user-mailbox-message-details dt{
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-sm);
  font-weight:600;
}
.pmc-user-mailbox .pmc-user-mailbox-message-details dd{
  min-width:0;
  margin:0;
  overflow-wrap:anywhere;
}
.pmc-user-mailbox .pmc-user-mailbox-person{
  display:inline-flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  min-width:0;
  white-space:nowrap;
}
.pmc-user-mailbox .pmc-user-mailbox-flag{
  width:var(--pmc-sp-5);
  height:var(--pmc-sp-3);
  flex:none;
  object-fit:cover;
}
.pmc-user-mailbox .pmc-user-mailbox-message-body{
  min-height:calc(var(--pmc-h-row) * 4);
  overflow-wrap:anywhere;
  line-height:var(--pmc-lh);
}
.pmc-user-mailbox .pmc-user-mailbox-message-actions{
  display:flex;
  justify-content:flex-end;
}
.pmc-user-mailbox .pmc-user-mailbox-message-actions .pmc-btn{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-user-mailbox .pmc-user-mailbox-table-scroll{
  max-height:calc(var(--pmc-h-row) * 17);
  overflow:auto;
}
.pmc-user-mailbox .pmc-user-mailbox-table{
  min-width:calc(var(--pmc-h-row) * 32);
}
.pmc-user-mailbox .pmc-user-mailbox-select-cell,
.pmc-user-mailbox .pmc-user-mailbox-status-cell{
  width:var(--pmc-h-row);
  text-align:center;
}
.pmc-user-mailbox .pmc-user-mailbox-select-cell input{
  margin:0;
}
.pmc-user-mailbox .pmc-user-mailbox-subject{
  min-width:calc(var(--pmc-h-row) * 8);
}
.pmc-user-mailbox .pmc-user-mailbox-date{
  color:var(--pmc-text-2);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
  white-space:nowrap;
}
.pmc-user-mailbox .pmc-user-mailbox-status-icon{
  width:var(--pmc-sp-4);
  height:var(--pmc-sp-4);
  object-fit:contain;
}
.pmc-user-mailbox .pmc-user-mailbox-empty-cell{
  padding:var(--pmc-sp-4);
}
.pmc-user-mailbox .pmc-user-mailbox-empty-cell .pmc-empty{
  border:0;
  background:transparent;
}
@media (max-width:1024px){
  .pmc-user-mailbox .pmc-user-mailbox-nav{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:768px){
  .pmc-user-mailbox .pmc-user-mailbox-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pmc-user-mailbox .pmc-user-mailbox-nav .pmc-btn{
    min-height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
    height:auto;
    white-space:normal;
    line-height:var(--pmc-lh);
  }
  .pmc-user-mailbox .pmc-user-mailbox-nav .pmc-btn:last-child{
    grid-column:1/-1;
  }
  .pmc-user-mailbox .pmc-user-mailbox-compose-body{
    padding:var(--pmc-sp-4);
  }
  .pmc-user-mailbox .pmc-user-mailbox-compose-actions .pmc-btn,
  .pmc-user-mailbox .pmc-user-mailbox-message-actions .pmc-btn{
    width:100%;
    min-height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
  }
  .pmc-user-mailbox .pmc-user-mailbox-message-details > div{
    grid-template-columns:minmax(0,1fr);
    gap:var(--pmc-sp-1);
  }
  .pmc-user-mailbox .pmc-user-mailbox-table-scroll{
    max-height:calc(var(--pmc-h-row) * 14);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — User/password_recover (#3268)
   Carte Light centree pour la definition du nouveau mot de passe.
   -------------------------------------------------------------------------- */
#page:has(.pmc-user-password-recover) > #glial-title{
  display:none;
}
.pmc-user-password-recover .pmc-wrap{
  min-height:calc(var(--pmc-h-row) * 15);
  place-items:center;
}
.pmc-user-password-recover .pmc-user-password-recover-shell{
  width:100%;
  max-width:calc(var(--pmc-h-row) * 13);
}
.pmc-user-password-recover .pmc-user-password-recover-card{
  overflow:hidden;
  box-shadow:var(--pmc-shadow-lg);
}
.pmc-user-password-recover .pmc-user-password-recover-card-head{
  justify-content:space-between;
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-user-password-recover .pmc-user-password-recover-brand{
  font-size:var(--pmc-fs-md);
  font-weight:700;
}
.pmc-user-password-recover .pmc-user-password-recover-context{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
}
.pmc-user-password-recover .pmc-user-password-recover-card-body{
  display:grid;
  gap:var(--pmc-sp-5);
  padding:var(--pmc-sp-6);
}
.pmc-user-password-recover .pmc-user-password-recover-intro{
  text-align:center;
}
.pmc-user-password-recover .pmc-user-password-recover-intro h1{
  margin:0;
  color:var(--pmc-text);
  font-size:var(--pmc-fs-xl);
}
.pmc-user-password-recover .pmc-user-password-recover-form{
  display:grid;
  gap:var(--pmc-sp-4);
}
.pmc-user-password-recover .pmc-user-password-recover-form .pmc-field{
  margin-bottom:0;
}
.pmc-user-password-recover .pmc-user-password-recover-label{
  margin-bottom:var(--pmc-sp-1);
  color:var(--pmc-text);
  font-size:var(--pmc-fs-sm);
  font-weight:600;
}
.pmc-user-password-recover .pmc-user-password-recover-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--pmc-sp-2);
  margin-top:var(--pmc-sp-1);
}
.pmc-user-password-recover .pmc-user-password-recover-actions .pmc-btn{
  width:100%;
  height:var(--pmc-h-ctl-lg);
}
@media (max-width:768px){
  .pmc-user-password-recover .pmc-wrap{
    min-height:calc(var(--pmc-h-row) * 13);
  }
  .pmc-user-password-recover .pmc-user-password-recover-card-body{
    padding:var(--pmc-sp-5);
  }
  .pmc-user-password-recover .pmc-user-password-recover-actions{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-user-password-recover .pmc-user-password-recover-actions .pmc-btn{
    height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — User/profil (#3273)
   Profil, activite et shoutbox dans le design Light.
   -------------------------------------------------------------------------- */
#page:has(.pmc-user-profil) > #glial-title{
  display:none;
}
.pmc-user-profil .pmc-user-profil-layout{
  display:grid;
  grid-template-columns:calc(var(--pmc-h-row) * 9) minmax(0,1fr);
  gap:var(--pmc-sp-4);
  align-items:start;
}
.pmc-user-profil .pmc-user-profil-aside,
.pmc-user-profil .pmc-user-profil-main{
  display:grid;
  gap:var(--pmc-sp-4);
  min-width:0;
  align-content:start;
}
.pmc-user-profil .pmc-user-profil-photo-card,
.pmc-user-profil .pmc-user-profil-shoutbox-card,
.pmc-user-profil .pmc-user-profil-tools-card,
.pmc-user-profil .pmc-user-profil-personal-card,
.pmc-user-profil .pmc-user-profil-actions-card{
  overflow:hidden;
}
.pmc-user-profil .pmc-user-profil-head-link,
.pmc-user-profil .pmc-user-profil-head-link:hover{
  color:var(--pmc-grad-head-text);
}
.pmc-user-profil .pmc-user-profil-photo-body{
  display:grid;
  place-items:center;
  min-height:calc(var(--pmc-h-row) * 6);
  background:var(--pmc-surface-alt);
}
.pmc-user-profil .pmc-user-profil-avatar{
  width:calc(var(--pmc-h-row) * 5);
  height:calc(var(--pmc-h-row) * 5);
  max-width:100%;
  border:1px solid var(--pmc-border-strong);
  border-radius:var(--pmc-r-full);
  background:var(--pmc-surface);
  object-fit:cover;
}
.pmc-user-profil .pmc-user-profil-shoutbox-list{
  max-height:calc(var(--pmc-h-row) * 12);
  overflow:auto;
}
.pmc-user-profil .pmc-user-profil-shout{
  display:grid;
  gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-3);
  border-bottom:1px solid var(--pmc-border);
}
.pmc-user-profil .pmc-user-profil-shout:nth-child(even){
  background:var(--pmc-surface-alt);
}
.pmc-user-profil .pmc-user-profil-shout-head{
  display:grid;
  gap:var(--pmc-sp-1);
}
.pmc-user-profil .pmc-user-profil-shout-author,
.pmc-user-profil .pmc-user-profil-country{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  min-width:0;
}
.pmc-user-profil .pmc-user-profil-shout-author span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pmc-user-profil .pmc-user-profil-flag{
  width:var(--pmc-sp-5);
  height:var(--pmc-sp-3);
  flex:none;
  object-fit:cover;
}
.pmc-user-profil .pmc-user-profil-shout-date,
.pmc-user-profil .pmc-user-profil-date{
  color:var(--pmc-text-3);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
}
.pmc-user-profil .pmc-user-profil-shout p{
  margin:0;
  color:var(--pmc-text-2);
  overflow-wrap:anywhere;
}
.pmc-user-profil .pmc-user-profil-shoutbox-form{
  display:grid;
  gap:var(--pmc-sp-2);
}
.pmc-user-profil .pmc-user-profil-shoutbox-form .pmc-field{
  margin:0;
}
.pmc-user-profil .pmc-user-profil-shoutbox-form .pmc-error-msg{
  display:block;
  color:var(--pmc-crit);
  margin-top:var(--pmc-sp-1);
}
.pmc-user-profil .pmc-user-profil-shoutbox-form .pmc-btn{
  width:100%;
  height:var(--pmc-h-ctl-lg);
}
.pmc-user-profil .pmc-user-profil-community{
  display:grid;
  overflow:hidden;
}
.pmc-user-profil .pmc-user-profil-community a{
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  border-bottom:1px solid var(--pmc-border);
  font-weight:600;
}
.pmc-user-profil .pmc-user-profil-community a:last-child{
  border-bottom:0;
}
.pmc-user-profil .pmc-user-profil-tabs-nav{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}
.pmc-user-profil .pmc-user-profil-tabs{
  width:max-content;
  min-width:100%;
  margin:0;
  padding:0;
  flex-wrap:nowrap;
  list-style:none;
}
.pmc-user-profil .pmc-user-profil-tabs li{
  display:flex;
  flex:none;
}
.pmc-user-profil .pmc-user-profil-tabs a{
  display:flex;
  align-items:center;
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-user-profil .pmc-user-profil-tools-body{
  display:flex;
  justify-content:flex-end;
}
.pmc-user-profil .pmc-user-profil-tools-body .pmc-btn{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-user-profil .pmc-user-profil-message-icon{
  width:var(--pmc-sp-4);
  height:var(--pmc-sp-4);
  flex:none;
  object-fit:contain;
}
.pmc-user-profil .pmc-user-profil-details{
  margin:0;
}
.pmc-user-profil .pmc-user-profil-details > div{
  display:grid;
  grid-template-columns:calc(var(--pmc-h-row) * 5) minmax(0,1fr);
  gap:var(--pmc-sp-3);
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  border-bottom:1px solid var(--pmc-border);
}
.pmc-user-profil .pmc-user-profil-details > div:nth-child(even){
  background:var(--pmc-surface-alt);
}
.pmc-user-profil .pmc-user-profil-details > div:last-child{
  border-bottom:0;
}
.pmc-user-profil .pmc-user-profil-details dt{
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-sm);
  font-weight:600;
}
.pmc-user-profil .pmc-user-profil-details dd{
  min-width:0;
  margin:0;
  overflow-wrap:anywhere;
}
.pmc-user-profil .pmc-user-profil-actions{
  margin:0;
  padding:0;
  list-style:none;
}
.pmc-user-profil .pmc-user-profil-actions li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--pmc-sp-3);
  align-items:center;
  min-height:var(--pmc-h-row);
  padding:0 var(--pmc-sp-4);
  border-bottom:1px solid var(--pmc-border);
}
.pmc-user-profil .pmc-user-profil-actions li:nth-child(even){
  background:var(--pmc-surface-alt);
}
.pmc-user-profil .pmc-user-profil-actions li:last-child{
  border-bottom:0;
}
.pmc-user-profil .pmc-user-profil-action-count{
  min-width:var(--pmc-h-ctl);
  color:var(--pmc-primary);
  font-family:var(--pmc-font-mono);
  text-align:right;
}
@media (max-width:1024px){
  .pmc-user-profil .pmc-user-profil-layout{
    grid-template-columns:calc(var(--pmc-h-row) * 8) minmax(0,1fr);
  }
}
@media (max-width:768px){
  .pmc-user-profil .pmc-user-profil-layout{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-user-profil .pmc-user-profil-tabs a{
    min-height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
  }
  .pmc-user-profil .pmc-user-profil-tools-body .pmc-btn{
    width:100%;
    min-height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
    white-space:normal;
    line-height:var(--pmc-lh);
  }
  .pmc-user-profil .pmc-user-profil-details > div{
    grid-template-columns:minmax(0,1fr);
    gap:var(--pmc-sp-1);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — User/register (#3284)
   Formulaire d'inscription dans le design Light.
   -------------------------------------------------------------------------- */
#page:has(.pmc-user-register) > #glial-title{
  display:none;
}
.pmc-user-register .pmc-user-register-shell{
  width:100%;
  max-width:calc(var(--pmc-h-row) * 28);
  justify-self:center;
}
.pmc-user-register .pmc-user-register-form{
  display:grid;
  gap:var(--pmc-sp-4);
}
.pmc-user-register .pmc-user-register-section,
.pmc-user-register .pmc-user-register-actions-card{
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-user-register .pmc-user-register-section .pmc-card-head{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-user-register .pmc-user-register-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--pmc-sp-4);
  padding:var(--pmc-sp-5);
}
.pmc-user-register .pmc-user-register-field{
  display:grid;
  gap:var(--pmc-sp-1);
  align-content:start;
  margin:0;
}
.pmc-user-register .pmc-user-register-field-wide{
  grid-column:1/-1;
}
.pmc-user-register .pmc-user-register-label{
  color:var(--pmc-text);
  font-size:var(--pmc-fs-sm);
  font-weight:600;
}
.pmc-user-register .pmc-user-register-control{
  min-width:0;
}
.pmc-user-register .pmc-user-register-control .pmc-input,
.pmc-user-register .pmc-user-register-control .pmc-select{
  width:100%;
  height:var(--pmc-h-ctl-lg);
}
.pmc-user-register .pmc-user-register-control .pmc-error-msg{
  display:block;
  margin-top:var(--pmc-sp-1);
  color:var(--pmc-crit);
  font-size:var(--pmc-fs-xs);
}
.pmc-user-register .pmc-user-register-actions{
  display:flex;
  justify-content:flex-end;
  gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-4) var(--pmc-sp-5);
}
.pmc-user-register .pmc-user-register-actions .pmc-btn{
  min-width:calc(var(--pmc-h-row) * 4);
  height:var(--pmc-h-ctl-lg);
}
@media (max-width:768px){
  .pmc-user-register .pmc-user-register-fields{
    grid-template-columns:minmax(0,1fr);
    padding:var(--pmc-sp-4);
  }
  .pmc-user-register .pmc-user-register-field-wide{
    grid-column:auto;
  }
  .pmc-user-register .pmc-user-register-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    padding:var(--pmc-sp-4);
  }
  .pmc-user-register .pmc-user-register-actions .pmc-btn{
    width:100%;
    height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Version/index (#3299)
   Historique des installations et des migrations SQL.
   -------------------------------------------------------------------------- */
#page:has(.pmc-version-index) > #glial-title{
  display:none;
}
.pmc-version-index .pmc-version-index-card{
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-version-index .pmc-version-index-sql-card{
  margin-top:var(--pmc-sp-4);
}
.pmc-version-index .pmc-version-index-table-scroll{
  max-height:72vh;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.pmc-version-index .pmc-version-index-table{
  display:block;
  width:100%;
  min-width:0;
  table-layout:fixed;
}
.pmc-version-index .pmc-version-index-table thead,
.pmc-version-index .pmc-version-index-table tbody{
  display:block;
}
.pmc-version-index .pmc-version-index-table thead tr{
  display:flex;
  flex-wrap:wrap;
  gap:var(--pmc-sp-1);
  padding:var(--pmc-sp-2);
  border-bottom:1px solid var(--pmc-border);
}
.pmc-version-index .pmc-version-index-table thead th{
  position:static;
  width:auto;
  padding:var(--pmc-sp-1) var(--pmc-sp-2);
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm);
  white-space:normal;
}
.pmc-version-index .pmc-version-index-table tbody tr{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--pmc-sp-2) var(--pmc-sp-4);
  min-height:var(--pmc-h-row-dense);
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  border-bottom:1px solid var(--pmc-border);
}
.pmc-version-index .pmc-version-index-table td{
  display:block;
  min-width:0;
  height:auto;
  padding:0;
  border:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
.pmc-version-index .pmc-version-index-table td::before{
  content:attr(data-label);
  display:block;
  margin-bottom:var(--pmc-sp-1);
  color:var(--pmc-text-3);
  font:600 var(--pmc-fs-xs)/1.2 var(--pmc-font-sans);
}
.pmc-version-index .pmc-version-index-table .pmc-version-index-empty-cell{
  grid-column:1/-1;
}
.pmc-version-index .pmc-version-index-table .pmc-version-index-empty-cell::before{
  display:none;
}
.pmc-version-index .pmc-version-index-id{
  color:var(--pmc-text-3);
}
.pmc-version-index .pmc-version-index-date,
.pmc-version-index .pmc-version-index-version,
.pmc-version-index .pmc-version-index-build{
  white-space:normal;
}
.pmc-version-index .pmc-version-index-build{
  overflow-wrap:anywhere;
}
.pmc-version-index .pmc-version-index-comment,
.pmc-version-index .pmc-version-index-migration,
.pmc-version-index .pmc-version-index-error{
  white-space:normal;
  overflow-wrap:anywhere;
}
.pmc-version-index .pmc-version-index-checksum{
  overflow-wrap:anywhere;
  white-space:normal;
}
.pmc-version-index .pmc-version-index-empty-cell{
  height:auto;
  padding:var(--pmc-sp-4);
}
@media (max-width:900px){
  .pmc-version-index .pmc-version-index-table tbody tr{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:560px){
  .pmc-version-index .pmc-version-index-table tbody tr{
    grid-template-columns:minmax(0,1fr);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Variable/index (#3293)
   Historique tabulaire des variables dans le design Light.
   -------------------------------------------------------------------------- */
#page:has(.pmc-variable-index) > #glial-title{
  display:none;
}
.pmc-variable-index .pmc-variable-index-card{
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-variable-index .pmc-variable-index-card-head{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-variable-index .pmc-variable-index-card-head .pmc-badge-count{
  margin-left:auto;
}
.pmc-variable-index .pmc-variable-index-filters{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  border-bottom:1px solid var(--pmc-border);
  background:var(--pmc-surface-alt);
}
.pmc-variable-index .pmc-variable-index-filters-label{
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
  font-weight:700;
  text-transform:uppercase;
}
.pmc-variable-index .pmc-variable-index-filter{
  height:auto;
  min-height:var(--pmc-h-ctl);
  padding-top:var(--pmc-sp-2);
  padding-bottom:var(--pmc-sp-2);
  flex-wrap:wrap;
  white-space:normal;
}
.pmc-variable-index .pmc-variable-index-filter .pmc-badge{
  flex:none;
}
.pmc-variable-index .pmc-variable-index-filter .pmc-server-identity-endpoint{
  color:inherit;
  font-size:var(--pmc-fs-xs);
}
.pmc-variable-index .pmc-variable-index-table-scroll{
  max-height:calc(var(--pmc-h-row-dense) * 18);
  overflow:auto;
  overscroll-behavior:contain;
}
.pmc-variable-index .pmc-variable-index-table{
  min-width:calc(var(--pmc-h-ctl) * 25);
}
.pmc-variable-index .pmc-variable-index-table td{
  height:auto;
  min-height:var(--pmc-h-row-dense);
  padding-top:var(--pmc-sp-2);
  padding-bottom:var(--pmc-sp-2);
  vertical-align:top;
}
.pmc-variable-index .pmc-variable-index-rank{
  color:var(--pmc-text-3);
}
.pmc-variable-index .pmc-variable-index-server{
  min-width:calc(var(--pmc-h-ctl) * 6);
  line-height:var(--pmc-lh);
}
.pmc-variable-index .pmc-variable-index-name{
  min-width:calc(var(--pmc-h-ctl) * 5);
}
.pmc-variable-index .pmc-variable-index-author{ display:block; font-family:var(--pmc-font-sans); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); white-space:normal; }
.pmc-variable-index .pmc-variable-index-author-unknown{ color:var(--pmc-text-3); font-style:italic; }
.pmc-variable-index .pmc-variable-index-value{
  min-width:calc(var(--pmc-h-ctl) * 6);
  max-width:calc(var(--pmc-h-ctl) * 12);
  white-space:normal;
  overflow-wrap:anywhere;
}
.pmc-variable-index .pmc-variable-index-previous{
  min-width:calc(var(--pmc-h-ctl) * 5);
  max-width:calc(var(--pmc-h-ctl) * 10);
  color:var(--pmc-text-2);
  white-space:normal;
  overflow-wrap:anywhere;
}
.pmc-variable-index .pmc-variable-index-baseline{
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
}
.pmc-variable-index .pmc-variable-index-category{
  margin-left:var(--pmc-sp-1);
  font-family:var(--pmc-font-sans);
}
.pmc-variable-index .pmc-variable-index-card-head .pmc-variable-index-critical-count{
  margin-left:0;
}
.pmc-variable-index .pmc-variable-index-date{
  display:grid;
  gap:var(--pmc-sp-1);
  min-width:calc(var(--pmc-h-ctl) * 3);
  color:var(--pmc-text-2);
  white-space:nowrap;
}
.pmc-variable-index .pmc-variable-index-time{
  min-width:calc(var(--pmc-h-ctl) * 2);
  color:var(--pmc-text-2);
}
.pmc-variable-index .pmc-variable-index-empty-cell{
  height:auto;
  padding:var(--pmc-sp-4);
}
@media (max-width:768px){
  .pmc-variable-index .pmc-variable-index-filters{
    align-items:stretch;
    padding:var(--pmc-sp-3);
  }
  .pmc-variable-index .pmc-variable-index-filters-label{
    flex-basis:100%;
  }
  .pmc-variable-index .pmc-variable-index-filter{
    width:100%;
    justify-content:flex-start;
  }
  .pmc-variable-index .pmc-variable-index-table-scroll{
    max-height:calc(var(--pmc-h-row-dense) * 14);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Worker/file (#3304)
   File d'attente du worker dans le design Light, avec un fragment identique
   lors du rafraichissement AJAX.
   -------------------------------------------------------------------------- */
#page:has(.pmc-worker-file) > #glial-title{
  display:none;
}
.pmc-worker-file .pmc-worker-file-card{
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-worker-file .pmc-worker-file-card-head{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-worker-file .pmc-worker-file-card-head .pmc-badge{
  margin-left:auto;
}
.pmc-worker-file .pmc-worker-file-body{
  display:grid;
  gap:var(--pmc-sp-3);
  padding:var(--pmc-sp-4);
}
.pmc-worker-file .pmc-worker-file-stats .pmc-stat{
  min-width:0;
}
.pmc-worker-file .pmc-worker-file-stats .pmc-value{
  font-size:var(--pmc-fs-lg);
  overflow-wrap:anywhere;
}
.pmc-worker-file .pmc-worker-file-disk{
  padding:var(--pmc-sp-3);
  background:var(--pmc-surface-alt);
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm);
}
.pmc-worker-file .pmc-worker-file-disk .pmc-progress-label{
  gap:var(--pmc-sp-2);
}
.pmc-worker-file .pmc-worker-file-disk .pmc-progress{
  height:12px;
}
.pmc-worker-file .pmc-worker-file-disk small{
  display:block;
  margin-top:var(--pmc-sp-1);
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
}
.pmc-worker-file .pmc-worker-file-details{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-2) var(--pmc-sp-3);
  background:var(--pmc-surface-alt);
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm);
}
.pmc-worker-file .pmc-worker-file-detail{
  display:inline-flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
}
.pmc-worker-file code{
  color:var(--pmc-text-2);
}
.pmc-worker-file .pmc-worker-file-detail + .pmc-worker-file-detail{
  padding-left:var(--pmc-sp-2);
  border-left:1px solid var(--pmc-border-strong);
}
.pmc-worker-file .pmc-worker-file-list{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-md);
  background:var(--pmc-surface);
}
/* Barre « Queue contents » = pmc-card-head en dégradé bleu (Lab §7, #5555). */
.pmc-worker-file .pmc-worker-file-list-head{
  justify-content:space-between;
}
.pmc-worker-file .pmc-worker-file-log{
  display:block;
  width:100%;
  min-height:calc(var(--pmc-h-row) * 7);
  max-height:calc(var(--pmc-h-row) * 11);
  margin:0;
  overflow:auto;
  padding:var(--pmc-sp-3);
  color:var(--pmc-text-2);
  background:var(--pmc-surface);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
  line-height:var(--pmc-lh);
  white-space:pre;
  overscroll-behavior:contain;
}
@media (max-width:768px){
  .pmc-worker-file .pmc-worker-file-body{
    padding:var(--pmc-sp-3);
  }
  .pmc-worker-file .pmc-worker-file-detail{
    width:100%;
    justify-content:space-between;
  }
  .pmc-worker-file .pmc-worker-file-detail + .pmc-worker-file-detail{
    padding-top:var(--pmc-sp-2);
    padding-left:0;
    border-top:1px solid var(--pmc-border);
    border-left:0;
  }
  .pmc-worker-file .pmc-worker-file-log{
    min-height:calc(var(--pmc-h-row) * 6);
    max-height:calc(var(--pmc-h-row) * 9);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Worker/index (#3306)
   Tableau Light des files et adaptation visuelle de l'editeur en ligne.
   -------------------------------------------------------------------------- */
#page:has(.pmc-worker-index) > #glial-title{
  display:none;
}
.pmc-worker-index .pmc-worker-index-card{
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-worker-index .pmc-worker-index-card-head{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-worker-index .pmc-worker-index-card-head .pmc-badge{
  margin-left:auto;
}
.pmc-worker-index .pmc-worker-index-body{
  min-width:0;
}
.pmc-worker-index .pmc-worker-index-table-scroll{
  max-height:calc(var(--pmc-h-row-dense) * 18);
  overflow:auto;
  overscroll-behavior:contain;
}
.pmc-worker-index .pmc-worker-index-table{
  min-width:calc(var(--pmc-h-ctl) * 34);
}
.pmc-worker-index .pmc-worker-index-table td{
  height:auto;
  padding-top:var(--pmc-sp-2);
  padding-bottom:var(--pmc-sp-2);
  vertical-align:top;
}
.pmc-worker-index .pmc-worker-index-name,
.pmc-worker-index .pmc-worker-index-worker{
  white-space:nowrap;
}
.pmc-worker-index .pmc-worker-index-query{
  min-width:calc(var(--pmc-h-ctl) * 10);
  max-width:calc(var(--pmc-h-ctl) * 16);
  color:var(--pmc-text-2);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.pmc-worker-index .pmc-worker-index-table{
  min-width:calc(var(--pmc-h-ctl) * 41);
}
.pmc-worker-index .pmc-worker-index-config,
.pmc-worker-index .pmc-worker-index-activity,
.pmc-worker-index .pmc-worker-index-health{
  min-width:calc(var(--pmc-h-ctl) * 4);
}
.pmc-worker-index .pmc-worker-index-meta{
  display:block;
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
  white-space:normal;
}
.pmc-worker-index .pmc-worker-index-worker-tip{
  cursor:help;
  text-decoration:underline dotted var(--pmc-border-strong);
  text-underline-offset:var(--pmc-sp-1);
}
.pmc-worker-index .pmc-worker-index-query{
  min-width:calc(var(--pmc-h-ctl) * 5);
  white-space:nowrap;
}
.pmc-worker-index .pmc-worker-query-count{
  display:inline-block;
  margin-left:var(--pmc-sp-1);
  white-space:nowrap;
}
.pmc-worker-index .pmc-worker-index-activity .pmc-progress{
  display:block;
  margin-top:var(--pmc-sp-1);
}
.pmc-worker-query-tooltip{
  position:fixed;
  z-index:var(--pmc-z-tooltip);
  max-height:min(60vh, 480px);
  overflow:auto;
  padding:var(--pmc-sp-3);
  border:1px solid var(--pmc-border-strong);
  border-radius:var(--pmc-r-md);
  background:var(--pmc-surface);
  color:var(--pmc-text);
  box-shadow:var(--pmc-shadow-md);
}
.pmc-worker-query-tooltip[hidden]{display:none;}
.pmc-worker-query-code{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-sm);
}
.pmc-worker-query-keyword{color:var(--pmc-primary);font-weight:700;}
.pmc-worker-query-string{color:var(--pmc-ok);}
.pmc-worker-query-comment{color:var(--pmc-text-2);font-style:italic;}
.pmc-worker-query-identifier{color:var(--pmc-info);}
.pmc-worker-query-number{color:var(--pmc-warn);}
.pmc-worker-index .pmc-worker-index-editable{
  cursor:pointer;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-color:var(--pmc-border-strong);
  text-underline-offset:var(--pmc-sp-1);
}
.pmc-worker-index .pmc-worker-index-editable:hover{
  background:var(--pmc-primary-soft);
  text-decoration-color:var(--pmc-primary);
}
.pmc-worker-index .pmc-worker-index-editable.pmc-worker-index-edit-source-hidden{
  display:none;
}
.pmc-worker-index .pmc-worker-index-empty-cell{
  height:auto;
  padding:var(--pmc-sp-4);
}
.pmc-worker-index .pmc-tree-index-editor{
  display:inline-block;
  width:100%;
  min-width:calc(var(--pmc-h-ctl) * 8);
}
.pmc-worker-index .pmc-tree-index-editor > div,
.pmc-worker-index .pmc-tree-index-editor-form{
  width:100%;
}
.pmc-worker-index .pmc-tree-index-editor-form{
  margin:0;
}
.pmc-worker-index .pmc-tree-index-editor-group > div{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-1);
}
.pmc-worker-index .pmc-tree-index-editor .editable-input{
  position:relative;
  flex:1;
  min-width:0;
}
.pmc-worker-index .pmc-tree-index-editor-input{
  min-width:calc(var(--pmc-h-ctl) * 6);
}
.pmc-worker-index .pmc-tree-index-editor .editable-buttons{
  display:flex;
  gap:var(--pmc-sp-1);
}
.pmc-worker-index .pmc-tree-index-editor .editableform-loading,
.pmc-worker-index .pmc-tree-index-editor .editable-error-block:empty,
.pmc-worker-index .pmc-tree-index-editor .editable-clear-x{
  display:none;
}
.pmc-worker-index .pmc-tree-index-editor .editable-error-block:not(:empty){
  display:block;
  margin-top:var(--pmc-sp-1);
  color:var(--pmc-crit);
  font-size:var(--pmc-fs-xs);
}
.pmc-worker-index .pmc-worker-index-table td:has(.pmc-tree-index-editor){
  padding:var(--pmc-sp-1);
}
@media (max-width:768px){
  .pmc-worker-index .pmc-worker-index-table-scroll{
    max-height:calc(var(--pmc-h-row-dense) * 14);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Worker/list (#3308)
   Synthese Light des pools et table des workers actifs.
   -------------------------------------------------------------------------- */
#page:has(.pmc-worker-list) > #glial-title{
  display:none;
}
.pmc-worker-list .pmc-worker-list-card{
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-worker-list .pmc-worker-list-card-head{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-worker-list .pmc-worker-list-card-head .pmc-badge{
  margin-left:auto;
}
.pmc-worker-list .pmc-worker-list-body{
  min-width:0;
}
.pmc-worker-list .pmc-worker-list-summary-scroll{
  max-height:calc(var(--pmc-h-row-dense) * 18);
  overflow:auto;
  overscroll-behavior:contain;
}
.pmc-worker-list .pmc-worker-list-summary-table{
  min-width:calc(var(--pmc-h-ctl) * 46);
}
.pmc-worker-list .pmc-worker-list-active-scroll{
  max-height:calc(var(--pmc-h-row-dense) * 12);
  overflow:auto;
  overscroll-behavior:contain;
}
.pmc-worker-list .pmc-worker-list-active-table{
  min-width:calc(var(--pmc-h-ctl) * 24);
}
.pmc-worker-list .pmc-worker-list-summary-table td,
.pmc-worker-list .pmc-worker-list-active-table td{
  height:auto;
  padding-top:var(--pmc-sp-2);
  padding-bottom:var(--pmc-sp-2);
  vertical-align:top;
}
.pmc-worker-list .pmc-worker-list-name{
  white-space:nowrap;
}
.pmc-worker-list .pmc-worker-list-meta{
  display:block;
  margin-top:var(--pmc-sp-1);
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
  font-family:var(--pmc-font-sans);
  white-space:normal;
}
.pmc-worker-list .pmc-worker-list-lifecycle,
.pmc-worker-list .pmc-worker-list-slowest{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--pmc-sp-1);
}
.pmc-worker-list .pmc-worker-list-load{
  min-width:calc(var(--pmc-h-ctl) * 5);
}
.pmc-worker-list .pmc-worker-list-age{
  min-width:calc(var(--pmc-h-ctl) * 5);
  white-space:nowrap;
}
.pmc-worker-list .pmc-worker-list-muted{
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
}
.pmc-worker-list .pmc-worker-list-slowest{
  min-width:calc(var(--pmc-h-ctl) * 8);
}
.pmc-worker-list .pmc-worker-list-slowest .pmc-badge{
  white-space:nowrap;
}
.pmc-worker-list .pmc-worker-list-empty-cell{
  height:auto;
  padding:var(--pmc-sp-4);
}
@media (max-width:768px){
  .pmc-worker-list .pmc-worker-list-summary-scroll{
    max-height:calc(var(--pmc-h-row-dense) * 14);
  }
  .pmc-worker-list .pmc-worker-list-active-scroll{
    max-height:calc(var(--pmc-h-row-dense) * 10);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Backup/graph (#3312)
   Deux aires empilees dans la page Light d'historique des sauvegardes.
   -------------------------------------------------------------------------- */
#page:has(.pmc-backup-graph) > #glial-title{
  display:none;
}
.pmc-backup-graph .pmc-backup-graph-grid{
  align-items:stretch;
}
.pmc-backup-graph .pmc-backup-graph-card{
  min-width:0;
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-backup-graph .pmc-backup-graph-card-head{
  min-height:var(--pmc-h-ctl-lg);
  flex-wrap:wrap;
}
.pmc-backup-graph .pmc-backup-graph-card-head > div{
  min-width:0;
}
.pmc-backup-graph .pmc-backup-graph-subtitle{
  display:block;
  margin-top:var(--pmc-sp-1);
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
}
.pmc-backup-graph .pmc-backup-graph-export{
  margin-left:auto;
}
.pmc-backup-graph .pmc-backup-graph-card .pmc-card-body{
  min-width:0;
}
.pmc-backup-graph .pmc-backup-graph-chart{
  position:relative;
  min-width:0;
  height:calc(var(--pmc-h-row) * 11);
}
.pmc-backup-graph .pmc-backup-graph-chart canvas{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
}
@media (max-width:768px){
  .pmc-backup-graph .pmc-backup-graph-export{
    width:100%;
    margin-left:0;
  }
  .pmc-backup-graph .pmc-backup-graph-chart{
    height:calc(var(--pmc-h-row) * 9);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Binlog/add (#3324)
   Formulaire Light de configuration d'une politique de purge des binlogs.
   -------------------------------------------------------------------------- */
#page:has(.pmc-binlog-add) > #glial-title{
  display:none;
}
.pmc-binlog-add .pmc-binlog-add-card{
  box-shadow:var(--pmc-shadow-md);
}
.pmc-binlog-add .pmc-binlog-add-card-head{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-binlog-add .pmc-binlog-add-grid{
  align-items:start;
}
.pmc-binlog-add .pmc-binlog-add-grid .pmc-field{
  margin-bottom:0;
}
.pmc-binlog-add select.pmc-select-srv,
.pmc-binlog-add .pmc-ssel.pmc-select-srv{
  max-width:none;
}
.pmc-binlog-add .pmc-input[readonly]{
  background:var(--pmc-surface-alt);
  color:var(--pmc-text-2);
}
.pmc-binlog-add .pmc-binlog-add-actions{
  justify-content:flex-end;
}
@media (max-width:640px){
  .pmc-binlog-add .pmc-binlog-add-actions .pmc-btn{
    width:100%;
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Binlog/liste (#3334)
   Laisse la table large défiler dans sa carte sans élargir la page.
   -------------------------------------------------------------------------- */
.pmc-binlog-list{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.pmc-binlog-list td:nth-child(4){
  min-width:var(--pmc-binlog-server-column-width);
}


/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Binlog/view (#3337)
   Conserve le renderer enfant et borne le tableau large dans sa carte.
   -------------------------------------------------------------------------- */
.pmc-binlog-view{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.pmc-binlog-view .pmc-binlog-view-add{
  min-width:0;
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — CheckConfig/index (#3341)
   Comparaison Light des variables, avec sélection responsive et table bornée.
   -------------------------------------------------------------------------- */
#page:has(.pmc-check-config) > #glial-title{
  display:none;
}
.pmc-check-config{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.pmc-check-config .pmc-check-config-scope,
.pmc-check-config .pmc-check-config-results{
  min-width:0;
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-check-config .pmc-check-config-card-head{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-check-config .pmc-check-config-card-head .pmc-badge-count{
  margin-left:auto;
}
.pmc-check-config .pmc-check-config-scope-grid{
  align-items:start;
}
.pmc-check-config .pmc-check-config-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:var(--pmc-sp-3);
  min-width:0;
  margin:0;
}
.pmc-check-config .pmc-check-config-form .pmc-field{
  min-width:0;
  margin-bottom:0;
}
.pmc-check-config .pmc-check-config-form select.pmc-select-srv,
.pmc-check-config .pmc-check-config-form .pmc-ssel.pmc-select-srv{
  max-width:none;
}
.pmc-check-config .pmc-check-config-toolbar{
  background:var(--pmc-surface-alt);
}
.pmc-check-config .pmc-check-config-summary{
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-sm);
}
.pmc-check-config .pmc-check-config-summary strong{
  color:var(--pmc-text);
  font-family:var(--pmc-font-mono);
}
.pmc-check-config .pmc-check-config-table-scroll{
  max-height:calc(var(--pmc-h-row-dense) * 22);
  overflow:auto;
  overscroll-behavior:contain;
}
.pmc-check-config .pmc-check-config-table{
  min-width:calc(var(--pmc-h-ctl) * 28);
}
.pmc-check-config .pmc-check-config-table td{
  height:auto;
  min-height:var(--pmc-h-row-dense);
  padding-top:var(--pmc-sp-2);
  padding-bottom:var(--pmc-sp-2);
  vertical-align:top;
}
.pmc-check-config .pmc-check-config-server{
  min-width:calc(var(--pmc-h-ctl) * 7);
}
.pmc-check-config .pmc-check-config-variable{
  min-width:calc(var(--pmc-h-ctl) * 7);
  max-width:calc(var(--pmc-h-ctl) * 12);
  white-space:normal;
  overflow-wrap:anywhere;
}
.pmc-check-config .pmc-check-config-value{
  min-width:calc(var(--pmc-h-ctl) * 6);
  max-width:calc(var(--pmc-h-ctl) * 12);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
  white-space:normal;
  overflow-wrap:anywhere;
}
.pmc-check-config .pmc-check-config-row-difference td:first-child{
  box-shadow:inset 3px 0 0 var(--pmc-warn);
}
.pmc-check-config .pmc-check-config-value-difference{
  font-weight:700;
}
.pmc-check-config .pmc-check-config-value-1{
  background:color-mix(in srgb,var(--pmc-chart-1) 16%,var(--pmc-surface));
}
.pmc-check-config .pmc-check-config-value-2{
  background:color-mix(in srgb,var(--pmc-chart-2) 16%,var(--pmc-surface));
}
.pmc-check-config .pmc-check-config-value-3{
  background:color-mix(in srgb,var(--pmc-chart-3) 16%,var(--pmc-surface));
}
.pmc-check-config .pmc-check-config-value-4{
  background:color-mix(in srgb,var(--pmc-chart-4) 16%,var(--pmc-surface));
}
.pmc-check-config .pmc-check-config-value-5{
  background:color-mix(in srgb,var(--pmc-chart-5) 16%,var(--pmc-surface));
}
.pmc-check-config .pmc-check-config-empty{
  margin:0;
}
@media (max-width:768px){
  .pmc-check-config .pmc-check-config-form{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-check-config .pmc-check-config-form .pmc-btn,
  .pmc-check-config .pmc-check-config-toolbar .pmc-btn{
    width:100%;
  }
  .pmc-check-config .pmc-check-config-table-scroll{
    max-height:calc(var(--pmc-h-row-dense) * 15);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Client/add (#3346)
   Formulaire Light court pour creer une organisation cliente.
   -------------------------------------------------------------------------- */
#page:has(.pmc-client-add) > #glial-title{
  display:none;
}
.pmc-client-add{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.pmc-client-add .pmc-client-add-card{
  width:100%;
  max-width:calc(var(--pmc-h-ctl) * 16);
  box-shadow:var(--pmc-shadow-md);
}
.pmc-client-add .pmc-client-add-card-head{
  min-height:var(--pmc-h-ctl-lg);
}
.pmc-client-add .pmc-card-body .pmc-field{
  margin-bottom:0;
}
.pmc-client-add .pmc-client-add-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pmc-sp-4);
}
.pmc-client-add .pmc-client-add-actions > span{
  color:var(--pmc-text-2);
}
.pmc-client-add .pmc-client-add-hint{
  width:100%;
  max-width:calc(var(--pmc-h-ctl) * 16);
  margin-bottom:0;
}
@media (max-width:640px){
  .pmc-client-add .pmc-client-add-card,
  .pmc-client-add .pmc-client-add-hint{
    max-width:100%;
  }
  .pmc-client-add .pmc-client-add-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .pmc-client-add .pmc-client-add-actions .pmc-btn{
    width:100%;
    height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Client/index (#3348)
   Inventaire Light des organisations et de leur couverture de supervision.
   -------------------------------------------------------------------------- */
#page:has(.pmc-client-index) > #glial-title{
  display:none;
}
.pmc-client-index{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.pmc-client-index .pmc-client-index-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--pmc-h-ctl) * 10)),1fr));
  gap:var(--pmc-sp-4);
  align-items:stretch;
}
.pmc-client-index .pmc-client-index-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-client-index .pmc-client-index-card[aria-busy="true"]{
  opacity:.68;
}
.pmc-client-index .pmc-client-index-card-head{
  min-height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-4));
  align-items:flex-start;
  gap:var(--pmc-sp-3);
}
.pmc-client-index .pmc-client-index-avatar{
  position:relative;
  display:grid;
  place-items:center;
  width:var(--pmc-h-ctl-lg);
  height:var(--pmc-h-ctl-lg);
  flex:none;
  overflow:hidden;
  border-radius:var(--pmc-r-md);
  color:var(--pmc-primary);
  background:var(--pmc-primary-soft);
  font-size:var(--pmc-fs-lg);
  font-weight:700;
}
.pmc-client-index .pmc-client-index-avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--pmc-surface);
}
.pmc-client-index .pmc-client-index-identity{
  min-width:0;
  flex:1;
  display:grid;
  gap:var(--pmc-sp-1);
}
.pmc-client-index .pmc-client-index-name{
  width:fit-content;
  max-width:100%;
  padding:0;
  border:0;
  color:var(--pmc-grad-head-text);
  background:transparent;
  font:700 var(--pmc-fs-md)/1.3 var(--pmc-font-sans);
  text-align:left;
  cursor:pointer;
  overflow-wrap:anywhere;
}
.pmc-client-index .pmc-client-index-name:hover{
  color:var(--pmc-grad-head-text);
  text-decoration:underline;
}
.pmc-client-index .pmc-client-index-id{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
}
.pmc-client-index .pmc-client-index-editor:not([hidden]){
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--pmc-sp-2);
}
.pmc-client-index .pmc-client-index-editor-actions{
  display:flex;
  gap:var(--pmc-sp-1);
  width:100%;
}
.pmc-client-index .pmc-client-index-editor-actions .pmc-btn{
  flex:1;
}
.pmc-client-index .pmc-client-index-edit-error{
  grid-column:1 / -1;
  color:var(--pmc-crit);
  font-size:var(--pmc-fs-xs);
}
.pmc-client-index .pmc-client-index-monitoring{
  margin-left:auto;
  flex:none;
}
.pmc-client-index .pmc-client-index-card-body{
  flex:1;
  display:grid;
  gap:var(--pmc-sp-3);
  align-content:start;
}
.pmc-client-index .pmc-client-index-statuses{
  display:flex;
  flex-wrap:wrap;
  gap:var(--pmc-sp-2);
}
.pmc-client-index .pmc-client-index-feedback{
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
}
.pmc-client-index .pmc-client-index-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pmc-sp-3);
  flex-wrap:wrap;
}
.pmc-client-index .pmc-client-index-card-foot time{
  color:var(--pmc-text-3);
  font-family:var(--pmc-font-mono);
}
.pmc-client-index .pmc-client-index-card-actions{
  display:flex;
  gap:var(--pmc-sp-2);
  align-items:center;
  margin-left:auto;
}
.pmc-client-index .pmc-client-index-delete-form{
  display:flex;
  margin:0;
}
.pmc-client-index .pmc-client-index-add{
  min-height:calc(var(--pmc-h-row) * 4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-5);
  border-style:dashed;
  color:var(--pmc-text-2);
  text-align:center;
}
.pmc-client-index .pmc-client-index-add:hover{
  border-color:var(--pmc-primary);
  color:var(--pmc-primary);
  background:var(--pmc-primary-soft);
  text-decoration:none;
}
.pmc-client-index .pmc-client-index-add-mark{
  display:grid;
  place-items:center;
  width:var(--pmc-h-ctl-lg);
  height:var(--pmc-h-ctl-lg);
  border-radius:var(--pmc-r-full);
  color:var(--pmc-primary);
  background:var(--pmc-primary-soft);
  font-size:var(--pmc-fs-xl);
  font-weight:700;
}
.pmc-client-index .pmc-client-index-add > span:last-child{
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
}
@media (max-width:640px){
  .pmc-client-index .pmc-client-index-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-client-index .pmc-client-index-card-actions{
    width:100%;
    margin-left:0;
  }
  .pmc-client-index .pmc-client-index-card-actions .pmc-btn{
    flex:1;
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-client-index .pmc-client-index-delete-form{
    flex:1;
  }
.pmc-client-index .pmc-client-index-delete-form .pmc-btn{
    width:100%;
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Color/index (#3368)
   Palette Light des légendes Graphviz avec édition responsive.
   -------------------------------------------------------------------------- */
#page:has(.pmc-color-index) > #glial-title{
  display:none;
}
.pmc-color-index{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.pmc-color-index .pmc-page-head .pmc-actions{
  align-items:center;
  flex-wrap:wrap;
}
.pmc-color-index .pmc-color-index-type-card{
  min-width:0;
  overflow:hidden;
}
.pmc-color-index .pmc-color-index-type-card .pmc-card-head{
  min-height:var(--pmc-h-ctl-lg);
  justify-content:space-between;
  flex-wrap:wrap;
}
.pmc-color-index .pmc-color-index-type-hint{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
}
.pmc-color-index .pmc-color-index-types{
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  gap:var(--pmc-sp-1);
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  padding:var(--pmc-sp-2) var(--pmc-sp-3) 0;
  scrollbar-gutter:stable;
}
.pmc-color-index .pmc-color-index-types a{
  min-height:var(--pmc-h-ctl-lg);
  display:inline-flex;
  align-items:center;
  flex:none;
  white-space:nowrap;
}
.pmc-color-index #color-index-form{
  min-width:0;
  display:grid;
  gap:var(--pmc-sp-4);
}
.pmc-color-index .pmc-color-index-layout{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--pmc-sp-4);
  align-items:start;
}
.pmc-color-index .pmc-color-index-layout-preview{
  grid-template-columns:minmax(0,1fr) minmax(calc(var(--pmc-h-row) * 9),.34fr);
}
.pmc-color-index .pmc-color-index-table-card{
  min-width:0;
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-color-index .pmc-color-index-table-head{
  min-height:var(--pmc-h-ctl-lg);
  justify-content:space-between;
  gap:var(--pmc-sp-3);
}
.pmc-color-index .pmc-color-index-table-head > div{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:var(--pmc-sp-2);
  flex-wrap:wrap;
}
/* Titre de famille (#5536) : typographie des titres de panneau, casse normale, sur le dégradé. */
.pmc-color-index .pmc-color-index-table-head h2{
  margin:0;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  text-transform:none;
}
.pmc-color-index .pmc-color-index-table-head > div > span{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
}
.pmc-color-index .pmc-color-index-table-scroll{
  min-width:0;
  overflow:auto;
}
.pmc-color-index .pmc-color-index-table{
  width:100%;
  min-width:calc(var(--pmc-h-row) * 29);
  table-layout:auto;
}
.pmc-color-index .pmc-color-index-table th{
  white-space:nowrap;
}
.pmc-color-index .pmc-color-index-table th:first-child,
.pmc-color-index .pmc-color-index-constant{
  min-width:calc(var(--pmc-h-row) * 5);
}
.pmc-color-index .pmc-color-index-table th:nth-child(2),
.pmc-color-index .pmc-color-index-description{
  min-width:calc(var(--pmc-h-row) * 3);
}
.pmc-color-index .pmc-color-index-table th:nth-child(3),
.pmc-color-index .pmc-color-index-table th:nth-child(4),
.pmc-color-index .pmc-color-index-table th:nth-child(5){
  min-width:calc(var(--pmc-h-row) * 4);
}
.pmc-color-index .pmc-color-index-table th:last-child{
  min-width:calc(var(--pmc-h-row) * 3);
}
.pmc-color-index .pmc-color-index-table td{
  height:auto;
  min-height:var(--pmc-h-row);
  padding:var(--pmc-sp-2);
}
.pmc-color-index .pmc-color-index-constant{
  overflow-wrap:anywhere;
  font-size:var(--pmc-fs-xs);
}
.pmc-color-index .pmc-color-index-description{
  color:var(--pmc-text-2);
  overflow-wrap:anywhere;
}
.pmc-color-index .pmc-color-index-color-field{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(calc(var(--pmc-h-row) * 2),1fr) var(--pmc-h-ctl-lg);
  gap:var(--pmc-sp-1);
  align-items:center;
}
.pmc-color-index .pmc-color-index-color-text{
  min-width:0;
  height:var(--pmc-h-ctl-lg);
  font-size:var(--pmc-fs-xs);
  text-transform:uppercase;
}
.pmc-color-index .pmc-color-index-picker{
  width:var(--pmc-h-ctl-lg);
  height:var(--pmc-h-ctl-lg);
  padding:var(--pmc-sp-1);
  border:1px solid var(--pmc-border-strong);
  border-radius:var(--pmc-r-sm);
  background:var(--pmc-surface);
  cursor:pointer;
  transition:
    border-color var(--pmc-transition),
    box-shadow var(--pmc-transition),
    opacity var(--pmc-transition);
}
.pmc-color-index .pmc-color-index-picker:hover{
  border-color:var(--pmc-text-3);
}
.pmc-color-index .pmc-color-index-picker:focus-visible{
  border-color:var(--pmc-primary);
  box-shadow:var(--pmc-shadow-sm);
}
.pmc-color-index .pmc-color-index-picker::-webkit-color-swatch-wrapper{
  padding:0;
}
.pmc-color-index .pmc-color-index-picker::-webkit-color-swatch{
  border:0;
  border-radius:var(--pmc-r-sm);
}
.pmc-color-index .pmc-color-index-picker::-moz-color-swatch{
  border:0;
  border-radius:var(--pmc-r-sm);
}
.pmc-color-index .pmc-color-index-picker-muted{
  opacity:.45;
}
.pmc-color-index .pmc-color-index-style{
  min-width:calc(var(--pmc-h-row) * 2);
  height:var(--pmc-h-ctl-lg);
  font-size:var(--pmc-fs-xs);
}
.pmc-color-index .pmc-color-index-empty{
  min-height:calc(var(--pmc-h-row) * 5);
  display:grid;
  place-content:center;
}
.pmc-color-index .pmc-color-index-preview-card{
  min-width:0;
  overflow:hidden;
  position:sticky;
  top:var(--pmc-sp-4);
  box-shadow:var(--pmc-shadow-md);
}
.pmc-color-index .pmc-color-index-preview-card .pmc-card-head{
  min-height:var(--pmc-h-ctl-lg);
  justify-content:space-between;
}
.pmc-color-index .pmc-color-index-preview{
  min-height:calc(var(--pmc-h-row) * 10);
  display:grid;
  place-items:center;
  overflow:auto;
  background:var(--pmc-surface-alt);
}
.pmc-color-index .pmc-color-index-preview > *,
.pmc-color-index .pmc-color-index-preview svg,
.pmc-color-index .pmc-color-index-preview img{
  max-width:100%;
}
.pmc-color-index .pmc-color-index-preview svg,
.pmc-color-index .pmc-color-index-preview img{
  display:block;
  height:auto;
}
.pmc-color-index .pmc-color-index-submit{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pmc-sp-4);
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
}
.pmc-color-index .pmc-color-index-submit > div{
  min-width:0;
  display:grid;
  gap:var(--pmc-sp-1);
}
.pmc-color-index .pmc-color-index-submit > div > span{
  color:var(--pmc-text-3);
  font-size:var(--pmc-fs-xs);
}
.pmc-color-index .pmc-color-index-no-types{
  border-color:var(--pmc-info-border);
  background:var(--pmc-info-soft);
}
.pmc-color-index .pmc-color-index-no-types strong{
  display:block;
  color:var(--pmc-info);
  font-size:var(--pmc-fs-md);
}
.pmc-color-index .pmc-color-index-no-types p{
  margin:var(--pmc-sp-2) 0 0;
  color:var(--pmc-text-2);
}
@media (max-width:1024px){
  .pmc-color-index .pmc-color-index-layout-preview{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-color-index .pmc-color-index-preview-card{
    position:static;
    order:-1;
  }
  .pmc-color-index .pmc-color-index-preview{
    min-height:calc(var(--pmc-h-row) * 8);
    max-height:calc(var(--pmc-h-row) * 14);
  }
}
@media (max-width:768px){
  .pmc-color-index .pmc-color-index-table-scroll{
    overflow:visible;
  }
  .pmc-color-index .pmc-color-index-table,
  .pmc-color-index .pmc-color-index-table tbody,
  .pmc-color-index .pmc-color-index-table tr,
  .pmc-color-index .pmc-color-index-table td{
    display:block;
    width:100%;
    min-width:0;
  }
  .pmc-color-index .pmc-color-index-table{
    min-width:0;
  }
  .pmc-color-index .pmc-color-index-table thead{
    display:none;
  }
  .pmc-color-index .pmc-color-index-table tbody tr{
    padding:var(--pmc-sp-2) 0;
    border-bottom:1px solid var(--pmc-border);
  }
  .pmc-color-index .pmc-color-index-table tbody tr:last-child{
    border-bottom:0;
  }
  .pmc-color-index .pmc-color-index-table td{
    min-height:var(--pmc-h-ctl-lg);
    display:grid;
    grid-template-columns:calc(var(--pmc-h-row) * 3.2) minmax(0,1fr);
    align-items:center;
    gap:var(--pmc-sp-2);
    padding:var(--pmc-sp-2) var(--pmc-sp-3);
    border:0;
    background:transparent;
  }
  .pmc-color-index .pmc-color-index-table td::before{
    content:attr(data-label);
    color:var(--pmc-text-3);
    font-size:var(--pmc-fs-xs);
    font-weight:600;
  }
  .pmc-color-index .pmc-color-index-constant,
  .pmc-color-index .pmc-color-index-description{
    min-width:0;
  }
}
@media (max-width:640px){
  .pmc-color-index .pmc-page-head .pmc-actions{
    width:100%;
  }
  .pmc-color-index .pmc-color-index-type-card .pmc-card-head{
    align-items:flex-start;
  }
  .pmc-color-index .pmc-color-index-types{
    padding-inline:var(--pmc-sp-2);
  }
  .pmc-color-index .pmc-color-index-types a{
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
    padding-inline:var(--pmc-sp-3);
  }
  .pmc-color-index .pmc-color-index-table-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .pmc-color-index .pmc-color-index-table td{
    grid-template-columns:calc(var(--pmc-h-row) * 3) minmax(0,1fr);
  }
  .pmc-color-index .pmc-color-index-submit{
    align-items:stretch;
    flex-direction:column;
  }
  .pmc-color-index .pmc-color-index-submit .pmc-btn{
    width:100%;
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Cluster/history (#3353)
   Lecteur Light de l'historique de topologie charge frame par frame.
   -------------------------------------------------------------------------- */
#page:has(.pmc-cluster-history) > #glial-title{
  display:none;
}
.pmc-cluster-history{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.pmc-cluster-history .pmc-page-head .pmc-actions{
  align-items:center;
}
.pmc-cluster-history .pmc-cluster-history-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pmc-sp-4);
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  background:var(--pmc-surface);
  box-shadow:var(--pmc-shadow-sm);
}
.pmc-cluster-history .pmc-cluster-history-context-node{
  min-width:0;
}
.pmc-cluster-history .pmc-cluster-history-server-menu{
  flex:none;
}
.pmc-cluster-history .pmc-cluster-history-filter{
  flex:1;
}
.pmc-cluster-history .pmc-cluster-history-menu-actions,
.pmc-cluster-history .pmc-cluster-history-filter-form{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  flex-wrap:wrap;
}
.pmc-cluster-history .pmc-cluster-history-filter-form{
  justify-content:flex-end;
}
.pmc-cluster-history .pmc-cluster-history-filter-form .pmc-select{
  width:auto;
  min-width:calc(var(--pmc-h-row) * 4);
}
.pmc-cluster-history .pmc-cluster-history-player{
  min-width:0;
  display:grid;
  grid-template-columns:calc(var(--pmc-h-row) * 6) minmax(0,1fr);
  gap:var(--pmc-sp-4);
  align-items:stretch;
}
.pmc-cluster-history .pmc-cluster-history-controls,
.pmc-cluster-history .pmc-cluster-history-stage{
  min-width:0;
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-cluster-history .pmc-cluster-history-controls{
  display:flex;
  flex-direction:column;
}
.pmc-cluster-history .pmc-cluster-history-controls .pmc-card-head{
  justify-content:space-between;
}
.pmc-cluster-history .pmc-cluster-history-controls .pmc-card-head > div{
  min-width:0;
  display:grid;
  gap:var(--pmc-sp-1);
}
.pmc-cluster-history .pmc-cluster-history-position{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
}
.pmc-cluster-history .pmc-cluster-history-controls-body{
  flex:1;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:var(--pmc-sp-4);
}
.pmc-cluster-history .pmc-cluster-history-control-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--pmc-sp-2);
}
.pmc-cluster-history .pmc-cluster-history-control-grid .pmc-btn{
  width:100%;
}
.pmc-cluster-history .pmc-cluster-history-frame-label{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:var(--pmc-sp-2);
  margin:0;
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-sm);
  font-weight:600;
}
.pmc-cluster-history .pmc-cluster-history-frame-list{
  min-height:calc(var(--pmc-h-row) * 8);
  height:100%;
  padding:var(--pmc-sp-2);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
}
.pmc-cluster-history .pmc-cluster-history-frame-list option{
  padding:var(--pmc-sp-2);
}
.pmc-cluster-history .pmc-cluster-history-stage{
  display:flex;
  flex-direction:column;
}
.pmc-cluster-history .pmc-cluster-history-stage[aria-busy="true"]{
  cursor:progress;
}
.pmc-cluster-history .pmc-cluster-history-stage-head{
  min-height:var(--pmc-h-ctl-lg);
  justify-content:space-between;
  gap:var(--pmc-sp-3);
  flex-wrap:wrap;
}
.pmc-cluster-history .pmc-cluster-history-date{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
}
.pmc-cluster-history .pmc-cluster-history-stage-body{
  flex:1;
  min-height:calc(var(--pmc-h-row) * 12);
  display:grid;
  padding:0;
  background:var(--pmc-surface-alt);
}
.pmc-cluster-history .pmc-cluster-history-canvas{
  min-width:0;
  min-height:100%;
  display:grid;
  place-items:center;
  overflow:auto;
}
.pmc-cluster-history .pmc-cluster-history-svg{
  width:100%;
  min-width:0;
}
.pmc-cluster-history .pmc-cluster-history-svg > svg{
  display:block;
  width:100%;
  height:auto;
}
.pmc-cluster-history .pmc-cluster-history-empty{
  align-self:center;
  width:calc(100% - (var(--pmc-sp-6) * 2));
}
.pmc-cluster-history .pmc-cluster-history-hint{
  margin:0;
}
@media (max-width:1024px){
  .pmc-cluster-history .pmc-cluster-history-context{
    align-items:stretch;
    flex-direction:column;
  }
  .pmc-cluster-history .pmc-cluster-history-context-node{
    width:100%;
  }
  .pmc-cluster-history .pmc-cluster-history-filter-form{
    justify-content:flex-start;
  }
  .pmc-cluster-history .pmc-cluster-history-player{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-cluster-history .pmc-cluster-history-controls-body{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto;
  }
  .pmc-cluster-history .pmc-cluster-history-frame-list{
    min-height:calc(var(--pmc-h-row) * 4);
    max-height:calc(var(--pmc-h-row) * 6);
  }
  .pmc-cluster-history .pmc-cluster-history-stage-body{
    min-height:calc(var(--pmc-h-row) * 9);
  }
}
@media (max-width:640px){
  .pmc-cluster-history .pmc-cluster-history-menu-actions,
  .pmc-cluster-history .pmc-cluster-history-filter-form{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-cluster-history .pmc-cluster-history-menu-actions .pmc-btn,
  .pmc-cluster-history .pmc-cluster-history-filter-form .pmc-btn,
  .pmc-cluster-history .pmc-cluster-history-filter-form .pmc-select,
  .pmc-cluster-history .pmc-cluster-history-filter-form .pmc-ssel{
    width:100%;
  }
  .pmc-cluster-history .pmc-cluster-history-controls-body{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-cluster-history .pmc-cluster-history-control-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .pmc-cluster-history .pmc-cluster-history-control-grid .pmc-btn{
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-cluster-history .pmc-cluster-history-stage-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .pmc-cluster-history .pmc-cluster-history-stage-body{
    min-height:calc(var(--pmc-h-row) * 7);
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Cluster/replay (#3355)
   Fragment Light de sélection de période dans le lecteur d'historique.
   -------------------------------------------------------------------------- */
.pmc-cluster-replay{
  width:100%;
  min-width:0;
}
.pmc-cluster-replay .pmc-cluster-replay-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)) auto;
  align-items:end;
  gap:var(--pmc-sp-3);
  width:100%;
  margin:0;
}
.pmc-cluster-replay .pmc-field{
  min-width:0;
  margin:0;
}
.pmc-cluster-replay .pmc-select,
.pmc-cluster-replay .pmc-ssel{
  width:100%;
  min-width:0;
}
.pmc-cluster-replay .pmc-cluster-replay-action{
  display:flex;
  align-items:flex-end;
}
.pmc-cluster-replay .pmc-cluster-replay-action .pmc-btn{
  min-width:calc(var(--pmc-h-row) * 3);
}
@media (max-width:640px){
  .pmc-cluster-replay .pmc-cluster-replay-form{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-cluster-replay .pmc-cluster-replay-action,
  .pmc-cluster-replay .pmc-cluster-replay-action .pmc-btn{
    width:100%;
  }
  .pmc-cluster-replay .pmc-cluster-replay-action .pmc-btn{
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Cluster/viewDot (#3360)
   Espace Light pour édition DOT, import JSON et aperçu Graphviz.
   -------------------------------------------------------------------------- */
#page:has(.pmc-cluster-view-dot) > #glial-title{
  display:none;
}
.pmc-cluster-view-dot{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.pmc-cluster-view-dot .pmc-page-head .pmc-actions{
  align-items:center;
  flex-wrap:wrap;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-context{
  min-width:0;
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  box-shadow:var(--pmc-shadow-sm);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-server-menu{
  min-width:0;
  display:grid;
  gap:var(--pmc-sp-2);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-server-menu .pmc-ssel,
.pmc-cluster-view-dot .pmc-cluster-view-dot-server-menu .pmc-select-srv{
  width:100%;
  max-width:calc(var(--pmc-h-row) * 14);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-menu-actions{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-1);
  flex-wrap:wrap;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-menu-actions .pmc-btn{
  flex:none;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-snapshot{
  min-width:0;
  overflow:hidden;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-snapshot-head{
  min-height:var(--pmc-h-ctl-lg);
  justify-content:space-between;
  flex-wrap:wrap;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-snapshot-head > div{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:var(--pmc-sp-2);
  flex-wrap:wrap;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-snapshot-head > div > span{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-snapshot-body{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--pmc-sp-4);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-meta{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  flex-wrap:wrap;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-chip{
  min-width:0;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  padding:var(--pmc-sp-1) var(--pmc-sp-2);
  border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-full);
  background:var(--pmc-surface-alt);
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-xs);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-chip strong{
  color:var(--pmc-text);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-chip > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--pmc-sp-2);
  flex-wrap:wrap;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-import{
  min-width:0;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-import > .pmc-card{
  min-width:0;
  overflow:hidden;
  border-color:var(--pmc-warn-border);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-dropzone{
  min-width:0;
  padding:var(--pmc-sp-4);
  border:calc(var(--pmc-sp-1) / 2) dashed var(--pmc-border-strong);
  border-radius:var(--pmc-r-md);
  background:var(--pmc-surface-alt);
  transition:
    border-color var(--pmc-transition),
    background var(--pmc-transition),
    box-shadow var(--pmc-transition);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-dropzone.pmc-active{
  border-color:var(--pmc-primary);
  background:var(--pmc-primary-soft);
  box-shadow:var(--pmc-shadow-sm);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-dropzone-hint{
  margin:0 0 var(--pmc-sp-3);
  color:var(--pmc-text-2);
  font-size:var(--pmc-fs-sm);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-dropzone-hint strong{
  color:var(--pmc-text);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-import-grid{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(calc(var(--pmc-h-row) * 8),.7fr) minmax(0,1.3fr);
  gap:var(--pmc-sp-4);
  align-items:start;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-import-grid .pmc-field{
  margin:0;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-import-grid .pmc-input[type="file"]{
  height:auto;
  min-height:var(--pmc-h-ctl-lg);
  padding:var(--pmc-sp-2) var(--pmc-sp-3);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-import-grid .pmc-textarea{
  min-height:calc(var(--pmc-h-row) * 5);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-import-actions{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  flex-wrap:wrap;
  margin-top:var(--pmc-sp-3);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-graph-picker{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:var(--pmc-sp-3);
  margin-top:var(--pmc-sp-4);
  padding-top:var(--pmc-sp-4);
  border-top:1px solid var(--pmc-border);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-graph-picker .pmc-field{
  margin:0;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-error-stack{
  min-width:0;
  display:grid;
  gap:var(--pmc-sp-2);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-error-stack:empty{
  display:none;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-error-card{
  min-width:0;
  margin:0;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-error-content{
  min-width:0;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-error-body{
  margin-top:var(--pmc-sp-1);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-workspace{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--pmc-sp-4);
  align-items:stretch;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-panel{
  min-width:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  box-shadow:var(--pmc-shadow-md);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-panel-head{
  min-height:var(--pmc-h-ctl-lg);
  justify-content:space-between;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-panel-head > span{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
  text-transform:uppercase;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-editor-body,
.pmc-cluster-view-dot .pmc-cluster-view-dot-editor-body form{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-editor-body form{
  flex:1 1 auto;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-code-shell{
  min-width:0;
  min-height:calc(var(--pmc-h-row) * 14);
  height:calc(100vh - (var(--pmc-h-row) * 8));
  max-height:calc(var(--pmc-h-row) * 22);
  display:flex;
  overflow:hidden;
  background:var(--pmc-surface);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-editor,
.pmc-cluster-view-dot .CodeMirror{
  width:100%;
  height:100%;
  min-height:100%;
  border:0;
  color:var(--pmc-text);
  background:var(--pmc-surface);
  font-family:var(--pmc-font-mono);
  font-size:var(--pmc-fs-xs);
  line-height:var(--pmc-lh);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-editor{
  padding:var(--pmc-sp-3);
  resize:none;
}
.pmc-cluster-view-dot .CodeMirror{
  flex:1 1 auto;
}
.pmc-cluster-view-dot .CodeMirror-sizer,
.pmc-cluster-view-dot .CodeMirror-scroll,
.pmc-cluster-view-dot .CodeMirror-code{
  min-height:100%;
}
.pmc-cluster-view-dot .CodeMirror-gutters{
  background:var(--pmc-surface-alt);
  border-right:1px solid var(--pmc-border);
}
.pmc-cluster-view-dot .CodeMirror-lines{
  background:var(--pmc-surface);
}
.pmc-cluster-view-dot .CodeMirror-activeline-background{
  background:var(--pmc-primary-soft);
}
.pmc-cluster-view-dot .CodeMirror-linenumber{
  color:var(--pmc-text-3);
}
.pmc-cluster-view-dot .CodeMirror-cursor{
  border-left-color:var(--pmc-text);
}
.pmc-cluster-view-dot .CodeMirror-selected,
.pmc-cluster-view-dot .CodeMirror-focused .CodeMirror-selected,
.pmc-cluster-view-dot .CodeMirror-line::selection,
.pmc-cluster-view-dot .CodeMirror-line > span::selection,
.pmc-cluster-view-dot .CodeMirror-line > span > span::selection,
.pmc-cluster-view-dot .CodeMirror-line::-moz-selection,
.pmc-cluster-view-dot .CodeMirror-line > span::-moz-selection,
.pmc-cluster-view-dot .CodeMirror-line > span > span::-moz-selection{
  background:var(--pmc-primary-soft);
}
.pmc-cluster-view-dot .CodeMirror,
.pmc-cluster-view-dot .CodeMirror-scroll{
  scrollbar-color:var(--pmc-border-strong) var(--pmc-surface-alt);
}
.pmc-cluster-view-dot .CodeMirror-scroll::-webkit-scrollbar{
  width:var(--pmc-sp-3);
  height:var(--pmc-sp-3);
}
.pmc-cluster-view-dot .CodeMirror-scroll::-webkit-scrollbar-track,
.pmc-cluster-view-dot .CodeMirror-scroll::-webkit-scrollbar-corner,
.pmc-cluster-view-dot .CodeMirror::-webkit-scrollbar-corner,
.pmc-cluster-view-dot .CodeMirror-scrollbar-filler,
.pmc-cluster-view-dot .CodeMirror-gutter-filler{
  background:var(--pmc-surface-alt);
}
.pmc-cluster-view-dot .CodeMirror-scroll::-webkit-scrollbar-thumb{
  background:var(--pmc-border-strong);
  border-radius:var(--pmc-r-full);
  border:var(--pmc-sp-1) solid var(--pmc-surface-alt);
}
.pmc-cluster-view-dot .cm-dot-keyword{
  color:var(--pmc-sql-kw);
  font-weight:700;
}
.pmc-cluster-view-dot .cm-dot-attr{
  color:var(--pmc-chart-5);
}
.pmc-cluster-view-dot .cm-dot-string{
  color:var(--pmc-sql-str);
}
.pmc-cluster-view-dot .cm-dot-number{
  color:var(--pmc-sql-num);
}
.pmc-cluster-view-dot .cm-dot-comment{
  color:var(--pmc-text-3);
}
.pmc-cluster-view-dot .cm-dot-operator{
  color:var(--pmc-crit);
}
.pmc-cluster-view-dot .cm-dot-brace{
  color:var(--pmc-sql-fn);
}
.pmc-cluster-view-dot .cm-dot-id{
  color:var(--pmc-text);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-fallback-actions{
  display:flex;
  justify-content:flex-end;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-preview{
  min-width:0;
  min-height:calc(var(--pmc-h-row) * 14);
  height:calc(100vh - (var(--pmc-h-row) * 8));
  max-height:calc(var(--pmc-h-row) * 22);
  overflow:auto;
  padding:var(--pmc-sp-4);
  background:var(--pmc-surface-alt);
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-preview > svg{
  display:block;
  max-width:none;
  height:auto;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-preview .graphviz{
  min-width:max-content;
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-empty{
  border-color:var(--pmc-info-border);
  background:var(--pmc-info-soft);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-empty .pmc-card-body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pmc-sp-5);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-empty strong{
  display:block;
  color:var(--pmc-info);
  font-size:var(--pmc-fs-md);
}
.pmc-cluster-view-dot .pmc-cluster-view-dot-empty p{
  margin:var(--pmc-sp-2) 0 0;
  color:var(--pmc-text-2);
}
@media (max-width:1280px){
  .pmc-cluster-view-dot .pmc-cluster-view-dot-snapshot-body{
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-actions{
    justify-content:flex-start;
  }
}
@media (max-width:1024px){
  .pmc-cluster-view-dot .pmc-cluster-view-dot-workspace{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-code-shell,
  .pmc-cluster-view-dot .pmc-cluster-view-dot-preview{
    min-height:calc(var(--pmc-h-row) * 11);
    height:calc(var(--pmc-h-row) * 14);
    max-height:calc(var(--pmc-h-row) * 18);
  }
}
@media (max-width:640px){
  .pmc-cluster-view-dot .pmc-page-head .pmc-actions,
  .pmc-cluster-view-dot .pmc-page-head .pmc-actions .pmc-btn{
    width:100%;
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-context,
  .pmc-cluster-view-dot .pmc-cluster-view-dot-snapshot-body,
  .pmc-cluster-view-dot .pmc-cluster-view-dot-import .pmc-card-body{
    padding:var(--pmc-sp-3);
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-server-menu .pmc-ssel,
  .pmc-cluster-view-dot .pmc-cluster-view-dot-server-menu .pmc-select-srv{
    max-width:none;
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-menu-actions{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:var(--pmc-sp-1);
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-menu-actions .pmc-btn{
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-snapshot-head{
    align-items:flex-start;
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-actions .pmc-btn{
    min-width:0;
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-import-grid,
  .pmc-cluster-view-dot .pmc-cluster-view-dot-graph-picker{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-import-actions .pmc-btn,
  .pmc-cluster-view-dot .pmc-cluster-view-dot-graph-picker .pmc-btn{
    width:100%;
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-code-shell,
  .pmc-cluster-view-dot .pmc-cluster-view-dot-preview{
    min-height:calc(var(--pmc-h-row) * 10);
    height:calc(var(--pmc-h-row) * 12);
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-preview{
    padding:var(--pmc-sp-3);
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-empty .pmc-card-body{
    align-items:stretch;
    flex-direction:column;
  }
  .pmc-cluster-view-dot .pmc-cluster-view-dot-empty .pmc-btn{
    width:100%;
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — StorageArea/listStorage (#3176)
   Barre de capacite empilee et legende decorative, limitees a cet ecran.
   -------------------------------------------------------------------------- */
.pmc-storage-area-list-storage .pmc-sa-capacity{
  display:flex;
  align-items:stretch;
  width:100%;
}
.pmc-storage-area-list-storage .pmc-sa-capacity > .pmc-sa-capacity-segment{
  flex:0 0 auto;
  min-width:0;
  height:100%;
  border-radius:0;
}
.pmc-storage-area-list-storage .pmc-sa-capacity > .pmc-sa-capacity-other{
  background:var(--pmc-ok);
}
.pmc-storage-area-list-storage .pmc-sa-capacity > .pmc-sa-capacity-backup{
  background:var(--pmc-warn);
}
.pmc-storage-area-list-storage .pmc-sa-legend{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  flex-wrap:wrap;
}
.pmc-storage-area-list-storage .pmc-sa-legend-swatch{
  display:inline-block;
  flex:none;
  width:calc(var(--pmc-sp-4) + var(--pmc-sp-2));
  height:var(--pmc-sp-2);
  border-radius:var(--pmc-r-full);
  background:var(--pmc-warn);
}


/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Cluster/svg (#3357)
   Topologie Light avec contexte compact et espace SVG défilable.
   -------------------------------------------------------------------------- */
#page:has(.pmc-cluster-svg) > #glial-title{
  display:none;
}
.pmc-cluster-svg{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.pmc-cluster-svg .pmc-page-head .pmc-actions{
  align-items:center;
  flex-wrap:wrap;
}
.pmc-cluster-svg .pmc-cluster-svg-context{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(calc(var(--pmc-h-row) * 14),.85fr);
  align-items:center;
  gap:var(--pmc-sp-4);
  padding:var(--pmc-sp-3) var(--pmc-sp-4);
  box-shadow:var(--pmc-shadow-sm);
}
.pmc-cluster-svg .pmc-cluster-svg-context-node{
  min-width:0;
}
.pmc-cluster-svg .pmc-cluster-svg-server-menu{
  display:grid;
  gap:var(--pmc-sp-2);
}
.pmc-cluster-svg .pmc-cluster-svg-server-menu .pmc-ssel,
.pmc-cluster-svg .pmc-cluster-svg-server-menu .pmc-select-srv{
  width:100%;
  max-width:calc(var(--pmc-h-row) * 14);
}
.pmc-cluster-svg .pmc-cluster-svg-menu-actions{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-1);
  flex-wrap:wrap;
}
.pmc-cluster-svg .pmc-cluster-svg-menu-actions .pmc-btn{
  flex:none;
}
.pmc-cluster-svg .pmc-cluster-svg-card{
  min-width:0;
  overflow:hidden;
  box-shadow:var(--pmc-shadow-md);
}
.pmc-cluster-svg .pmc-cluster-svg-card-head{
  min-height:var(--pmc-h-ctl-lg);
  justify-content:space-between;
  flex-wrap:wrap;
}
.pmc-cluster-svg .pmc-cluster-svg-card-head > div{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:var(--pmc-sp-2);
  flex-wrap:wrap;
}
.pmc-cluster-svg .pmc-cluster-svg-card-meta{
  color:var(--pmc-grad-head-muted);
  font-size:var(--pmc-fs-xs);
  font-weight:400;
}
.pmc-cluster-svg .pmc-cluster-svg-workspace{
  min-width:0;
  display:grid;
  grid-template-columns:calc(var(--pmc-h-row) * 10) minmax(0,1fr);
  background:var(--pmc-surface-alt);
}
.pmc-cluster-svg .pmc-cluster-svg-legend{
  min-width:0;
  max-height:calc(var(--pmc-h-row) * 18);
  overflow:auto;
  padding:var(--pmc-sp-4);
  background:var(--pmc-surface);
  border-right:1px solid var(--pmc-border);
}
.pmc-cluster-svg .pmc-cluster-svg-legend > *,
.pmc-cluster-svg .pmc-cluster-svg-legend svg,
.pmc-cluster-svg .pmc-cluster-svg-legend img{
  max-width:100%;
}
.pmc-cluster-svg .pmc-cluster-svg-legend svg,
.pmc-cluster-svg .pmc-cluster-svg-legend img{
  display:block;
  height:auto;
}
.pmc-cluster-svg .pmc-cluster-svg-viewport{
  min-width:0;
  width:100%;
  min-height:calc(var(--pmc-h-row) * 12);
  height:calc(100vh - (var(--pmc-h-row) * 8));
  max-height:calc(var(--pmc-h-row) * 26);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  background-color:var(--pmc-surface-alt);
  background-image:url('../image/main/bg.png');
  background-repeat:repeat;
}
.pmc-cluster-svg .pmc-cluster-svg-graph{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  width:max-content;
  min-width:100%;
  min-height:100%;
  padding:var(--pmc-sp-4);
}
.pmc-cluster-svg .pmc-cluster-svg-graph > svg{
  display:block;
  flex:none;
  max-width:none;
}
.pmc-cluster-svg .pmc-cluster-svg-empty{
  border-color:var(--pmc-info-border);
  background:var(--pmc-info-soft);
  box-shadow:var(--pmc-shadow-sm);
}
.pmc-cluster-svg .pmc-cluster-svg-empty .pmc-card-body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pmc-sp-5);
}
.pmc-cluster-svg .pmc-cluster-svg-empty strong{
  display:block;
  color:var(--pmc-info);
  font-size:var(--pmc-fs-md);
}
.pmc-cluster-svg .pmc-cluster-svg-empty p{
  max-width:calc(var(--pmc-h-row) * 22);
  margin:var(--pmc-sp-2) 0 0;
  color:var(--pmc-text-2);
}
.pmc-cluster-svg .pmc-cluster-svg-empty-actions{
  display:flex;
  align-items:center;
  gap:var(--pmc-sp-2);
  flex:none;
}
@media (max-width:1280px){
  .pmc-cluster-svg .pmc-cluster-svg-context{
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
  }
}
@media (max-width:1024px){
  .pmc-cluster-svg .pmc-cluster-svg-workspace{
    grid-template-columns:minmax(0,1fr);
  }
  .pmc-cluster-svg .pmc-cluster-svg-legend{
    max-height:calc(var(--pmc-h-row) * 8);
    border-right:0;
    border-bottom:1px solid var(--pmc-border);
  }
  .pmc-cluster-svg .pmc-cluster-svg-viewport{
    height:calc(100vh - (var(--pmc-h-row) * 6));
    max-height:calc(var(--pmc-h-row) * 20);
  }
}
@media (max-width:640px){
  .pmc-cluster-svg .pmc-page-head .pmc-actions,
  .pmc-cluster-svg .pmc-page-head .pmc-actions .pmc-btn{
    width:100%;
  }
  .pmc-cluster-svg .pmc-cluster-svg-context{
    padding:var(--pmc-sp-3);
  }
  .pmc-cluster-svg .pmc-cluster-svg-server-menu .pmc-ssel,
  .pmc-cluster-svg .pmc-cluster-svg-server-menu .pmc-select-srv{
    max-width:none;
  }
  .pmc-cluster-svg .pmc-cluster-svg-menu-actions{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:var(--pmc-sp-1);
  }
  .pmc-cluster-svg .pmc-cluster-svg-menu-actions .pmc-btn{
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
  .pmc-cluster-svg .pmc-cluster-svg-card-head{
    align-items:flex-start;
  }
  .pmc-cluster-svg .pmc-cluster-svg-legend{
    max-height:calc(var(--pmc-h-row) * 12);
    padding:var(--pmc-sp-3);
  }
  .pmc-cluster-svg .pmc-cluster-svg-viewport{
    min-height:calc(var(--pmc-h-row) * 12);
    height:calc(var(--pmc-h-row) * 14);
  }
  .pmc-cluster-svg .pmc-cluster-svg-graph{
    padding:var(--pmc-sp-3);
  }
  .pmc-cluster-svg .pmc-cluster-svg-empty .pmc-card-body{
    align-items:stretch;
    flex-direction:column;
  }
  .pmc-cluster-svg .pmc-cluster-svg-empty-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }
  .pmc-cluster-svg .pmc-cluster-svg-empty-actions .pmc-btn{
    width:100%;
    min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Pmm dashboards (Pmm/index, system, innodb, …, #3053)
   -------------------------------------------------------------------------- */
.pmc-pmm-toolbar{ display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap; }
.pmc-pmm-toolbar label{ font-size:var(--pmc-fs-sm); font-weight:600; margin:0; }

/* Shared MysqlServer sub-menu chrome (#3053 / epic #4027) — rendered on both
   legacy and pmc- screens, so it must style itself outside `.pmc-app`. */
.pmc-server-menu-toolbar{ margin:var(--pmc-sp-3) 0; }
.pmc-server-menu-toolbar .pmc-card-body{ display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap; }
.pmc-server-menu-toolbar label{ font-size:var(--pmc-fs-sm); font-weight:600; margin:0; }
.pmc-server-menu{ margin-bottom:var(--pmc-sp-4); }
.pmc-pmm-range{ display:flex; align-items:flex-end; gap:var(--pmc-sp-3); flex-wrap:wrap; }
.pmc-pmm-range .pmc-field{ margin-bottom:0; }
.pmc-pmm-range .pmc-help{ align-self:center; }
.pmc-app a.pmc-pmm-stat-link{ display:block; color:inherit; text-decoration:none; }
.pmc-app a.pmc-pmm-stat-link:hover{
  border-color:var(--pmc-primary); box-shadow:var(--pmc-shadow-lg);
  color:inherit; text-decoration:none;
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Server/id (time-series graph explorer, #3053)
   -------------------------------------------------------------------------- */
.pmc-srv-id-filter{ display:flex; align-items:flex-end; gap:var(--pmc-sp-3); flex-wrap:wrap; }
.pmc-srv-id-filter .pmc-field{ margin-bottom:0; }
.pmc-srv-id-chart{ position:relative; min-width:0; height:calc(var(--pmc-h-row) * 14); }
.pmc-srv-id-chart canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; }
@media (max-width:768px){
  .pmc-srv-id-chart{ height:calc(var(--pmc-h-row) * 10); }
}
.pmc-pmm-section-desc{ font-weight:400; color:var(--pmc-grad-head-muted); }
/* Titre de tableau posé dans le pmc-card-head (#5586) : typographie de l'en-tête. */
.pmc-app .pmc-card-head .pmc-pmm-table-title{ margin:0; font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit; }
.pmc-pmm-chart-block + .pmc-pmm-chart-block{ margin-top:var(--pmc-sp-4); }
.pmc-pmm-chart-head{ margin-bottom:var(--pmc-sp-2); }
.pmc-pmm-chart-meta{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-3); margin-top:var(--pmc-sp-1); }
.pmc-pmm-chart{ position:relative; min-width:0; height:calc(var(--pmc-h-row) * 10); }
.pmc-pmm-chart canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; }
.pmc-tbl td.pmc-pmm-empty-cell{ color:var(--pmc-text-3); text-align:center; padding:var(--pmc-sp-3); }
.pmc-pmm-notes{ margin:0; padding-left:var(--pmc-sp-4); }
@media (max-width:768px){
  .pmc-pmm-chart{ height:calc(var(--pmc-h-row) * 8); }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Server/passwd (copy-password fragment, #3053)
   -------------------------------------------------------------------------- */
/* Zone hors ecran du repli execCommand de [data-pmc-copy] (design-system.js). */
.pmc-copy-ghost{ position:fixed; left:-9999px; top:0; }
.pmc-copy{ cursor:pointer; }
.pmc-copy svg{ width:14px; height:14px; vertical-align:-2px; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Server/index (index usage, #3053)
   -------------------------------------------------------------------------- */
.pmc-tbl td.pmc-srv-idx-usage{ min-width:calc(var(--pmc-h-row) * 4); }
/* #5287 : badge d'environnement + nom sur une ligne (la colonne ne se replie plus). */
.pmc-tbl td.pmc-srv-idx-server .pmc-flex{ flex-wrap:nowrap; white-space:nowrap; gap:var(--pmc-sp-2); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Server/statistics (per-server statement rates, #5321)
   -------------------------------------------------------------------------- */
/* Badge d'environnement + nom sur une ligne ; la ligne Total vit dans <tfoot> (reste en bas au tri). */
.pmc-tbl td.pmc-srv-stat-server .pmc-flex{ flex-wrap:nowrap; white-space:nowrap; gap:var(--pmc-sp-2); }
.pmc-tbl tfoot tr.pmc-srv-stat-total{ background:var(--pmc-primary-soft); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Server/hardware (SSH hardware inventory, #3053)
   -------------------------------------------------------------------------- */
.pmc-srv-hw-server{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-2); white-space:nowrap;
}
.pmc-tbl img.pmc-srv-hw-os{ width:var(--pmc-sp-4); height:var(--pmc-sp-4); vertical-align:middle; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Server/database (databases per server, #3053)
   -------------------------------------------------------------------------- */
.pmc-tbl td.pmc-srv-db-ok{ background:var(--pmc-ok-soft); }
.pmc-tbl td.pmc-srv-db-crit{ background:var(--pmc-crit-soft); color:var(--pmc-crit); font-weight:600; }
.pmc-srv-db-designer{
  margin-right:var(--pmc-sp-1);
  vertical-align:middle;
}
.pmc-srv-db-designer svg{
  width:var(--pmc-sp-4);
  height:var(--pmc-sp-4);
}
@media (max-width:768px){
  .pmc-srv-db-designer{
    width:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
    min-width:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
    height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
    min-height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1));
  }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Server/memory (MySQL memory sizing, #3053)
   -------------------------------------------------------------------------- */
/* #5295 : identité serveur sur une ligne (la colonne ne se replie plus caractère par caractère). */
.pmc-tbl td.pmc-srv-mem-server .pmc-server-identity{ flex-wrap:nowrap; white-space:nowrap; }
.pmc-tbl td.pmc-srv-mem-server .pmc-server-identity-name{ overflow-wrap:normal; }
.pmc-tbl td.pmc-srv-mem-over{ background:var(--pmc-crit-soft); color:var(--pmc-crit); font-weight:600; }
.pmc-tbl td.pmc-srv-mem-over-hard{ background:var(--pmc-crit); color:var(--pmc-surface); font-weight:600; }
.pmc-tbl td.pmc-srv-mem-na{ background:var(--pmc-info-soft); color:var(--pmc-info); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Daemon/index (daemon controls and compact paths, #3697 / #3698 / #3981)
   -------------------------------------------------------------------------- */
.pmc-daemon-index .pmc-daemon-index-row-actions{
  display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:nowrap;
  width:max-content; white-space:nowrap;
}
.pmc-daemon-index .pmc-daemon-index-row-actions > *{ flex:none; }
.pmc-daemon-index .pmc-daemon-enabled-toggle{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-2);
  margin:0; white-space:nowrap; cursor:pointer;
}
.pmc-daemon-index .pmc-daemon-enabled-toggle input{ margin:0; }
.pmc-daemon-index .pmc-daemon-start-tip{ border:0; }
.pmc-daemon-index .pmc-daemon-start-tip::after{ content:none; }
.pmc-daemon-index .pmc-daemon-index-path{
  width:calc(var(--pmc-h-ctl) * 10);
  max-width:calc(var(--pmc-h-ctl) * 10);
}
.pmc-daemon-index .pmc-daemon-index-path-tip{
  display:block; max-width:100%;
}
.pmc-daemon-index .pmc-daemon-index-path-value{
  display:block; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Table/mpd (modèle physique de données, #3184)
   Le SVG Graphviz est rendu sans fond (Graphviz::removeBackground) : le
   quadrillage du conteneur est ce que l'on voit derrière le graphe. Il
   remplace la tuile legacy `image/main/bg.png` (5 px, #eee + lignes #fff)
   portée par l'ancienne classe `.mpd`, ici redessinée en tokens pour rester
   lisible dans les 3 thèmes.
   -------------------------------------------------------------------------- */
.pmc-table-mpd .pmc-table-mpd-graph{
  --pmc-mpd-grid-cell:5px;
  width:max-content;
  min-width:100%;
  background-color:var(--pmc-surface-alt);
  background-image:
    repeating-linear-gradient(
      to right,
      var(--pmc-mpd-grid-line) 0 1px,
      transparent 1px var(--pmc-mpd-grid-cell)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--pmc-mpd-grid-line) 0 1px,
      transparent 1px var(--pmc-mpd-grid-cell)
    );
}
.pmc-table-mpd .pmc-table-mpd-graph > svg{
  display:block;
  max-width:none;
}
/* MysqlDatabase/mpd (#3053) : hôte de Table/mpd — pas de seconde marge `pmc-wrap`,
   aide sur l'inférence des relations en `pmc-hint` (paragraphes et conventions). */
.pmc-app.pmc-mysqldatabase-mpd .pmc-app > .pmc-wrap{ padding:0; }
.pmc-app .pmc-md-mpd-hint{ padding:var(--pmc-sp-3) var(--pmc-sp-4); }
.pmc-app .pmc-md-mpd-hint p{ margin:0 0 var(--pmc-sp-2); }
.pmc-app .pmc-md-mpd-hint p:last-child{ margin-bottom:0; }
.pmc-app .pmc-md-mpd-conventions{ margin:0 0 var(--pmc-sp-2); padding-left:var(--pmc-sp-5); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Job/index (#3053, issue #3791)
   Liste des jobs : visionneuses log/erreur bornées (contrat #580 : ~10
   lignes × 1000 px, défilement sur les deux axes), pretty-print JSON des
   paramètres, pile d'actions de relance et barre de progression du poller
   AJAX (js/Job/index.js). Tokens uniquement.
   -------------------------------------------------------------------------- */
/* Les cellules portent des blocs multi-lignes : hauteur libre. */
.pmc-job-index .pmc-tbl td.pmc-job-cell{
  height:auto; padding-top:var(--pmc-sp-2); padding-bottom:var(--pmc-sp-2);
  vertical-align:top;
}
/* Visionneuse log/erreur (compose pmc-log-viewer) : bornes du contrat #580. */
.pmc-job-log{ max-height:14em; max-width:1000px; min-width:220px; }
/* Pretty-print JSON des paramètres : données structurées, fond surface —
   pas une sortie console, donc pas le bandeau sombre de pmc-log-viewer. */
.pmc-job-param{
  margin:0; padding:var(--pmc-sp-2) var(--pmc-sp-3); max-height:14em; max-width:350px;
  overflow:auto; white-space:pre; font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs);
  color:var(--pmc-text-2); background:var(--pmc-surface-alt);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
}
/* Barre de progression du poller : largeur par paliers pmc-bk-fill-*
   partagés avec Backup/Blackhole — le JS change de classe, jamais de
   style inline. */
.pmc-job-progress{ margin-top:var(--pmc-sp-2); min-width:140px; }
/* Pile verticale des relances (Restart / Debug / Restart load only). */
.pmc-job-actions{ display:grid; gap:var(--pmc-sp-1); justify-items:start; margin-top:var(--pmc-sp-2); }
.pmc-job-actions form{ margin:0; }
/* Badge de statut : le libellé vit dans un sous-span dédié pour que le JS
   remplace le texte sans effacer le pmc-dot. Rien à styler ici — contrat
   documenté par data-role="job-status-text". */

/* Palette ANSI émise par AnsiToHtmlConverter(inlineStyles:false) : classes
   ansi_color_* mappées sur des tokens dédiés opaques. Le convertisseur
   représente les variantes brillantes par bold + couleur normale : elles
   doivent donc rester distinctes des huit couleurs normales. Les encres de
   couple garantissent 4.5:1 sur ces aplats, indépendamment du thème. */
.pmc-app .pmc-job-log{
  --pmc-job-ansi-wrapper-bg:transparent;
  --pmc-job-ansi-wrapper-fg:inherit;
}
.pmc-job-log .ansi_color_bg_black{ background:var(--pmc-job-ansi-bg-black); }
.pmc-job-log .ansi_color_bg_red{ background:var(--pmc-job-ansi-bg-red); }
.pmc-job-log .ansi_color_bg_green{ background:var(--pmc-job-ansi-bg-green); }
.pmc-job-log .ansi_color_bg_yellow{ background:var(--pmc-job-ansi-bg-yellow); }
.pmc-job-log .ansi_color_bg_blue{ background:var(--pmc-job-ansi-bg-blue); }
.pmc-job-log .ansi_color_bg_magenta{ background:var(--pmc-job-ansi-bg-magenta); }
.pmc-job-log .ansi_color_bg_cyan{ background:var(--pmc-job-ansi-bg-cyan); }
.pmc-job-log .ansi_color_bg_white{ background:var(--pmc-job-ansi-bg-white); }
.pmc-job-log .ansi_color_bg_brblack{ background:var(--pmc-job-ansi-bg-brblack); }
.pmc-job-log .ansi_color_bg_brred{ background:var(--pmc-job-ansi-bg-brred); }
.pmc-job-log .ansi_color_bg_brgreen{ background:var(--pmc-job-ansi-bg-brgreen); }
.pmc-job-log .ansi_color_bg_bryellow{ background:var(--pmc-job-ansi-bg-bryellow); }
.pmc-job-log .ansi_color_bg_brblue{ background:var(--pmc-job-ansi-bg-brblue); }
.pmc-job-log .ansi_color_bg_brmagenta{ background:var(--pmc-job-ansi-bg-brmagenta); }
.pmc-job-log .ansi_color_bg_brcyan{ background:var(--pmc-job-ansi-bg-brcyan); }
.pmc-job-log .ansi_color_bg_brwhite{ background:var(--pmc-job-ansi-bg-brwhite); }

.pmc-job-log .ansi_color_fg_black{ color:var(--pmc-job-ansi-fg-black); }
.pmc-job-log .ansi_color_fg_red{ color:var(--pmc-job-ansi-fg-red); }
.pmc-job-log .ansi_color_fg_green{ color:var(--pmc-job-ansi-fg-green); }
.pmc-job-log .ansi_color_fg_yellow{ color:var(--pmc-job-ansi-fg-yellow); }
.pmc-job-log .ansi_color_fg_blue{ color:var(--pmc-job-ansi-fg-blue); }
.pmc-job-log .ansi_color_fg_magenta{ color:var(--pmc-job-ansi-fg-magenta); }
.pmc-job-log .ansi_color_fg_cyan{ color:var(--pmc-job-ansi-fg-cyan); }
.pmc-job-log .ansi_color_fg_white{ color:var(--pmc-job-ansi-fg-white); }
.pmc-job-log .ansi_color_fg_brblack{ color:var(--pmc-job-ansi-fg-brblack); }
.pmc-job-log .ansi_color_fg_brred{ color:var(--pmc-job-ansi-fg-brred); }
.pmc-job-log .ansi_color_fg_brgreen{ color:var(--pmc-job-ansi-fg-brgreen); }
.pmc-job-log .ansi_color_fg_bryellow{ color:var(--pmc-job-ansi-fg-bryellow); }
.pmc-job-log .ansi_color_fg_brblue{ color:var(--pmc-job-ansi-fg-brblue); }
.pmc-job-log .ansi_color_fg_brmagenta{ color:var(--pmc-job-ansi-fg-brmagenta); }
.pmc-job-log .ansi_color_fg_brcyan{ color:var(--pmc-job-ansi-fg-brcyan); }
.pmc-job-log .ansi_color_fg_brwhite{ color:var(--pmc-job-ansi-fg-brwhite); }

/* Le convertisseur rend le texte par défaut et les resets avec ce couple
   exact. Les autres couples explicites (dont noir + une autre encre) gardent
   leur fond ; le noir brillant n'est jamais rendu transparent. */
.pmc-job-log > .ansi_color_bg_black.ansi_color_fg_white{
  background:var(--pmc-job-ansi-wrapper-bg);
  color:var(--pmc-job-ansi-wrapper-fg);
}
.pmc-job-log .ansi_color_bg_yellow.ansi_color_fg_white,
.pmc-job-log .ansi_color_bg_white.ansi_color_fg_white,
.pmc-job-log .ansi_color_bg_brgreen.ansi_color_fg_brwhite,
.pmc-job-log .ansi_color_bg_bryellow.ansi_color_fg_brwhite,
.pmc-job-log .ansi_color_bg_brcyan.ansi_color_fg_brwhite,
.pmc-job-log .ansi_color_bg_brwhite.ansi_color_fg_brwhite{
  color:var(--pmc-job-ansi-ink-deep);
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Cve/index (#4118, épique #4101 / #3053)
   Inventaire CVE du plugin : KPI `pmc-stat` cliquables (gravité active en
   `pmc-active`), carte de filtres (recherche, tri et produits en pilules),
   table des CVE. Réutilise les chips serveurs `pmc-cv-server` et les badges
   de gravité / palette produit `pmc-cv-*` de MysqlServer/cve. La couleur
   produit stockée en base n'est plus injectée en `style=` : palette
   catégorielle à tokens. Préfixe `pmc-cve-` — vérifié sans collision.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-cve-kpis{ grid-template-columns:repeat(auto-fit,minmax(calc(var(--pmc-h-row) * 5),1fr)); }
.pmc-app a.pmc-cve-kpi{
  color:var(--pmc-text); text-decoration:none;
  transition:border-color var(--pmc-transition), box-shadow var(--pmc-transition);
}
.pmc-app a.pmc-cve-kpi:hover{
  text-decoration:none; border-color:var(--pmc-border-strong); box-shadow:var(--pmc-shadow-md);
}
.pmc-app a.pmc-cve-kpi:focus-visible{
  text-decoration:none; border-color:var(--pmc-primary);
  box-shadow:0 0 0 var(--pmc-focus-ring-width) var(--pmc-focus-ring);
}
.pmc-app a.pmc-cve-kpi.pmc-active{
  border-color:var(--pmc-primary);
  box-shadow:inset 0 0 0 calc(var(--pmc-sp-1) / 2) var(--pmc-primary);
}
.pmc-app a.pmc-cve-kpi.pmc-active:focus-visible{
  box-shadow:
    0 0 0 var(--pmc-focus-ring-width) var(--pmc-focus-ring),
    inset 0 0 0 calc(var(--pmc-sp-1) / 2) var(--pmc-primary);
}
.pmc-app .pmc-cve-search{ flex-wrap:wrap; }
.pmc-app .pmc-cve-search-input{
  flex:1 1 calc(var(--pmc-h-row) * 7.5);
  max-width:calc(var(--pmc-h-row) * 13);
}
.pmc-app .pmc-cve-sort, .pmc-app .pmc-cve-products{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-1);
}
.pmc-app .pmc-cve-sort .pmc-section-label{ margin:0 var(--pmc-sp-1) 0 0; }
.pmc-app a.pmc-cve-pill{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-1);
  padding:var(--pmc-sp-1) var(--pmc-sp-3); border-radius:var(--pmc-r-full);
  background:var(--pmc-surface); border:var(--pmc-border-width) solid var(--pmc-border);
  color:var(--pmc-text); font-size:var(--pmc-fs-sm); font-weight:600; text-decoration:none;
}
.pmc-app a.pmc-cve-pill:hover, .pmc-app a.pmc-cve-pill:focus-visible{
  background:var(--pmc-primary-soft); text-decoration:none;
}
.pmc-app a.pmc-cve-pill.pmc-active{
  background:var(--pmc-primary); border-color:var(--pmc-primary); color:var(--pmc-on-primary);
}
.pmc-app .pmc-cve-pill .pmc-dot{
  width:var(--pmc-sp-2); height:var(--pmc-sp-2); border-radius:var(--pmc-r-full);
  background:currentColor; color:var(--pmc-text-3);
}
.pmc-app .pmc-cve-pill .pmc-cve-count{ opacity:.7; font-weight:500; }
.pmc-app .pmc-cve-sort-dir{ font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-cve-pill .pmc-cv-c1{ color:var(--pmc-chart-1); }
.pmc-app .pmc-cve-pill .pmc-cv-c2{ color:var(--pmc-chart-2); }
.pmc-app .pmc-cve-pill .pmc-cv-c4{ color:var(--pmc-chart-4); }
.pmc-app .pmc-cve-pill .pmc-cv-c5{ color:var(--pmc-chart-5); }
.pmc-app a.pmc-cve-pill.pmc-active .pmc-dot{ color:var(--pmc-on-primary); }

.pmc-app .pmc-cve-table th.pmc-cve-col-cve{ width:42%; }
.pmc-app .pmc-cve-table th.pmc-cve-col-risk{ width:12%; }
.pmc-app .pmc-cve-table td{ vertical-align:top; }
.pmc-app .pmc-cve-id{ font-weight:700; font-size:var(--pmc-fs-md); }
.pmc-app .pmc-cve-title{
  margin-top:var(--pmc-sp-1); color:var(--pmc-text-2);
  max-width:calc(var(--pmc-h-row) * 20);
}
.pmc-app .pmc-cve-meta{ margin-top:var(--pmc-sp-1); color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-cve-servers{ margin-top:var(--pmc-sp-2); }
.pmc-app .pmc-cve-sev{
  min-width:calc(var(--pmc-h-row) * 2.25); justify-content:center; text-transform:uppercase;
}
.pmc-app .pmc-cve-score{ margin:var(--pmc-sp-1) 0; color:var(--pmc-text-2); font-weight:700; font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-cve-affected{
  display:grid; gap:var(--pmc-sp-2); max-width:calc(var(--pmc-h-row) * 22);
}
.pmc-app .pmc-cve-aff-row{
  border:var(--pmc-border-width) solid var(--pmc-border); border-radius:var(--pmc-r-sm);
  padding:var(--pmc-sp-2); background:var(--pmc-surface-alt); color:var(--pmc-text);
}
.pmc-app a.pmc-cve-product-tag{ text-decoration:none; }
.pmc-app a.pmc-cve-product-tag:hover{ text-decoration:none; filter:brightness(.92); }
.pmc-app .pmc-cve-version{ margin-top:var(--pmc-sp-1); font-size:var(--pmc-fs-sm); word-break:break-word; }
.pmc-app .pmc-cve-fixed{ margin-top:calc(var(--pmc-sp-1) / 2); font-size:var(--pmc-fs-xs); color:var(--pmc-ok); font-weight:700; }
.pmc-app .pmc-cve-source{ margin-top:var(--pmc-sp-1); color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-cve-more{ color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); font-weight:700; padding:var(--pmc-sp-1); }
@media (max-width:1024px){
  .pmc-app .pmc-cve-table thead{ display:none; }
  .pmc-app .pmc-cve-table, .pmc-app .pmc-cve-table tbody,
  .pmc-app .pmc-cve-table tr, .pmc-app .pmc-cve-table td{ display:block; width:100%; }
  .pmc-app .pmc-cve-table td{ height:auto; padding-block:var(--pmc-sp-2); }
  .pmc-app .pmc-cve-table tr{ border-bottom:var(--pmc-border-width) solid var(--pmc-border); }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Cve/show (#4119, épique #4101 / #3053)
   Fiche CVE : bandeau `pmc-page-head` (identifiant + badges de gravité +
   actions), KPI `pmc-stat`, cartes `pmc-card` avec tables clé/valeur,
   serveurs impactés (chips `pmc-cv-server` partagées), plages affectées
   paginées côté client (classe `pmc-hidden`), références en chips
   `pmc-cv-link`, JSON bruts en `<pre>`. Préfixe `pmc-cve-` (famille Cve).
   -------------------------------------------------------------------------- */
.pmc-app .pmc-cve-head{ align-items:flex-start; }
.pmc-app .pmc-cve-head-main{ min-width:0; }
.pmc-app .pmc-cve-head h1.pmc-mono{ font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-2xl); }
.pmc-app .pmc-cve-head-badges{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1); margin-top:var(--pmc-sp-2); }
.pmc-app .pmc-cve-head-title{ margin-top:var(--pmc-sp-2); white-space:pre-wrap; max-width:var(--pmc-cve-detail-title-measure); }
.pmc-app .pmc-cve-head-actions{ flex-wrap:wrap; }
.pmc-app .pmc-cve-text{ line-height:1.55; white-space:pre-wrap; }
/* Libellés clé/valeur en casse normale, texte d'en-tête (Design Lab §7, #5315). */
.pmc-app .pmc-cve-kv th{
  width:var(--pmc-cve-detail-key-column-width); background:var(--pmc-surface-alt); color:var(--pmc-th-text);
  font-size:var(--pmc-fs-xs); text-transform:none; letter-spacing:0; vertical-align:top;
}
.pmc-app .pmc-cve-kv td{ vertical-align:top; word-break:break-word; }
.pmc-app .pmc-cve-ref-list{ margin-top:0; }
.pmc-app .pmc-cve-ref-list .pmc-cv-link{ max-width:100%; overflow-wrap:anywhere; white-space:normal; }
.pmc-app .pmc-cve-details{ margin-top:var(--pmc-sp-2); }
.pmc-app .pmc-cve-details summary{ cursor:pointer; font-weight:700; }
.pmc-app .pmc-cve-raw{
  margin:var(--pmc-sp-2) 0 0; padding:var(--pmc-sp-3); max-height:var(--pmc-cve-detail-raw-max-height); overflow:auto;
  background:var(--pmc-surface-alt); color:var(--pmc-text); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm); font:400 var(--pmc-fs-xs)/1.4 var(--pmc-font-mono); white-space:pre;
}
.pmc-app .pmc-cve-pager{ justify-content:flex-end; gap:var(--pmc-sp-3); }
.pmc-app .pmc-cve-pager-info{ color:var(--pmc-text-3); font-size:var(--pmc-fs-sm); font-weight:600; }
.pmc-app .pmc-cve-json-list{ border-top:1px solid var(--pmc-border); }
.pmc-app .pmc-cve-source-title{
  display:flex; justify-content:space-between; gap:var(--pmc-sp-3); align-items:center; font-weight:700;
}
.pmc-app .pmc-cve-source-table{ margin-bottom:var(--pmc-sp-2); }
@media (max-width:768px){
  .pmc-app .pmc-cve-kv th{ width:40%; }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Dashboard/json (#4121, épique #4101 / #3053)
   Navigateur JSON d'une variable ts : liste de métadonnées, navigation entre
   instantanés et détail borné/paginé d'une seule capture.
   Préfixe `pmc-dj-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-dj-filters{ align-items:flex-end; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-dj-field{ margin-bottom:0; min-width:200px; flex:1 1 200px; }
.pmc-app .pmc-dj-field-date, .pmc-app .pmc-dj-field-time{ flex:0 1 170px; min-width:150px; }
.pmc-app .pmc-dj-submit{ flex:0 0 auto; min-width:0; }
.pmc-app .pmc-card-head .pmc-dj-date{ font-family:var(--pmc-font-mono); font-weight:400; margin-left:var(--pmc-sp-2); }
.pmc-app .pmc-dj-table td{ vertical-align:top; }
.pmc-app .pmc-dj-table td.pmc-dj-info{ min-width:480px; }
/* Les <pre> des cellules (SQL formaté, tableaux print_r) héritent du chrome
   Bootstrap 3 (`pre` : fond gris clair, bordure, padding, marge) tant que
   la feuille legacy est chargée : texte --pmc-text sur fond clair, illisible
   en Dark Ops (#4468). Reset complet, la cellule fournit déjà le padding. */
.pmc-app .pmc-dj-table .pmc-sql{ background:none; border:0; border-radius:0; padding:0; margin:0; }
.pmc-app .pmc-dj-sql{ max-width:420px; }
.pmc-app .pmc-dj-snapshot-nav{ align-items:center; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-dj-selected-date{ text-align:center; overflow-wrap:anywhere; }
@media (max-width:768px){
  .pmc-app .pmc-dj-field, .pmc-app .pmc-dj-field-date, .pmc-app .pmc-dj-field-time{ flex:1 1 100%; }
  .pmc-app .pmc-dj-submit .pmc-btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   FAMILY — Database/* forms (analyze, create, refresh, rename — #4122, #4123,
   #4126, #4127 ; épique #4101 / #3053)
   Un formulaire = une carte : grille de champs, pied avec le bouton d'action.
   Préfixe `pmc-db-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-db-form{ max-width:1100px; }
.pmc-app .pmc-db-form-grid{ align-items:start; }
.pmc-app .pmc-db-form-grid .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-db-form select.pmc-select-srv, .pmc-app .pmc-db-form .pmc-ssel.pmc-select-srv{ max-width:none; }
.pmc-app .pmc-db-form-actions{ justify-content:flex-end; }
.pmc-app .pmc-card-head code{ font-weight:400; }
.pmc-app .pmc-db-create-login{ gap:var(--pmc-sp-1); flex-wrap:nowrap; }
.pmc-app .pmc-db-create-login .pmc-input{ min-width:0; width:auto; flex:1 1 auto; }
/* #4477 : même spécificité que la règle générique ci-dessus (0,3,0) — sinon
   `flex:1 1 auto` gagne et le « @ » s'étire comme le champ utilisateur. */
.pmc-app .pmc-db-create-login .pmc-input.pmc-db-create-at{ flex:0 0 3em; text-align:center; background:var(--pmc-surface-alt); color:var(--pmc-text-2); }
.pmc-app .pmc-db-accounts-list{ list-style:none; margin:0; padding:var(--pmc-sp-3) var(--pmc-sp-4); display:grid; gap:var(--pmc-sp-1); }
.pmc-app .pmc-db-accounts-list code{ display:block; white-space:pre-wrap; word-break:break-word; }
.pmc-app.pmc-database-index .pmc-app > .pmc-wrap{ padding:0; }
.pmc-app.pmc-database-index .pmc-db-index-filter{ min-width:0; }
.pmc-app .pmc-db-rename-switch{ align-self:end; padding-bottom:calc((var(--pmc-h-ctl) - 22px) / 2); }
.pmc-app .pmc-db-size-preview{ display:block; font-family:var(--pmc-font-sans); }
.pmc-app .pmc-db-size-preview text{ font-family:inherit; }
.pmc-app .pmc-db-empty-grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); align-items:start; }
@media (max-width:640px){
  .pmc-app .pmc-db-form-actions .pmc-btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Database/show (#4128, épique #4101 / #3053)
   Explorateur des bases : KPI, barre d'outils (recherche, serveur, taille de
   page, compteur), table triable rendue par le script embarqué (badge
   environnement à tokens, barre de taille `pmc-progress` à paliers),
   pagination. Préfixe `pmc-dbx-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-dbx-toolbar{ flex-wrap:wrap; gap:var(--pmc-sp-2); }
.pmc-app .pmc-dbx-toolbar .pmc-dbx-search{ flex:1 1 260px; max-width:420px; margin-left:0; }
.pmc-app .pmc-dbx-toolbar .pmc-dbx-pagesize{ flex:0 0 auto; }
.pmc-app .pmc-card-head .pmc-dbx-count{ white-space:nowrap; }
.pmc-app .pmc-dbx-scroll{ max-height:70vh; }
.pmc-app .pmc-dbx-table tbody.pmc-dbx-loading{ opacity:.5; }
.pmc-app a.pmc-dbx-db{ font-weight:600; }
/* #4480 : `color:inherit` — au survol de ligne (v1 : fond --pmc-text, cellule
   --pmc-surface) le bouton suit la couleur de la cellule ; une couleur fixe
   rendait le nom du serveur invisible au moment du clic. */
.pmc-app .pmc-dbx-srv{
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
  font:inherit; display:inline-flex; align-items:center; gap:var(--pmc-sp-1);
}
.pmc-app .pmc-dbx-srv:hover .pmc-dbx-srv-name{ text-decoration:underline; }
.pmc-app .pmc-dbx-badge{
  display:inline-block; min-width:18px; text-align:center; padding:1px 5px;
  border-radius:var(--pmc-r-sm); color:var(--pmc-on-primary); font-weight:700; font-size:var(--pmc-fs-xs);
  background:var(--pmc-hm-env-default);
}
.pmc-app .pmc-dbx-badge.pmc-dbx-env-danger{  background:var(--pmc-hm-env-danger); }
.pmc-app .pmc-dbx-badge.pmc-dbx-env-warning{ background:var(--pmc-hm-env-warning); }
.pmc-app .pmc-dbx-badge.pmc-dbx-env-info{    background:var(--pmc-hm-env-info); }
.pmc-app .pmc-dbx-badge.pmc-dbx-env-success{ background:var(--pmc-hm-env-success); }
.pmc-app .pmc-dbx-badge.pmc-dbx-env-primary{ background:var(--pmc-hm-env-primary); }
.pmc-app .pmc-dbx-mini{ color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-dbx-sizebar{ display:flex; align-items:center; gap:var(--pmc-sp-2); justify-content:flex-end; }
.pmc-app .pmc-progress.pmc-dbx-bar{ width:60px; height:6px; flex:0 0 auto; }
.pmc-app .pmc-dbx-pager{ gap:var(--pmc-sp-2); flex-wrap:wrap; }
.pmc-app .pmc-dbx-pageinfo{ color:var(--pmc-text-3); font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-dbx-filter{ min-width:0; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Detail/graph (#4130, épique #4101 / #3053)
   Graphique Chart.js + légende : le canvas est dimensionné par son conteneur
   (plus d'attribut style, `maintainAspectRatio:false` côté contrôleur), la
   légende défile dans sa propre zone et la série isolée par le script du
   contrôleur atténue les autres lignes (`fadeout`).
   Préfixe `pmc-dg-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-dg-grid{ grid-template-columns:minmax(0,3fr) minmax(240px,1fr); align-items:stretch; gap:0; }
.pmc-app .pmc-dg-chart{ padding:var(--pmc-sp-3); min-width:0; }
.pmc-app .pmc-dg-chart-wrap{ position:relative; width:100%; height:420px; min-height:200px; }
.pmc-app .pmc-dg-chart-wrap canvas{ width:100% !important; height:100% !important; }
.pmc-app .pmc-dg-legend{ max-height:452px; border-left:1px solid var(--pmc-border); }
.pmc-app .pmc-dg-swatch{ vertical-align:middle; margin-right:var(--pmc-sp-1); }
/* #4483 : bascule de serie = bouton natif (Entree/Espace), rendu comme un
   lien ; sur une ligne survolee, la couleur suit le token --pmc-row-hover-link. */
.pmc-app .pmc-dg-alias{
  display:inline; margin:0; padding:0; border:0; background:none; font:inherit;
  color:var(--pmc-primary); cursor:pointer; text-align:start; border-radius:var(--pmc-r-sm);
}
.pmc-app .pmc-dg-alias:hover{ color:var(--pmc-primary-hover); text-decoration:underline; }
.pmc-app .pmc-dg-alias:focus-visible{ outline:none; box-shadow:0 0 0 var(--pmc-focus-ring-width) var(--pmc-focus-ring); }
.pmc-app .pmc-dg-alias[aria-pressed="true"]{ font-weight:600; }
.pmc-app .pmc-tbl tbody tr:hover:not(.pmc-selected-row) td .pmc-dg-alias{ color:var(--pmc-row-hover-link); }
.pmc-app .pmc-dg-legend tr.fadeout{ opacity:.4; }
.pmc-app .pmc-dg-legend tr.fadeout .pmc-dg-alias{ text-decoration:line-through; }
@media (max-width:1024px){
  .pmc-app .pmc-dg-grid{ grid-template-columns:minmax(0,1fr); }
  .pmc-app .pmc-dg-legend{ border-left:0; border-top:1px solid var(--pmc-border); max-height:320px; }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Detail/index (#4131, épique #4101 / #3053)
   Barre de filtres (client/environnement + serveur) et onglets statiques.
   Préfixe `pmc-di-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-di-filters{ flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-4); }
.pmc-app .pmc-di-server-form{ align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap; }
.pmc-app .pmc-di-label{ margin:0; font-size:var(--pmc-fs-sm); font-weight:600; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — DigestReport/index (#4132, épique #4101 / #3053)
   Planifications de rapports digest : bandeau avec commande cron, table des
   planifications (formulaires inline Enable/Disable) et formulaire de
   création. Préfixe `pmc-dr-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-dr-head{ align-items:flex-start; }
.pmc-app .pmc-dr-cron{ max-width:min(100%,520px); min-width:0; }
.pmc-app .pmc-page-head code.pmc-dr-command{
  display:block; margin-top:var(--pmc-sp-1); padding:var(--pmc-sp-2) var(--pmc-sp-3);
  font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); word-break:break-all; white-space:normal;
}
.pmc-app .pmc-dr-table td{ vertical-align:top; }
.pmc-app .pmc-dr-inline-form{ display:inline; }
.pmc-app .pmc-dr-form-grid{ align-items:end; }
.pmc-app .pmc-dr-form-grid .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-dr-active{ padding-bottom:calc((var(--pmc-h-ctl) - 22px) / 2); }
.pmc-app .pmc-dr-actions{ justify-content:flex-end; }

/* --------------------------------------------------------------------------
   FAMILY — Docker/* (index, list, server, imageAvailable, addContainer —
   #4133 à #4137 ; épique #4101 / #3053)
   Préfixe `pmc-dc-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-dc-table td{ vertical-align:middle; }
.pmc-app .pmc-dc-table .pmc-select, .pmc-app .pmc-dc-table .pmc-input{ min-width:calc(var(--pmc-h-ctl) * 4); }
.pmc-app .pmc-dc-col-actions{ width:calc(var(--pmc-h-ctl) * 2); }
.pmc-app .pmc-dc-actions{ text-align:center; }
.pmc-app .pmc-dc-foot{ flex-wrap:wrap; gap:var(--pmc-sp-2); }
.pmc-app .pmc-dc-foot .pmc-dc-submit{ margin-left:auto; }
.pmc-app .pmc-dc-host-head{ flex-wrap:wrap; }
.pmc-app .pmc-dc-head-title{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.pmc-app .pmc-card-head .pmc-dc-head-actions{ margin-left:auto; display:flex; gap:var(--pmc-sp-1); }
.pmc-app .pmc-badge.pmc-dc-fam-c1{ color:var(--pmc-chart-1); }
.pmc-app .pmc-badge.pmc-dc-fam-c2{ color:var(--pmc-chart-2); }
.pmc-app .pmc-badge.pmc-dc-fam-c3{ color:var(--pmc-chart-3); }
.pmc-app .pmc-badge.pmc-dc-fam-c4{ color:var(--pmc-chart-4); }
.pmc-app .pmc-badge.pmc-dc-fam-c5{ color:var(--pmc-chart-5); }
.pmc-app .pmc-badge.pmc-dc-fam-default{ color:var(--pmc-text-2); }
.pmc-app .pmc-badge.pmc-dc-fam-missing{ opacity:.45; }
.pmc-app .pmc-dc-sha{ font-size:var(--pmc-fs-xs); word-break:break-all; }
.pmc-app.pmc-docker-server .pmc-app > .pmc-wrap{ padding:0; }
.pmc-app .pmc-dc-actions-bar{ flex-wrap:wrap; }
.pmc-app .pmc-dc-col-versions{ width:66%; }
.pmc-app dl.pmc-dc-kv{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--pmc-sp-1) var(--pmc-sp-4); margin:0; }
.pmc-app .pmc-dc-kv dt{ font-weight:600; color:var(--pmc-text-2); }
.pmc-app .pmc-dc-kv dd{ margin:0; min-width:0; word-break:break-word; }
.pmc-app .pmc-dc-versions{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1); }
.pmc-app .pmc-dc-icon{ width:var(--pmc-fs-lg); height:var(--pmc-fs-lg); vertical-align:calc(-1 * var(--pmc-sp-1)); }

/* --------------------------------------------------------------------------
   FAMILY — Environment/* (add, index — #4138 / #4139 ; épique #4101 / #3053)
   Formulaire d'ajout et table éditable des environnements (éditeur PMC natif
   `[data-pmc-inline-edit]`, composant partagé — rien à redéfinir ici) ;
   badge d'environnement sur les tokens `--pmc-hm-env-*` (classe Bootstrap
   stockée en base : default/primary/success/info/warning/danger).
   Préfixe `pmc-env-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-env-form{ max-width:900px; }
.pmc-app .pmc-env-form-grid{ align-items:start; }
.pmc-app .pmc-env-form-grid .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-env-actions{ justify-content:flex-end; }
.pmc-app .pmc-env-badge{
  display:inline-block; padding:2px 8px; border-radius:var(--pmc-r-sm);
  color:var(--pmc-on-primary); font-weight:700; font-size:var(--pmc-fs-xs);
  background:var(--pmc-hm-env-default);
}
.pmc-app .pmc-env-badge.pmc-env-primary{ background:var(--pmc-hm-env-primary); }
.pmc-app .pmc-env-badge.pmc-env-success{ background:var(--pmc-hm-env-success); }
.pmc-app .pmc-env-badge.pmc-env-info{    background:var(--pmc-hm-env-info); }
.pmc-app .pmc-env-badge.pmc-env-warning{ background:var(--pmc-hm-env-warning); }
.pmc-app .pmc-env-badge.pmc-env-danger{  background:var(--pmc-hm-env-danger); }
.pmc-app .pmc-env-actions-bar{ flex-wrap:wrap; }
.pmc-app .pmc-env-col-sm{ width:10%; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Error/index (#4146, épique #4101 / #3053)
   Journal des erreurs PHP : tables à colonnes bornées (message et
   emplacement césurés), niveau en badge. Préfixe `pmc-err-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-card-head code.pmc-err-file{ font-weight:400; margin:0 var(--pmc-sp-2); }
.pmc-app .pmc-err-table{ table-layout:fixed; }
.pmc-app .pmc-err-col-level{ width:110px; }
.pmc-app .pmc-err-col-msg{ width:45%; }
.pmc-app .pmc-err-col-loc{ width:32%; }
.pmc-app .pmc-err-col-count{ width:80px; }
.pmc-app .pmc-err-col-seen{ width:180px; }
.pmc-app .pmc-err-msg{ word-break:break-word; white-space:normal; }
.pmc-app .pmc-err-loc{ word-break:break-all; white-space:normal; }
/* Horodatage PHP avec fuseau (`21-Aug-2026 08:02:51 Europe/Paris`, ~250 px en
   mono) : on lève le `nowrap` de `.pmc-tbl .pmc-mono` pour qu'il se replie
   dans la colonne fixe au lieu de la déborder. */
.pmc-app .pmc-err-seen{ display:inline-block; white-space:normal; overflow-wrap:anywhere; }

/* --------------------------------------------------------------------------
   FAMILY — Export/* (index, import_conf, test_dechiffrement — #4148 à #4150 ;
   épique #4101 / #3053). Préfixe `pmc-exp-` — vérifié sans collision.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-exp-table td{ vertical-align:top; }
/* Le `pre` Bootstrap 3 global garde un fond/bordure clairs : en Dark Ops le
   texte `--pmc-text` de `.pmc-sql` y devenait illisible (~1.13:1). Surface
   sur tokens, les trois thèmes restent lisibles. */
.pmc-app .pmc-exp-json{
  margin:0; max-height:320px; overflow:auto;
  color:var(--pmc-text); background:var(--pmc-surface-alt);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm); padding:var(--pmc-sp-3);
}
.pmc-app .pmc-exp-grid{ align-items:start; }
.pmc-app .pmc-exp-form .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-exp-actions{ justify-content:space-between; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap; }
.pmc-app .pmc-exp-warning{ color:var(--pmc-text-2); font-size:var(--pmc-fs-sm); }
/* Même surface sur tokens pour le résultat déchiffré (#4150) : le `pre`
   Bootstrap global gardait fond clair + bordure sous le texte `--pmc-text`. */
.pmc-app .pmc-exp-result{
  margin:0; color:var(--pmc-text); background:var(--pmc-surface-alt);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm); padding:var(--pmc-sp-3);
}

/* --------------------------------------------------------------------------
   FAMILY — ForeignKey/* (add, fill, menu, real, settingPrefix, virtual —
   #4151 à #4156 ; épique #4101 / #3053)
   Formulaires-cartes, tables de clés étrangères avec actions POST inline,
   barre d'onglets-boutons. Préfixe `pmc-fk-` — vérifié sans collision.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-fk-form{ max-width:1100px; }
.pmc-app .pmc-fk-form-grid{ align-items:start; }
.pmc-app .pmc-fk-form-grid .pmc-field{ margin-bottom:0; }
/* Le sélecteur serveur partagé est plafonné à 300 px (`pmc-select-srv`) : dans la
   grille à trois colonnes il doit remplir sa piste comme les champs voisins,
   en natif comme en `pmc-ssel` (#4500). */
.pmc-app .pmc-fk-form select.pmc-select-srv, .pmc-app .pmc-fk-form .pmc-ssel.pmc-select-srv{ max-width:none; }
.pmc-app .pmc-fk-actions{ justify-content:flex-end; }
.pmc-app .pmc-fk-inline-form{ display:inline-block; margin:0 var(--pmc-sp-1) 0 0; }
.pmc-app .pmc-fk-toolbar{ flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-3); }
.pmc-app .pmc-fk-toolbar > *{ min-width:0; }
.pmc-app .pmc-fk-table td{ vertical-align:middle; white-space:nowrap; }
.pmc-app .pmc-fk-table td.pmc-fk-ops{ white-space:normal; }
.pmc-app .pmc-fk-intro code{ display:inline-block; margin:var(--pmc-sp-1) 0; }
.pmc-fk-menu{ display:inline-flex; flex-wrap:wrap; }
.pmc-app .pmc-fk-toolbar-form{ margin-left:auto; }
/* MysqlDatabase/foreignKey (#3053) : hôte de la sous-vue ForeignKey/virtual, dont la
   coquille `pmc-app > pmc-wrap` ne doit pas ajouter une seconde marge. */
.pmc-app.pmc-mysqldatabase-foreignkey .pmc-app > .pmc-wrap{ padding:0; }
.pmc-fk-menu .pmc-btn.pmc-active{ background:var(--pmc-primary); border-color:var(--pmc-primary); color:var(--pmc-on-primary); pointer-events:none; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Mysql/playskool (#3053)
   Formulaire de script multi-bases : grille de cases à cocher (remplace les
   `ul.col` flottantes), requête mono haute, liste des commandes générées.
   Préfixe `pmc-play-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-play-credentials{ max-width:calc(var(--pmc-h-ctl) * 20); }
.pmc-app .pmc-play-dbs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--pmc-h-ctl) * 6)),1fr));
  column-gap:var(--pmc-sp-4);
}
.pmc-app .pmc-play-dbs .pmc-check{ min-width:0; min-height:calc(var(--pmc-h-row) + var(--pmc-sp-2)); overflow-wrap:anywhere; }
.pmc-app .pmc-play-dbs .pmc-check input{ margin:0; flex:none; }
.pmc-app .pmc-play-sql{ min-height:calc(var(--pmc-h-row) * 9); }
.pmc-app .pmc-play-actions{ justify-content:flex-end; }
.pmc-app .pmc-play-commands{ margin:0; padding-left:var(--pmc-sp-5); display:grid; gap:var(--pmc-sp-1); }
.pmc-app .pmc-play-commands code{ white-space:pre-wrap; word-break:break-word; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Format/index (#4157, épique #4101 / #3053)
   Formateur SQL : zone de saisie mono et résultat en <pre>. Préfixe `pmc-fmt-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-fmt-form .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-fmt-form .pmc-textarea{ min-height:140px; resize:vertical; }
.pmc-app .pmc-fmt-actions{ justify-content:flex-end; }
.pmc-app .pmc-fmt-result{
  margin:0; max-height:none; overflow:visible; overflow-wrap:anywhere;
  background:var(--pmc-surface-alt); border:1px solid var(--pmc-border);
  border-radius:var(--pmc-r-sm); padding:var(--pmc-sp-3);
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — GaleraCluster/index (#4158, épique #4101 / #3053)
   Une carte-table par cluster (tri client Lab §7, #5270), UUID et adresses
   entrantes. États : liseré générique `pmc-row-crit/warn`, pas de fond de ligne.
   Préfixe `pmc-gc-` — vérifié sans collision.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-gc-table td{ white-space:nowrap; vertical-align:top; }
.pmc-app .pmc-gc-table td.pmc-gc-node{ white-space:normal; }
.pmc-app .pmc-gc-reported-host{ display:block; margin-top:var(--pmc-sp-1); color:inherit; font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-gc-cluster-size{ font-weight:400; }
.pmc-app .pmc-gc-uuid{ font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-gc-addresses{ margin:0; padding-left:var(--pmc-sp-4); }
.pmc-app .pmc-gc-shared-incoming .pmc-gc-addresses{ display:inline-flex; flex-wrap:wrap; gap:var(--pmc-sp-1) var(--pmc-sp-3); padding:0; list-style:none; vertical-align:top; }

/* --------------------------------------------------------------------------
   FAMILY — Graph/* (agregate, index — #4159 / #4160 ; épique #4101 / #3053)
   Barres de filtres GET et zone de graphique. Préfixe `pmc-gr-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-gr-form{ align-items:flex-end; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-gr-form .pmc-field{ margin-bottom:0; min-width:220px; }
.pmc-app .pmc-gr-form select.pmc-select-srv, .pmc-app .pmc-gr-form .pmc-ssel.pmc-select-srv{ max-width:none; }
.pmc-app .pmc-gr-filters{ flex-wrap:wrap; align-items:flex-end; gap:var(--pmc-sp-4); }
.pmc-app .pmc-gr-inline-form .pmc-field{ min-width:0; }
.pmc-app .pmc-gr-chart-wrap{ position:relative; width:100%; height:450px; }
.pmc-app .pmc-gr-chart-wrap canvas{ width:100% !important; height:100% !important; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Group/index (#4161, épique #4101 / #3053)
   Rôles ACL : listes de règles et export d'héritage. Préfixe `pmc-grp-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-grp-table td{ vertical-align:top; }
.pmc-app .pmc-grp-rules{ margin:0; padding-left:var(--pmc-sp-4); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-grp-ops{ white-space:nowrap; }
.pmc-app .pmc-grp-export{ margin:0; max-height:50vh; overflow:auto; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — InnoDBCluster/index (#4164, épique #4101 / #3053)
   Clusters Group Replication : grille de nœuds dans la carte, métadonnées
   clé/valeur, configuration repliable. Préfixe `pmc-gr-` (famille Graph/…
   utilise `pmc-gr-form`/`pmc-gr-chart-*` ; ici `pmc-gr-cluster|node|config`).
   -------------------------------------------------------------------------- */
.pmc-app .pmc-gr-nodes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:0; }
.pmc-app .pmc-gr-node{ border-right:1px solid var(--pmc-border); border-bottom:1px solid var(--pmc-border); padding:var(--pmc-sp-3) var(--pmc-sp-4); min-width:0; }
.pmc-app .pmc-gr-node:hover{ background:var(--pmc-surface-alt); }
.pmc-app .pmc-gr-node-head{ display:flex; align-items:center; gap:var(--pmc-sp-2); margin-bottom:var(--pmc-sp-2); flex-wrap:wrap; }
.pmc-app .pmc-gr-node-name{ font-weight:700; min-width:0; overflow-wrap:anywhere; }
.pmc-app .pmc-gr-node-role{ margin-left:auto; text-transform:uppercase; letter-spacing:.04em; }
.pmc-app .pmc-gr-node-meta{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:2px var(--pmc-sp-3); margin:0; font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-gr-node-meta dt{ color:var(--pmc-text-3); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.pmc-app .pmc-gr-node-meta dd{ margin:0; font-family:var(--pmc-font-mono); word-break:break-all; }
.pmc-app .pmc-gr-node-error{ margin-top:var(--pmc-sp-2); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-gr-metadata-alert{ margin:var(--pmc-sp-3) var(--pmc-sp-4); }
.pmc-app .pmc-gr-config{ padding:var(--pmc-sp-3) var(--pmc-sp-4); border-top:1px solid var(--pmc-border); background:var(--pmc-surface-alt); }
.pmc-app .pmc-gr-config summary{ cursor:pointer; }
.pmc-app .pmc-gr-config-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:2px var(--pmc-sp-4); margin:var(--pmc-sp-2) 0 0; font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-gr-config-grid dt{ color:var(--pmc-text-3); }
.pmc-app .pmc-gr-config-grid dd{ margin:0; font-family:var(--pmc-font-mono); word-break:break-all; }
.pmc-app .pmc-gr-recovery{ padding:var(--pmc-sp-3) var(--pmc-sp-4); border-top:1px solid var(--pmc-border); }
.pmc-app .pmc-gr-recovery summary{ cursor:pointer; }
.pmc-app .pmc-gr-recovery-note{ margin:var(--pmc-sp-2) 0; color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-gr-recovery-member{ padding:var(--pmc-sp-3) 0; border-top:1px dashed var(--pmc-border); }
.pmc-app .pmc-gr-recovery-checks{ list-style:none; margin:0 0 var(--pmc-sp-2); padding:0; display:grid; gap:4px; font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-gr-recovery-steps{ margin:0; padding-left:var(--pmc-sp-4); display:grid; gap:var(--pmc-sp-2); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-gr-recovery-steps .pmc-sql{
  margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere;
  color:var(--pmc-text); background:var(--pmc-surface-alt); border-color:var(--pmc-border);
}
/* #1046 — Online DDL : constats et matrice par algorithme dans le repli de cluster. */
.pmc-app .pmc-gr-ddl-check{ margin:var(--pmc-sp-2) 0 0; font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-gr-ddl-table{ margin-top:var(--pmc-sp-2); }
/* #1002 — ClusterSet / réplication asynchrone autour du groupe */
.pmc-app .pmc-gr-async{ padding:var(--pmc-sp-3) var(--pmc-sp-4); border-top:1px solid var(--pmc-border); }
.pmc-app .pmc-gr-async-note{ margin:var(--pmc-sp-1) 0 var(--pmc-sp-2); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — HostStat/index (#4163, épique #4101 / #3053)
   Ressources de la machine : trois graphiques Chart.js et une légende
   cliquable construite en DOM. Préfixe `pmc-hs-` — vérifié sans collision.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-hs-chart{ position:relative; width:100%; height:240px; }
.pmc-app .pmc-hs-chart canvas{ width:100% !important; height:100% !important; }
.pmc-app .pmc-hs-note{ margin:0; }
.pmc-app .pmc-hs-legend{ font-size:var(--pmc-fs-xs); line-height:1.8; display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1) var(--pmc-sp-3); }
.pmc-app .pmc-hs-legend-item{ white-space:nowrap; cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:4px; }
.pmc-app .pmc-hs-legend-item.pmc-hs-hidden{ opacity:.4; text-decoration:line-through; }
.pmc-app .pmc-hs-swatch{ width:10px; height:10px; flex:0 0 auto; }

/* --------------------------------------------------------------------------
   FAMILY — Kpi/* (index, aspirateur, daemon, flapping, process, router,
   server — #4165 à #4171 ; épique #4101 / #3053)
   Tableaux de bord KPI : bandeau `pmc-page-head`, KPI `pmc-stat`, cartes
   `pmc-card` à tables denses, pilules d'état en `pmc-badge`, barres à
   paliers `pmc-progress`, zones de graphique à hauteur fixe. Remplace les
   sept blocs de style embarqués (préfixes kd-/kr-/kf-/kp-/ks-).
   Préfixe `pmc-kpi-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-kpi-head{ align-items:flex-start; }
.pmc-app .pmc-kpi-head h1{ font-size:var(--pmc-fs-xl); overflow-wrap:anywhere; }
.pmc-app .pmc-kpi-head .pmc-meta{ overflow-wrap:anywhere; }
.pmc-app .pmc-kpi-actions{ flex-wrap:wrap; align-items:center; }
.pmc-app .pmc-kpi-actions form{ margin:0; }
.pmc-app .pmc-page-head .pmc-kpi-live{ align-self:center; }
.pmc-app .pmc-kpi-grid .pmc-stat{ min-height:84px; }
.pmc-app .pmc-kpi-grid .pmc-value{ font-size:var(--pmc-fs-lg); overflow-wrap:anywhere; }
.pmc-app .pmc-kpi-grid-1{ grid-template-columns:minmax(0,1fr); }
.pmc-app .pmc-kpi-events{ display:grid; grid-template-columns:minmax(180px,260px) minmax(0,1fr); gap:var(--pmc-sp-3); align-items:start; }
.pmc-app .pmc-kpi-event-list{ list-style:none; padding:0; margin:0; }
.pmc-app .pmc-kpi-event-list li{ border-bottom:1px solid var(--pmc-border); padding:var(--pmc-sp-2) 0; }
.pmc-app .pmc-kpi-event-list li:last-child{ border-bottom:0; }
.pmc-app .pmc-kpi-event-type{ font-weight:700; }
.pmc-app .pmc-kpi-muted{ color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-kpi-note{ margin-top:var(--pmc-sp-2); }
.pmc-app .pmc-kpi-table td{ vertical-align:top; }
.pmc-app .pmc-kpi-table th{ white-space:nowrap; }
.pmc-app .pmc-kpi-table .pmc-kpi-pill{ white-space:nowrap; }
.pmc-app .pmc-badge.pmc-kpi-pill{ min-width:64px; justify-content:center; text-transform:uppercase; }
.pmc-app .pmc-kpi-code{ font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); white-space:pre-wrap; word-break:break-word; max-width:520px; }
.pmc-app .pmc-kpi-event-items{ margin:0; padding-left:var(--pmc-sp-4); }
.pmc-app .pmc-kpi-event-items li{ margin-bottom:var(--pmc-sp-1); }
.pmc-app .pmc-progress.pmc-kpi-bar{ width:140px; height:8px; }
.pmc-app .pmc-kpi-chart-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pmc-sp-3); }
.pmc-app .pmc-kpi-top-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--pmc-sp-3); }
.pmc-app .pmc-kpi-chart-wrap{ position:relative; width:100%; height:180px; }
.pmc-app .pmc-kpi-chart-wrap.pmc-kpi-chart-tall{ height:260px; }
.pmc-app .pmc-kpi-chart-wrap canvas{ width:100% !important; height:100% !important; }
.pmc-app .pmc-kpi-pre{ margin:0; }
/* Clé/valeur vertical (Kpi/process « Context ») : libellés en casse normale, sans barre
   d'en-tête du §14 (Design Lab §7, #5270). */
.pmc-app .pmc-kpi-kv th[scope="row"]{ width:220px; background:var(--pmc-surface-alt); color:var(--pmc-text-2); font-size:var(--pmc-fs-xs); text-transform:none; box-shadow:none; border-bottom:1px solid var(--pmc-border); vertical-align:top; }
@media (max-width:1200px){
  .pmc-app .pmc-kpi-top-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  .pmc-app .pmc-kpi-chart-grid, .pmc-app .pmc-kpi-events{ grid-template-columns:minmax(0,1fr); }
}

/* --------------------------------------------------------------------------
   FAMILY — License/* (expired, index — #4173 / #4174 ; épique #4101 / #3053)
   Préfixe `pmc-lic-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-lic-card{ max-width:900px; margin:0 auto; }
.pmc-app .pmc-lic-card p{ margin:0; }
.pmc-app .pmc-lic-actions{ flex-wrap:wrap; }
.pmc-app .pmc-lic-head h1 .pmc-lic-state{ vertical-align:middle; margin-left:var(--pmc-sp-2); }
.pmc-app .pmc-lic-grid{ align-items:start; }
/* Colonne des libellés : largeur via un token local (jamais de taille en dur
   dans la règle), réduite en mobile pour laisser la place aux valeurs longues
   (UUID, e-mail) au lieu de les écraser sur quelques caractères par ligne. */
.pmc-app .pmc-lic-kv{ --pmc-lic-key-w:200px; }
.pmc-app .pmc-lic-kv th{ width:var(--pmc-lic-key-w); background:var(--pmc-surface-alt); color:var(--pmc-text-2); font-size:var(--pmc-fs-xs); vertical-align:top; }
.pmc-app .pmc-lic-kv td{ word-break:break-word; }
@media (max-width:640px){
  .pmc-app .pmc-lic-kv{ --pmc-lic-key-w:34%; }
  .pmc-app .pmc-lic-kv th{ white-space:normal; }
}
.pmc-app .pmc-lic-remove{ justify-content:flex-start; }
/* License quota and lifetime share the existing progress and status tokens. */
.pmc-app .pmc-lic-meter{ display:grid; gap:var(--pmc-sp-1); }
.pmc-app .pmc-lic-meter-label{ display:flex; align-items:center; justify-content:space-between; gap:var(--pmc-sp-2); flex-wrap:wrap; }
.pmc-app .pmc-lic-meter .pmc-progress{ width:100%; }
.pmc-app .pmc-lic-meter .pmc-hint{ margin:0; }


/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Listener/status (#4175, épique #4101 / #3053)
   Propriétaire de fichier inattendu signalé en cellule critique. Préfixe `pmc-ls-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-ls-table td.pmc-ls-bad-owner{ background:var(--pmc-crit); color:var(--pmc-on-crit); font-weight:700; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Llm/index (#4176, épique #4101 / #3053). Préfixe `pmc-llm-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-llm-form .pmc-textarea{ min-height:240px; resize:vertical; }
.pmc-app .pmc-llm-form .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-llm-actions{ justify-content:flex-end; }
.pmc-app .pmc-llm-missing{ margin:var(--pmc-sp-2) 0 0; padding-left:var(--pmc-sp-4); }
.pmc-app .pmc-llm-pre{ margin:0; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Log/index (#4177, épique #4101 / #3053). Préfixe `pmc-log-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-log-form .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-log-form select.pmc-select-srv, .pmc-app .pmc-log-form .pmc-ssel.pmc-select-srv{ max-width:none; }
.pmc-app .pmc-log-actions{ justify-content:flex-end; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Logs/index (#4178, épique #4101 / #3053)
   Explorateur de logs : barre de filtres inline, onglets et pagination des
   lignes. Préfixe `pmc-lx-` — vérifié sans collision (pmc-lg- = MysqlServer/logs).
   -------------------------------------------------------------------------- */
.pmc-app .pmc-lx-filters{ align-items:flex-end; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-lx-filters .pmc-field{ margin-bottom:0; min-width:140px; }
.pmc-app .pmc-lx-filters .pmc-lx-date .pmc-input{ width:140px; }
.pmc-app .pmc-lx-filters .pmc-lx-search{ flex:1 1 220px; }
.pmc-app .pmc-lx-filters .pmc-lx-apply{ min-width:0; }
.pmc-app .pmc-lx-panes{ padding-top:var(--pmc-sp-3); }
.pmc-app .pmc-lx-foot{ border-top:0; padding-left:0; padding-right:0; }
.pmc-app .pmc-lx-pre{ white-space:pre-wrap; word-break:break-word; }
/* États rendus par explorer.js (peuplé, vide, tronqué, erreur, stats) :
   tables dans `pmc-table-scroll`, notices en `pmc-alert`, moitiés « stats »
   en grille — aucune classe Bootstrap / Font Awesome injectée. */
.pmc-app .pmc-lx-empty{ color:var(--pmc-text-3); text-align:center; }
.pmc-app .pmc-lx-muted{ color:var(--pmc-text-3); }
.pmc-app .pmc-lx-notice{ margin-top:var(--pmc-sp-3); }
.pmc-app .pmc-lx-stats{ align-items:start; }

/* --------------------------------------------------------------------------
   FAMILY — Mysql/* et Monitoring/explain (#4182 à #4187 ; épique #4101 / #3053)
   Tables d'exploration et formulaire de configuration. Préfixe `pmc-mx-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-mx-table td{ white-space:nowrap; }
.pmc-app .pmc-mx-table td.pmc-mx-wrap{ white-space:normal; word-break:break-word; }
/* #1036 — tables sans clé primaire : proposition de clé primaire invisible à copier. */
.pmc-app .pmc-mx-nopk-intro{ margin:0; padding:var(--pmc-sp-2) var(--pmc-sp-4); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }
.pmc-app .pmc-mx-nopk-ddl{ display:block; font-family:var(--pmc-font-mono); font-size:12px; white-space:pre-wrap; word-break:break-all; user-select:all; }
.pmc-app .pmc-mx-table a.pmc-badge-warn{ color:var(--pmc-warn); text-decoration:none; }
.pmc-app .pmc-mx-nopk-note{ margin-top:var(--pmc-sp-1); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); white-space:normal; }
.pmc-app .pmc-mx-diff{ font-weight:700; color:var(--pmc-warn); }
.pmc-app .pmc-mx-svg{ overflow:auto; }
.pmc-app .pmc-mx-svg > svg{ display:block; max-width:none; height:auto; }
.pmc-app .pmc-card-head .pmc-mx-db-name{ flex:1 1 0; min-width:0; overflow-wrap:anywhere; white-space:normal; word-break:break-word; }
.pmc-app .pmc-mx-chart{ position:relative; height:300px; width:100%; }
.pmc-app .pmc-mx-form-grid{ align-items:end; }
.pmc-app .pmc-mx-form-grid .pmc-field{ margin-bottom:0; min-width:0; }
.pmc-app .pmc-mx-switches{ align-items:center; }
.pmc-app .pmc-mx-ports summary{ min-height:calc(var(--pmc-h-ctl) + var(--pmc-sp-3)); }
.pmc-app .pmc-mx-ports .pmc-mx-form-grid{ margin-top:var(--pmc-sp-2); }
.pmc-app .pmc-mx-form-actions{ justify-content:flex-end; }

/* --------------------------------------------------------------------------
   FAMILY — MysqlDatabase/* (menu, table — #4188 / #4189 ; épique #4101 / #3053 ; tri des tables : contrat commun §14, #5275)
   Préfixe `pmc-md-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-md-menu{ align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap; }
.pmc-md-menu select.pmc-select-auto, .pmc-md-menu .pmc-ssel.pmc-select-auto{ min-width:min(100%, 220px); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlRouter/add (#4190, épique #4101 / #3053). Préfixe `pmc-mr-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-mr-form{ max-width:900px; }
.pmc-app .pmc-mr-grid{ align-items:start; }
.pmc-app .pmc-mr-grid .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-mr-switch{ align-self:end; padding-bottom:calc((var(--pmc-h-ctl) - 22px) / 2); }
.pmc-app .pmc-mr-actions{ justify-content:space-between; }

/* --------------------------------------------------------------------------
   FAMILY — MysqlUser/* (index, security — #4195 / #4196 ; épique #4101 / #3053)
   Préfixe `pmc-mu-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-mu-filter{ align-items:flex-end; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-mu-filter .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-mu-filter select.pmc-select-srv, .pmc-app .pmc-mu-filter .pmc-ssel.pmc-select-srv{ max-width:none; }
.pmc-app .pmc-mu-table td{ vertical-align:top; white-space:nowrap; }
.pmc-app .pmc-mu-table td.pmc-mu-wrap{ white-space:normal; }
.pmc-app .pmc-mu-rights{ margin:0; padding-left:var(--pmc-sp-4); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-mu-pre{ margin:0; max-height:50vh; overflow:auto; }
/* #5289 (Design Lab §7) : plus de fond de ligne selon l'état — liseré pmc-row-crit/warn + badge. */
.pmc-app .pmc-mu-table tr.to_hide.pmc-hidden{ display:none; }
/* #5544 : tableau des comptes de MysqlUser/security en police normale de l'interface — IP, port, rang,
   utilisateur, hôte et mot de passe gardent leur alignement (pmc-num à droite, chiffres tabulaires). */
.pmc-app.pmc-mysqluser-security .pmc-mu-table :is(td,th):is(.pmc-mono,.pmc-num){ font-family:var(--pmc-font-sans); font-size:inherit; }

/* --------------------------------------------------------------------------
   FAMILY — Mysqlsys/* (index, install — #4197 / #4198 ; épique #4101 / #3053)
   Préfixe `pmc-ms-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-ms-script{ margin:0; max-height:600px; overflow:auto; }
.pmc-app .pmc-ms-actions{ justify-content:flex-end; }
/* #5159 — barre de filtres sans retour à la ligne : chaque groupe (client /
   environnement / tag, serveur, actions reset + drop) est insécable ; seul un
   groupe entier passe à la ligne quand la fenêtre est trop étroite, et les
   actions restent calées à droite. Le repli mobile (≤768px) de `.pmc-cef-bar`
   est conservé : le nowrap ne s'applique qu'au-dessus. */
.pmc-app .pmc-ms-filters{ flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-3) var(--pmc-sp-4); }
.pmc-app .pmc-ms-filters > .pmc-cef{ flex:0 1 auto; min-width:0; }
@media (min-width:769px){ .pmc-app .pmc-ms-filters .pmc-cef-bar{ flex-wrap:nowrap; } }
.pmc-app .pmc-ms-filters .pmc-btn{ white-space:nowrap; }
.pmc-app .pmc-ms-server-form{ align-items:center; gap:var(--pmc-sp-2); flex:0 0 auto; flex-wrap:nowrap; }
.pmc-app .pmc-ms-label{ margin:0; font-size:var(--pmc-fs-sm); font-weight:600; white-space:nowrap; }
.pmc-app .pmc-ms-actions-bar{ align-items:center; gap:var(--pmc-sp-3); flex:0 0 auto; flex-wrap:nowrap; margin-left:auto; }
.pmc-app .pmc-ms-drop-form{ align-items:center; gap:var(--pmc-sp-2); flex:0 0 auto; flex-wrap:nowrap; }
.pmc-app .pmc-ms-drop-form .pmc-check{ white-space:nowrap; }
.pmc-app .pmc-ms-confirm{ width:160px; }
/* #5159 — la colonne « Reporting » se dimensionne sur le nom de vue le plus
   long (plafond 320px) ; au-delà, l'entrée reste sur une ligne et se termine
   par une ellipse, le nom complet étant porté par `title`. */
.pmc-app .pmc-ms-layout{ display:grid; grid-template-columns:fit-content(320px) minmax(0,1fr); gap:var(--pmc-sp-4); align-items:start; }
.pmc-app .pmc-ms-nav{ min-width:0; }
.pmc-app .pmc-ms-views{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pmc-app a.pmc-ms-view{ display:block; min-width:0; padding:4px 6px; border-radius:var(--pmc-r-sm); text-decoration:none; color:var(--pmc-text); font-size:var(--pmc-fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmc-app a.pmc-ms-view:hover{ background:var(--pmc-surface-alt); text-decoration:none; }
.pmc-app a.pmc-ms-view.pmc-active{ background:var(--pmc-primary); color:var(--pmc-on-primary); font-weight:700; }
.pmc-app .pmc-ms-table td{ vertical-align:top; }
.pmc-app .pmc-ms-editable{ cursor:text; }
.pmc-app .pmc-ms-query summary{ cursor:pointer; font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-ms-sql{ margin:var(--pmc-sp-1) 0 0; max-width:640px; }
.pmc-app .pmc-ms-ratio{ display:flex; align-items:center; gap:var(--pmc-sp-2); }
.pmc-app .pmc-progress.pmc-ms-bar{ width:100px; height:8px; flex:0 0 auto; }
@media (max-width:1024px){ .pmc-app .pmc-ms-layout{ grid-template-columns:minmax(0,1fr); } }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Percona/displayOsc (#4201, épique #4101 / #3053). Préfixe `pmc-po-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-po-table td{ white-space:nowrap; }
.pmc-app .pmc-po-table tfoot th{ font-weight:700; }

/* --------------------------------------------------------------------------
   FAMILY — PostMortem/* (index, item — #4203 / #4204 ; épique #4101 / #3053)
   Préfixe `pmc-pm-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-pm-canvas{ width:100%; height:450px; display:block; }
.pmc-app .pmc-pm-head{ align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-pm-sub{ color:var(--pmc-text-2); margin-top:2px; }
.pmc-app .pmc-pm-pre{ margin:var(--pmc-sp-2) 0 0; }
.pmc-app .pmc-pm-table th{ white-space:nowrap; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — NdbCluster/index (#4200, épique #4101 / #3053). Préfixe `pmc-ndb-`.
   Rôles : mgmd → warn, data → ok, sql → info (tokens sémantiques, plus de hex).
   -------------------------------------------------------------------------- */
.pmc-app .pmc-ndb{ border:1px solid var(--pmc-border); border-radius:var(--pmc-r-lg); overflow:hidden; background:var(--pmc-surface); }
.pmc-app .pmc-ndb-head{ background:var(--pmc-grad-head); color:var(--pmc-grad-head-text); padding:var(--pmc-sp-4) var(--pmc-sp-5); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-ndb-title{ font-size:var(--pmc-fs-lg); font-weight:700; }
.pmc-app .pmc-ndb-meta{ font-size:var(--pmc-fs-xs); opacity:.85; }
.pmc-app .pmc-ndb-summary{ display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:var(--pmc-sp-3); padding:var(--pmc-sp-4) var(--pmc-sp-5); background:var(--pmc-surface-alt); border-bottom:1px solid var(--pmc-border); }
.pmc-app .pmc-ndb-tile .pmc-value small{ font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); font-weight:500; }
.pmc-app .pmc-ndb-tile.pmc-ndb-mgmd{ border-left:4px solid var(--pmc-warn); }
.pmc-app .pmc-ndb-tile.pmc-ndb-data{ border-left:4px solid var(--pmc-ok); }
.pmc-app .pmc-ndb-tile.pmc-ndb-sql{ border-left:4px solid var(--pmc-info); }
.pmc-app .pmc-ndb-band-head{ padding:var(--pmc-sp-3) var(--pmc-sp-4); font-weight:700; font-size:var(--pmc-fs-sm); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--pmc-border); }
.pmc-app .pmc-ndb-band-head.pmc-ndb-mgmd{ background:var(--pmc-warn-soft); color:var(--pmc-warn); }
.pmc-app .pmc-ndb-band-head.pmc-ndb-data{ background:var(--pmc-ok-soft); color:var(--pmc-ok); }
.pmc-app .pmc-ndb-band-head.pmc-ndb-sql{ background:var(--pmc-info-soft); color:var(--pmc-info); }
.pmc-app .pmc-ndb-nodes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.pmc-app .pmc-ndb-node{ padding:var(--pmc-sp-3) var(--pmc-sp-4); border-right:1px solid var(--pmc-border); border-bottom:1px solid var(--pmc-border); }
.pmc-app .pmc-ndb-node:hover{ background:var(--pmc-surface-alt); }
.pmc-app .pmc-ndb-node-head{ display:flex; align-items:center; gap:var(--pmc-sp-2); margin-bottom:var(--pmc-sp-2); }
.pmc-app .pmc-ndb-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; background:var(--pmc-text-2); }
.pmc-app .pmc-ndb-dot.pmc-ok{ background:var(--pmc-ok); }
.pmc-app .pmc-ndb-dot.pmc-warn{ background:var(--pmc-warn); }
.pmc-app .pmc-ndb-dot.pmc-crit{ background:var(--pmc-crit); }
.pmc-app .pmc-ndb-node-name{ font-size:var(--pmc-fs-md); font-weight:700; }
.pmc-app .pmc-ndb-node-name a{ color:inherit; text-decoration:none; }
.pmc-app .pmc-ndb-node-name a:hover{ color:var(--pmc-info); }
.pmc-app .pmc-ndb-status{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:var(--pmc-r-full); margin-left:auto; background:var(--pmc-surface-alt); color:var(--pmc-text-2); }
.pmc-app .pmc-ndb-status.pmc-ok{ background:var(--pmc-ok-soft); color:var(--pmc-ok); }
.pmc-app .pmc-ndb-status.pmc-warn{ background:var(--pmc-warn-soft); color:var(--pmc-warn); }
.pmc-app .pmc-ndb-status.pmc-crit{ background:var(--pmc-crit-soft); color:var(--pmc-crit); }
.pmc-app .pmc-ndb-dl{ display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; font-size:var(--pmc-fs-xs); margin:0; }
.pmc-app .pmc-ndb-dl dt{ color:var(--pmc-text-2); font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.pmc-app .pmc-ndb-dl dd{ margin:0; font-family:var(--pmc-font-mono); word-break:break-all; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Plugin/index (#4202, épique #4101 / #3053). Préfixe `pmc-pi-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-pi-toolbar{ align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap; }
.pmc-app .pmc-pi-count{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.pmc-app .pmc-pi-search-wrap{ margin-left:auto; }
.pmc-app .pmc-pi-search{ width:200px; transition:width .2s; }
.pmc-app .pmc-pi-search:focus{ width:260px; }
.pmc-app .pmc-pi-empty-title{ font-weight:600; color:var(--pmc-text); margin-bottom:var(--pmc-sp-1); }
.pmc-app .pmc-pi-card{ overflow:hidden; }
.pmc-app .pmc-pi-head{ background:var(--pmc-grad-head); color:var(--pmc-grad-head-text); padding:var(--pmc-sp-3) var(--pmc-sp-4); display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap; }
.pmc-app .pmc-pi-head-logo{ width:36px; height:36px; flex:0 0 auto; background:var(--pmc-surface); border-radius:var(--pmc-r-md); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pmc-app .pmc-pi-head-logo img{ max-width:32px; max-height:32px; display:block; }
.pmc-app .pmc-pi-head-name{ font-size:var(--pmc-fs-md); font-weight:700; line-height:1.3; }
.pmc-app .pmc-pi-head-name a{ color:inherit; text-decoration:none; }
.pmc-app .pmc-pi-head-name a:hover{ text-decoration:underline; }
.pmc-app .pmc-pi-head-version{ font-size:var(--pmc-fs-xs); opacity:.8; }
.pmc-app .pmc-pi-head-spacer{ flex:1; }
.pmc-app .pmc-pi-pill.pmc-pi-installed{ background:var(--pmc-ok-soft); color:var(--pmc-ok); }
.pmc-app .pmc-pi-pill.pmc-pi-available{ background:var(--pmc-info-soft); color:var(--pmc-info); }
.pmc-app .pmc-pi-pill.pmc-pi-update{ background:var(--pmc-warn-soft); color:var(--pmc-warn); }
.pmc-app .pmc-pi-pill.pmc-pi-disabled{ background:var(--pmc-neutral-soft); color:var(--pmc-neutral); }
.pmc-app .pmc-pi-pill.pmc-pi-broken{ background:var(--pmc-crit-soft); color:var(--pmc-crit); }
.pmc-app .pmc-pi-lifecycle-error{ margin-bottom:var(--pmc-sp-3); padding:var(--pmc-sp-2) var(--pmc-sp-3); border:1px solid var(--pmc-crit-border); border-left-width:3px; border-radius:var(--pmc-r-md); background:var(--pmc-crit-soft); color:var(--pmc-crit); font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-pi-lifecycle-message{ margin-top:2px; font-family:var(--pmc-font-mono); font-size:12px; color:var(--pmc-text); overflow-wrap:anywhere; }
.pmc-app .pmc-pi-lifecycle-phase{ margin:0 var(--pmc-sp-1); padding:0 5px; border-radius:var(--pmc-r-sm); background:var(--pmc-surface); font-family:var(--pmc-font-mono); font-size:11px; }
.pmc-app .pmc-pi-lifecycle-hint{ margin-bottom:var(--pmc-sp-3); }
.pmc-app .pmc-pi-lifecycle-form{ display:inline-flex; margin:0; }
.pmc-app .pmc-pi-body{ display:grid; grid-template-columns:130px 1fr; }
.pmc-app .pmc-pi-body-logo{ padding:var(--pmc-sp-4); display:flex; align-items:center; justify-content:center; background:var(--pmc-surface-alt); border-right:1px solid var(--pmc-border); }
.pmc-app .pmc-pi-body-logo img{ max-width:96px; max-height:96px; display:block; }
.pmc-app .pmc-pi-logo-fallback{ font-size:48px; color:var(--pmc-text-2); }
.pmc-app .pmc-pi-body-main{ padding:var(--pmc-sp-4) var(--pmc-sp-5); min-width:0; }
.pmc-app .pmc-pi-desc{ font-size:var(--pmc-fs-sm); line-height:1.5; margin-bottom:var(--pmc-sp-3); }
.pmc-app .pmc-pi-meta{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-4) var(--pmc-sp-6); margin-bottom:var(--pmc-sp-3); }
.pmc-app .pmc-pi-meta-item{ display:flex; flex-direction:column; gap:1px; }
.pmc-app .pmc-pi-meta-lbl{ font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:var(--pmc-text-2); font-weight:700; }
.pmc-app .pmc-pi-meta-val{ font-size:var(--pmc-fs-sm); font-weight:500; }
.pmc-app .pmc-pi-old-version{ display:inline-block; font-size:10px; padding:1px 5px; margin-right:4px; border-radius:var(--pmc-r-sm); background:var(--pmc-surface-alt); color:var(--pmc-text-2); font-weight:600; }
.pmc-app .pmc-pi-old-version.pmc-pi-current{ background:var(--pmc-ok); color:var(--pmc-on-ok); }
.pmc-app .pmc-pi-source{ font-weight:600; }
.pmc-app .pmc-pi-source-unknown,
.pmc-app .pmc-pi-source-bundled{ color:var(--pmc-neutral); background:var(--pmc-surface); }
.pmc-app .pmc-pi-source-marketplace{ color:var(--pmc-info); background:var(--pmc-surface); border-color:var(--pmc-info-border); }
.pmc-app .pmc-pi-facet{ width:auto; max-width:200px; }
.pmc-app .pmc-pi-action-form{ display:inline-flex; margin:0; }
.pmc-app .pmc-pi-details{ margin-bottom:var(--pmc-sp-3); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md); background:var(--pmc-surface); font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-pi-details > summary{ cursor:pointer; padding:var(--pmc-sp-2) var(--pmc-sp-3); font-weight:600; color:var(--pmc-text-2); list-style-position:inside; }
.pmc-app .pmc-pi-details > summary:focus-visible{ outline:2px solid var(--pmc-primary); outline-offset:2px; }
.pmc-app .pmc-pi-details[open] > summary{ border-bottom:1px solid var(--pmc-border); }
.pmc-app .pmc-pi-details-list{ display:grid; grid-template-columns:max-content 1fr; gap:var(--pmc-sp-1) var(--pmc-sp-3); margin:0; padding:var(--pmc-sp-3); }
.pmc-app .pmc-pi-details-list dt{ color:var(--pmc-text-2); font-weight:600; }
.pmc-app .pmc-pi-details-list dd{ margin:0; min-width:0; }
.pmc-app .pmc-pi-details-url{ display:inline-block; margin-left:var(--pmc-sp-1); font-family:var(--pmc-font-mono); font-size:11px; color:var(--pmc-text-2); overflow-wrap:anywhere; }
.pmc-app .pmc-pi-links{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1) var(--pmc-sp-3); }
.pmc-app .pmc-pi-shots{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-2); padding:0 var(--pmc-sp-3) var(--pmc-sp-3); }
.pmc-app .pmc-pi-shot{ display:block; max-width:160px; max-height:100px; border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm); object-fit:cover; }
.pmc-app .pmc-pi-changelog{ padding:0 var(--pmc-sp-3) var(--pmc-sp-3); }
.pmc-app .pmc-pi-changelog-title{ color:var(--pmc-text-2); font-weight:600; margin-bottom:var(--pmc-sp-1); }
.pmc-app .pmc-pi-changelog-list{ margin:0; padding-left:var(--pmc-sp-4); max-height:240px; overflow-y:auto; }
.pmc-app .pmc-pi-changelog-list li{ margin-bottom:var(--pmc-sp-1); }
.pmc-app .pmc-pi-changelog-version{ font-family:var(--pmc-font-mono); font-weight:600; }
.pmc-app .pmc-pi-changelog-notes{ color:var(--pmc-text-2); }
.pmc-app .pmc-pi-desc code{ font-family:var(--pmc-font-mono); font-size:12px; padding:0 4px; border-radius:var(--pmc-r-sm); background:var(--pmc-surface-alt); }
.pmc-app .pmc-pi-health{ display:inline-flex; align-items:center; gap:6px; }
.pmc-app .pmc-pi-health-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.pmc-app .pmc-pi-health-error{ margin-bottom:var(--pmc-sp-3); padding:var(--pmc-sp-2) var(--pmc-sp-3); border:1px solid var(--pmc-warn-border); border-left-width:3px; border-radius:var(--pmc-r-md); background:var(--pmc-warn-soft); color:var(--pmc-warn); font-size:var(--pmc-fs-sm); display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--pmc-sp-1) var(--pmc-sp-2); }
.pmc-app .pmc-pi-health-error-failing{ border-color:var(--pmc-crit-border); background:var(--pmc-crit-soft); color:var(--pmc-crit); }
.pmc-app .pmc-pi-health-source{ padding:0 5px; border-radius:var(--pmc-r-sm); background:var(--pmc-surface); font-family:var(--pmc-font-mono); font-size:11px; color:var(--pmc-text); }
.pmc-app a.pmc-pi-health-link{ margin-left:auto; font-weight:600; color:inherit; }
.pmc-app .pmc-pi-health-message{ flex-basis:100%; font-family:var(--pmc-font-mono); font-size:12px; color:var(--pmc-text); overflow-wrap:anywhere; }
.pmc-app .pmc-ph-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--pmc-sp-3); }
.pmc-app .pmc-ph-kv{ display:grid; grid-template-columns:max-content 1fr; gap:var(--pmc-sp-1) var(--pmc-sp-3); margin:0; font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-ph-kv dt{ color:var(--pmc-text-2); font-weight:600; }
.pmc-app .pmc-ph-kv dd{ margin:0; overflow-wrap:anywhere; }
.pmc-app .pmc-ph-mono{ font-family:var(--pmc-font-mono); font-size:12px; }
.pmc-app .pmc-ph-log{ max-height:420px; }
.pmc-app .pmc-pi-actions{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-2); padding-top:var(--pmc-sp-3); border-top:1px dashed var(--pmc-border); }
@media (max-width:720px){ .pmc-app .pmc-pi-body{ grid-template-columns:1fr; } .pmc-app .pmc-pi-body-logo{ border-right:none; border-bottom:1px solid var(--pmc-border); } }

/* --------------------------------------------------------------------------
   FAMILY — ProxySQL/* (menu, main, add, addLine, statistic, cluster, audit ;
   ProxySQLCredential/main — #4205…#4212 ; épique #4101 / #3053)
   Préfixe `pmc-ps-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-ps-menu{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-3); margin-bottom:var(--pmc-sp-4); }
.pmc-app .pmc-ps-picker{ position:relative; }
.pmc-app .pmc-ps-picker summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:var(--pmc-sp-2); }
.pmc-app .pmc-ps-picker summary::-webkit-details-marker{ display:none; }
.pmc-app .pmc-ps-picker img{ vertical-align:middle; }
.pmc-app .pmc-ps-picker-list{ position:absolute; z-index:var(--pmc-z-dropdown); top:100%; left:0; margin:var(--pmc-sp-1) 0 0; padding:var(--pmc-sp-1) 0; list-style:none; min-width:280px; background:var(--pmc-surface); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md); box-shadow:var(--pmc-shadow-md); }
.pmc-app .pmc-ps-picker-list a{ display:block; padding:var(--pmc-sp-2) var(--pmc-sp-3); color:var(--pmc-text); text-decoration:none; white-space:nowrap; }
.pmc-app .pmc-ps-picker-list a:hover{ background:var(--pmc-surface-alt); }
.pmc-app .pmc-ps-tabs{ border-bottom:0; }
.pmc-app .pmc-ps-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--pmc-sp-3) var(--pmc-sp-4); }
/* #982 — informational mux-related SQL badge on historical ProxySQL digests. */
.pmc-app .pmc-ps-mux-breaker{ white-space:nowrap; }
.pmc-app .pmc-ps-required{ color:var(--pmc-crit); }
.pmc-app .pmc-ps-tables{ margin-bottom:var(--pmc-sp-4); }
.pmc-app .pmc-ps-actions{ margin-top:var(--pmc-sp-4); gap:var(--pmc-sp-2); }
.pmc-app .pmc-ps-table td{ vertical-align:top; }
.pmc-app .pmc-ps-sql{ margin:0; max-width:720px; white-space:pre-wrap; }
.pmc-app .pmc-ps-cluster{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-4); align-items:flex-start; }
.pmc-app .pmc-ps-cluster-graph{ flex:1 1 auto; min-width:0; overflow:auto; }
.pmc-app .pmc-ps-cluster-legend{ flex:0 0 auto; }
.pmc-app .pmc-ps-audit-toolbar{ align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap; }
.pmc-app .pmc-ps-audit-counter{ display:inline-flex; align-items:center; gap:var(--pmc-sp-2); font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); }
.pmc-app .pmc-ps-audit-counter strong{ font-size:var(--pmc-fs-md); color:var(--pmc-text); }
.pmc-app .pmc-ps-audit-search{ width:240px; }
.pmc-app .pmc-ps-audit-total{ margin-left:auto; font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }
.pmc-app .pmc-ps-audit-card .pmc-card-head{ display:flex; justify-content:space-between; }
.pmc-app .pmc-ps-audit-row{ padding:var(--pmc-sp-3); border-bottom:1px solid var(--pmc-border); }
.pmc-app .pmc-ps-audit-row:last-child{ border-bottom:0; }
.pmc-app .pmc-ps-audit-row.severity-critical{ background:var(--pmc-crit-soft); }
.pmc-app .pmc-ps-audit-row.severity-warning{ background:var(--pmc-warn-soft); }
.pmc-app .pmc-ps-audit-title{ font-weight:600; }
.pmc-app .pmc-ps-audit-ticket{ color:var(--pmc-text-2); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-ps-audit-evidence{ font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); background:var(--pmc-surface-alt); padding:var(--pmc-sp-2); border-radius:var(--pmc-r-sm); margin:var(--pmc-sp-1) 0; white-space:pre-wrap; }
.pmc-app .pmc-ps-audit-fix{ font-size:var(--pmc-fs-sm); color:var(--pmc-ok); margin-top:var(--pmc-sp-1); }
.pmc-app .pmc-ps-cred{ max-width:900px; }
.pmc-app .pmc-ps-cred-table{ table-layout:fixed; }
.pmc-app .pmc-ps-cred-table td{ word-break:break-word; vertical-align:middle; }
.pmc-app .pmc-ps-cred-key{ width:35%; }
.pmc-app .pmc-ps-cred-val{ text-align:right; }
/* ProxySQL/ruleTester (#987) : diff inline de la réécriture, chaîne de règles appliquées. */
.pmc-app .pmc-ps-rt-title{ font-size:var(--pmc-fs-md); margin:var(--pmc-sp-4) 0 var(--pmc-sp-2); }
.pmc-app .pmc-ps-rt-title .pmc-help{ display:inline; font-weight:400; }
.pmc-app .pmc-ps-rt-query{ font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); white-space:pre-wrap; word-break:break-word; min-width:280px; max-width:640px; }
.pmc-app .pmc-ps-rt-query del{ color:var(--pmc-crit); background:var(--pmc-crit-soft); }
.pmc-app .pmc-ps-rt-query ins{ color:var(--pmc-ok); background:var(--pmc-ok-soft); text-decoration:none; }
.pmc-app .pmc-ps-rt-steps{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1); }
/* (#4207) les classes de sévérité `severity-*` sont un contrat de ProxySQLAuditRouteTest ; `severity-info` reste neutre. */

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Server/box (#4224, épique #4101 / #3053). Préfixe `pmc-sb-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-sb-table td.pmc-sb-crit{ background:var(--pmc-crit-soft); color:var(--pmc-crit); }
.pmc-app .pmc-sb-table td.pmc-sb-warn{ background:var(--pmc-warn-soft); color:var(--pmc-warn); }
.pmc-app .pmc-sb-table td.pmc-sb-info{ background:var(--pmc-info-soft); color:var(--pmc-info); }

/* --------------------------------------------------------------------------
   FAMILY — Replication/* (gtidDiff, status, topology — #4217 / #4218 / #4219 ; épique #4101 / #3053)
   Préfixes `pmc-gd-` / `pmc-rs-` / `pmc-rt-` — vérifiés sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-gd-row{ align-items:flex-end; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-gd-row .pmc-field{ margin-bottom:0; min-width:260px; }
.pmc-app .pmc-gd-set{ margin:0; white-space:pre-wrap; word-break:break-all; }
.pmc-app .pmc-rs-status{ text-align:center; }
.pmc-app .pmc-rs-links{ justify-content:center; gap:var(--pmc-sp-2); }
.pmc-app .pmc-rt-dot{ margin:0; white-space:pre-wrap; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — ReplicationAnnotation/index (#4220, épique #4101 / #3053). Préfixe `pmc-ra-`.
   Types d'annotation sur la palette catégorielle --pmc-chart-N (plus de hex).
   -------------------------------------------------------------------------- */
.pmc-app .pmc-ra-sub{ color:var(--pmc-text-2); margin:var(--pmc-sp-1) 0 0; }
.pmc-app .pmc-ra-nowrap{ white-space:nowrap; }
.pmc-app .pmc-badge.pmc-ra-type-deploy{ background:var(--pmc-chart-1); color:var(--pmc-on-primary); }
.pmc-app .pmc-badge.pmc-ra-type-migration{ background:var(--pmc-chart-2); color:var(--pmc-on-primary); }
.pmc-app .pmc-badge.pmc-ra-type-tuning{ background:var(--pmc-chart-3); color:var(--pmc-on-primary); }
.pmc-app .pmc-badge.pmc-ra-type-incident{ background:var(--pmc-crit); color:var(--pmc-on-crit); }
.pmc-app .pmc-badge.pmc-ra-type-other{ background:var(--pmc-text-2); color:var(--pmc-on-primary); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Query/graph (#4215, épique #4101 / #3053). Préfixe `pmc-qg-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-qg-meta{ display:grid; grid-template-columns:max-content 1fr; gap:var(--pmc-sp-1) var(--pmc-sp-4); margin:0; }
.pmc-app .pmc-qg-meta dt{ color:var(--pmc-text-2); font-weight:600; }
.pmc-app .pmc-qg-meta dd{ margin:0; }
.pmc-app .pmc-qg-svg{ overflow:auto; border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md); padding:var(--pmc-sp-3); background:var(--pmc-surface); }
.pmc-app .pmc-qg-pre{ margin:0; white-space:pre-wrap; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — QueryCache/index (#4216, épique #4101 / #3053). Préfixe `pmc-qc-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-qc-filter{ align-items:center; flex-wrap:wrap; gap:var(--pmc-sp-3); }
/* Design Lab §7 (#5291) : pas de fond de ligne d'état, seulement le texte atténué (badge pour le type). */
.pmc-app .pmc-qc-table tr.pmc-qc-off td{ color:var(--pmc-text-2); }
.pmc-app .pmc-progress.pmc-qc-bar{ width:120px; height:8px; display:inline-block; vertical-align:middle; }

/* --------------------------------------------------------------------------
   FAMILY — Query/* (digest, all — #4214 / #4213 ; épique #4101 / #3053)
   Préfixes `pmc-qd-` / `pmc-qa-` — vérifiés sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-qd-pair{ display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:var(--pmc-sp-4); }
.pmc-app .pmc-qd-sql{ margin:0; white-space:pre-wrap; }
.pmc-app .pmc-qd-table td{ vertical-align:top; }
.pmc-app .pmc-qd-table td.pmc-qd-hot{ color:var(--pmc-crit); font-weight:700; }
.pmc-app .pmc-qd-table td.pmc-qd-warm{ color:var(--pmc-warn); font-weight:700; }
.pmc-app .pmc-qd-table td.pmc-qd-key{ font-weight:700; }
.pmc-app .pmc-qd-table tr.pmc-qd-subrow > td{ padding:0; background:var(--pmc-surface-alt); }
.pmc-app .pmc-qd-sub{ margin:0; font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-qd-sub th:first-child{ width:180px; }
.pmc-app .pmc-qd-baseline .pmc-card-head{ justify-content:space-between; flex-wrap:wrap; gap:var(--pmc-sp-2); }
.pmc-app .pmc-qd-baseline-kinds{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-qd-baseline-kinds a.pmc-qa-preset{ color:inherit; }
.pmc-app .pmc-qd-baseline-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-3); margin:0 0 var(--pmc-sp-2); font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-qd-baseline-cur::before, .pmc-app .pmc-qd-baseline-ref::before{ content:""; display:inline-block; width:18px; margin-right:6px; vertical-align:middle; border-top:2px solid var(--pmc-chart-1); }
.pmc-app .pmc-qd-baseline-ref::before{ border-top:2px dashed var(--pmc-text-2); }
.pmc-app .pmc-qd-baseline-y-unit{ margin-bottom:var(--pmc-sp-1); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }
.pmc-app .pmc-qd-baseline-chart{ display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:stretch; gap:var(--pmc-sp-2); min-width:0; }
.pmc-app .pmc-qd-baseline-y-axis{ display:flex; flex-direction:column; justify-content:space-between; height:160px; white-space:nowrap; text-align:right; font-size:var(--pmc-fs-xs); line-height:12px; font-variant-numeric:tabular-nums; color:var(--pmc-text-2); }
.pmc-app .pmc-qd-baseline-svg{ display:block; width:100%; height:160px; min-width:0; max-width:100%; }
.pmc-app .pmc-qd-baseline-grid{ fill:none; stroke:var(--pmc-border); stroke-width:1; vector-effect:non-scaling-stroke; }
.pmc-app .pmc-qd-baseline-svg polyline{ fill:none; stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.pmc-app .pmc-qd-baseline-line-cur{ stroke:var(--pmc-chart-1); }
.pmc-app .pmc-qd-baseline-line-ref{ stroke:var(--pmc-text-2); stroke-dasharray:5 4; }
.pmc-app .pmc-qd-baseline-axis{ display:flex; justify-content:space-between; margin-top:var(--pmc-sp-1); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }
/* MysqlDatabase/growth (#1141) : courbe de taille d'un schéma + projection, SVG serveur. */
.pmc-app .pmc-sg-card .pmc-card-head{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--pmc-sp-2); }
.pmc-app .pmc-sg-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--pmc-sp-3); margin:0 0 var(--pmc-sp-3); }
.pmc-app .pmc-sg-kpis dt{ font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); font-weight:400; }
.pmc-app .pmc-sg-kpis dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.pmc-app .pmc-sg-svg{ display:block; width:100%; height:160px; max-width:100%; border-bottom:1px solid var(--pmc-border); }
.pmc-app .pmc-sg-svg polyline{ fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.pmc-app .pmc-sg-history{ stroke:var(--pmc-chart-1); }
.pmc-app .pmc-sg-projection{ stroke:var(--pmc-warn); stroke-dasharray:6 4; }
.pmc-app .pmc-sg-today{ stroke:var(--pmc-border-strong); stroke-width:1; vector-effect:non-scaling-stroke; }
.pmc-app .pmc-sg-axis{ display:flex; justify-content:space-between; margin:var(--pmc-sp-1) 0 var(--pmc-sp-3); font-size:var(--pmc-fs-xs); color:var(--pmc-text-2); }
.pmc-app .pmc-sg-action{ font-weight:600; }
.pmc-app .pmc-qa-card{ overflow:visible; }
.pmc-app .pmc-qa-head{ border-radius:var(--pmc-r-md) var(--pmc-r-md) 0 0; background:var(--pmc-grad-head); color:var(--pmc-grad-head-text); padding:var(--pmc-sp-3) var(--pmc-sp-4); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-qa-title{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--pmc-sp-2); font-weight:600; }
.pmc-app .pmc-qa-refresh{ font-size:var(--pmc-fs-xs); opacity:.85; }
.pmc-app .pmc-qa-presets{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-1); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-qa-preset{ color:inherit; opacity:.75; padding:2px 6px; border-radius:var(--pmc-r-sm); text-decoration:none; }
.pmc-app .pmc-qa-preset:hover{ opacity:1; text-decoration:none; }
.pmc-app .pmc-qa-preset.pmc-active{ opacity:1; font-weight:700; text-decoration:underline; }
.pmc-app .pmc-qa-db-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pmc-sp-2); padding:var(--pmc-sp-3) var(--pmc-sp-4); }
.pmc-app .pmc-qa-db-filter label{ margin:0; }
.pmc-app .pmc-qa-db-filter .pmc-ssel{ max-width:100%; }
.pmc-app .pmc-qa-scroll{ max-height:calc(100vh - 230px); overflow:auto; }
.pmc-app .pmc-qa-table{ table-layout:fixed; width:100%; min-width:1180px; }
.pmc-app .pmc-qa-table thead th{ position:sticky; top:0; z-index:2; background:var(--pmc-th-bg); color:var(--pmc-th-text); }
.pmc-app .pmc-qa-col-top{ width:50px; }
.pmc-app .pmc-qa-col-schema{ width:130px; }
.pmc-app .pmc-qa-col-metric{ width:170px; text-align:right; }
.pmc-app a.pmc-qa-sort{ color:inherit; text-decoration:none; }
.pmc-app .pmc-qa-arrow{ color:var(--pmc-text-3); }
.pmc-app .pmc-qa-arrow.pmc-active{ color:var(--pmc-primary); font-weight:700; }
.pmc-app .pmc-qa-query{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.pmc-app .pmc-qa-query-content{ position:relative; }
.pmc-app .pmc-qa-query-link{ color:inherit; text-decoration:none; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:80px; }
.pmc-app .pmc-qa-icons{ position:absolute; top:0; right:0; display:inline-flex; gap:3px; }
.pmc-app .pmc-qa-ico{ display:inline-flex; }
.pmc-app .pmc-qa-ico-crit{ color:var(--pmc-crit); }
.pmc-app .pmc-qa-ico-warn{ color:var(--pmc-warn); }
.pmc-app .pmc-qa-ico-info{ color:var(--pmc-info); }
.pmc-app .pmc-qa-ico-muted{ color:var(--pmc-text-2); }
.pmc-app .pmc-qa-metric{ display:flex; align-items:center; justify-content:flex-end; gap:6px; white-space:nowrap; }
.pmc-app .pmc-qa-value{ text-align:right; min-width:75px; font-variant-numeric:tabular-nums; }
.pmc-app .pmc-progress.pmc-qa-bar{ flex:1 1 auto; height:12px; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Scan/index (#4222, épique #4101 / #3053). Préfixe `pmc-sn-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-sn-loading{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:var(--pmc-z-toast); background:var(--pmc-surface); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md); box-shadow:var(--pmc-shadow-lg); padding:var(--pmc-sp-3) var(--pmc-sp-4); display:flex; align-items:center; gap:var(--pmc-sp-2); }
.pmc-app .pmc-sn-spinner{ width:18px; height:18px; border-radius:50%; border:3px solid var(--pmc-border); border-top-color:var(--pmc-primary); animation:pmc-sn-spin 1s linear infinite; }
@keyframes pmc-sn-spin{ to{ transform:rotate(360deg); } }
.pmc-app .pmc-sn-table th.pmc-sn-w5{ width:5%; }
.pmc-app .pmc-sn-table th.pmc-sn-w15{ width:15%; }
.pmc-app .pmc-sn-table th.pmc-sn-w50{ width:50%; }
/* Design Lab §7 (#5338) : plus de fond de ligne pour les hôtes MySQL non supervisés (bouton « Ajouter »). */
.pmc-app .pmc-sn-table td.pmc-sn-open{ color:var(--pmc-ok); font-weight:700; text-align:center; }
.pmc-app .pmc-sn-actions{ align-items:center; gap:var(--pmc-sp-2); flex-wrap:wrap; }
.pmc-app .pmc-sn-range{ width:auto; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Schema/compareModelsUi (#4223, épique #4101 / #3053). Préfixe `pmc-sc-`.
   Les tables de diff (`.diff-table`, classes produites par le différenciateur du
   contrôleur) sont stylées ici à la place du bloc de styles injecté.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-sc-form{ align-items:flex-end; flex-wrap:wrap; gap:var(--pmc-sp-3); }
.pmc-app .pmc-sc-form .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-sc-options{ display:flex; flex-direction:column; gap:var(--pmc-sp-2); }
.pmc-app .pmc-sc-errors{ margin:0; padding-left:var(--pmc-sp-4); }
.pmc-app .pmc-sc-pill{ margin:2px 4px 2px 0; }
.pmc-app .pmc-sc-empty{ font-style:italic; }
.pmc-app .pmc-sc-sides{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--pmc-sp-4); }
.pmc-app .pmc-sc-side-title{ font-weight:700; margin-bottom:var(--pmc-sp-1); }
.pmc-app .pmc-sc-object + .pmc-sc-object{ margin-top:var(--pmc-sp-4); }
.pmc-app .pmc-sc-object-title{ font-weight:600; margin-bottom:var(--pmc-sp-2); }
.pmc-app .diff-table{ width:100%; border-collapse:collapse; font-family:var(--pmc-font-mono); font-size:var(--pmc-fs-xs); }
.pmc-app .diff-table td{ padding:4px; vertical-align:top; white-space:pre; }
.pmc-app .diff-table .add{ background:var(--pmc-ok-soft); color:var(--pmc-ok); }
.pmc-app .diff-table .del{ background:var(--pmc-crit-soft); color:var(--pmc-crit); }
.pmc-app .diff-table .ln.add{ background:var(--pmc-ok-soft); }
.pmc-app .diff-table .ln.del{ background:var(--pmc-crit-soft); }
.pmc-app .diff-table .same{ background:var(--pmc-surface-alt); color:var(--pmc-text); }
.pmc-app .diff-table .ln{ width:40px; text-align:right; color:var(--pmc-text-3); }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Reports/index (#4221, épique #4101 / #3053). Préfixe `pmc-rp-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-rp-head{ justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:var(--pmc-sp-4); }
.pmc-app .pmc-rp-sub{ color:var(--pmc-text-2); margin-top:2px; max-width:880px; }
.pmc-app .pmc-rp-head .pmc-rp-sub:first-child{ margin-top:0; }
.pmc-app .pmc-rp-toolbar{ align-items:flex-end; flex-wrap:wrap; gap:var(--pmc-sp-2); }
.pmc-app .pmc-rp-toolbar .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-rp-limit{ width:90px; }
.pmc-app .pmc-rp-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.pmc-app .pmc-rp-card:nth-child(3n+1){ border-left:4px solid var(--pmc-chart-3); }
.pmc-app .pmc-rp-card:nth-child(3n+2){ border-left:4px solid var(--pmc-chart-1); }
.pmc-app .pmc-rp-card:nth-child(3n){ border-left:4px solid var(--pmc-chart-2); }
.pmc-app .pmc-rp-note{ display:block; margin-top:var(--pmc-sp-1); color:var(--pmc-text-2); font-size:var(--pmc-fs-xs); }
.pmc-app .pmc-rp-section-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--pmc-sp-3); }
.pmc-app .pmc-rp-section-desc{ font-weight:400; color:var(--pmc-grad-head-muted); }
.pmc-app .pmc-rp-chart{ border:1px solid var(--pmc-border); border-radius:var(--pmc-r-md); overflow:hidden; }
.pmc-app .pmc-rp-chart-body{ height:300px; padding:var(--pmc-sp-3); }
/* Design Lab §7 (#5327, #5587) : titre de tableau et de graphique en pmc-card-head (dégradé bleu, plus de caption ni de variante plain), en-têtes génériques §14. */
.pmc-app .pmc-rp-table-card{ box-shadow:none; }
.pmc-app .pmc-rp-table td{ vertical-align:top; }
.pmc-app .pmc-rp-notes{ margin:0; padding-left:var(--pmc-sp-5); color:var(--pmc-text-2); }
@media (max-width:1200px){ .pmc-app .pmc-rp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){ .pmc-app .pmc-rp-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Server/main (#4226, épique #4101 / #3053). Famille `sm-*`
   (noms conservés : contrats ServerMainDensityTest / ServerMainSeenGuardTest),
   palette locale --sm-* et couleurs hex remplacées par les tokens pmc.
   -------------------------------------------------------------------------- */

/* ================================================================
   SERVER MAIN — Modern monitoring dashboard
   ================================================================ */

/* Le retrait et le gap de Serveurs suivent la coquille commune (#6425). */

/* ---------- toolbar (#4465 : fusionnee dans le bandeau .sm-head) ---------- */
.sm-head-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sm-head-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sm-head .pmc-btn { font-size: 11px; padding: 4px 10px; height: auto; }
.sm-head .pmc-btn-secondary { background: var(--pmc-grad-head-muted); border-color: transparent; color: var(--pmc-text); }
.sm-head .pmc-select-sm { font-size: 11px; height: 24px; padding: 0 24px 0 8px; width: auto; min-width: 0;
                          background-color: var(--pmc-grad-head-muted); border-color: transparent; color: var(--pmc-text); }
.sm-sep { width: 1px; height: 22px; background: var(--pmc-grad-head-muted); opacity: .4; flex-shrink: 0; }
.sm-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--pmc-grad-head-text); opacity: .7;
          font-weight: 600; }

/* ---------- card ---------- */
.sm-card { background: var(--pmc-surface); border: 1px solid var(--pmc-border); border-radius: var(--pmc-r-md);
           overflow: hidden; box-shadow: var(--pmc-shadow-sm); margin-bottom:var(--pmc-layout-gap); }
.sm-head { background: var(--pmc-grad-head); color: var(--pmc-grad-head-text); padding: 8px 16px;
           display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.sm-head-title { font-size: 14px; font-weight: 600; white-space: nowrap; }

.sm-head .sm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11px;
                    font-weight: 600; margin-left: 4px; border: 1px solid transparent; }
/* #5257 / Design Lab §3 : sur la barre dégradée, palette Dark Ops figée + point d'état (pulsé pour warn et err) */
.sm-head .sm-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sm-head .sm-pill.crit::before, .sm-head .sm-pill.warn::before { animation: pmc-pulse 1.2s ease infinite; }
.sm-pill.ok   { color: rgb(74,222,128); background: rgba(74,222,128,.13); border-color: rgba(74,222,128,.4); }
.sm-pill.warn { color: rgb(251,191,36); background: rgba(251,191,36,.13); border-color: rgba(251,191,36,.4); }
.sm-pill.crit { color: rgb(248,113,113); background: rgba(248,113,113,.13); border-color: rgba(248,113,113,.4); }
.sm-pill.ack  { color: rgb(34,211,238); background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.4); }
.sm-pill.off-license { color: rgb(34,211,238); background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.4); }
.sm-pill.off-manual { color: rgb(148,163,184); background: rgba(148,163,184,.15); border-color: rgba(148,163,184,.4); }
/* #4261 — pills are status filters (buttons): "not ok" groups every non-ok
   status; the active pill is outlined; filtered rows use their own class so
   the status filter combines with the text search (.sm-hidden). */
.sm-pill.notok { color: rgb(148,163,184); background: rgba(148,163,184,.15); border-color: rgba(148,163,184,.4); }
button.sm-pill { border: 0; cursor: pointer; font-family: inherit; line-height: inherit; }
button.sm-pill:hover { filter: brightness(.94); }
button.sm-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pmc-focus-ring); }
.sm-pill.sm-pill-active { box-shadow: 0 0 0 2px currentColor; }
.sm-t tbody tr.sm-hidden-status { display: none; }

/* search in header */
.sm-search { background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.28);
             color: var(--pmc-grad-head-text); padding: 4px 12px 4px 28px; border-radius: 14px; font-size: 12px;
             width: 200px; outline: none; transition: all .15s; }
.sm-search:focus { background: rgba(0,0,0,.42); border-color: var(--pmc-grad-head-text); width: 250px; }
.sm-search::placeholder { color: var(--pmc-grad-head-text); opacity: .78; }
.sm-search-wrap { position: relative; }
.sm-search-wrap .sm-search-ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
                              color: var(--pmc-grad-head-text); opacity: .7; font-size: 11px; pointer-events: none; }

/* ---------- table ---------- */
.sm-wrap { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 170px); }
.sm-wrap::-webkit-scrollbar { width: 6px; }
.sm-wrap::-webkit-scrollbar-track { background: var(--pmc-surface-alt); }
.sm-wrap::-webkit-scrollbar-thumb { background: var(--pmc-border-strong); border-radius: 3px; }
.sm-wrap::-webkit-scrollbar-thumb:hover { background: var(--pmc-text-3); }
.sm-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.sm-t thead { position: sticky; top: 0; z-index: 2; }
/* #5257 / Design Lab §7 : en-têtes en casse normale, même police, texte noir, barre en dégradé */
.sm-t th { background: linear-gradient(180deg, rgb(255,255,255) 0%, rgb(243,244,246) 60%, rgb(229,231,235) 100%); box-shadow: inset 0 1px 0 #fff;
           color: rgb(0,0,0); font-size: 11px; font-weight: 700; text-transform: none;
           letter-spacing: 0; padding: 6px 10px; border-bottom: 1px solid var(--pmc-border-strong);
           white-space: nowrap; user-select: none; }
:root[data-theme="v2"] .sm-t th { color: var(--pmc-text); border-bottom-color: var(--pmc-border);
           background: linear-gradient(180deg, color-mix(in srgb, var(--pmc-surface-alt) 82%, rgb(255,255,255) 18%) 0%, var(--pmc-surface-alt) 100%);
           box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
/* Tri (Design Lab §7) : toutes les colonnes triables — ≤ 200 lignes côté client (th[data-pmc-sort]),
   au-delà liens ?sort=&dir= (th.sm-sort-server a) appliqués par la requête dédiée. */
th[data-pmc-sort] { cursor: pointer; }
th[data-pmc-sort]::after, th.sm-sort-server a::after { content: "\2195"; margin-left: 5px; opacity: .4; }
th[data-pmc-sort][aria-sort="ascending"]::after, th.sm-sort-server[aria-sort="ascending"] a::after { content: "\2191"; opacity: 1; color: var(--pmc-primary); }
th[data-pmc-sort][aria-sort="descending"]::after, th.sm-sort-server[aria-sort="descending"] a::after { content: "\2193"; opacity: 1; color: var(--pmc-primary); }
.sm-t thead th.sm-sort-server a, th.sm-sort-server a { color: rgb(0,0,0); text-decoration: none; } /* liens de tri toujours noirs */
.sm-t thead th.sm-sort-server a:hover, .sm-t thead th.sm-sort-server a:focus-visible, th.sm-sort-server a:hover, th.sm-sort-server a:focus-visible { color: rgb(0,0,0); text-decoration: underline; }
:root[data-theme="v2"] .sm-t thead th.sm-sort-server a, :root[data-theme="v2"] th.sm-sort-server a { color: var(--pmc-text); } /* Dark Ops : noir illisible */
th[data-pmc-sort]:focus-visible { outline: 2px solid var(--pmc-primary); outline-offset: -2px; }
.sm-t td { padding: 4px 10px; border-bottom: 1px solid var(--pmc-border); /* Design Lab §7 : trait visible entre les lignes, même sur le zébrage */ vertical-align: middle;
           transition: background .12s; }
.sm-t tbody tr { transition: transform .1s; }
/* #5257 : zébrage par paire — la classe sm-alt est posée sur une ligne serveur sur deux et sur sa ligne de détail */
.sm-t tbody tr.sm-alt td { background: var(--pmc-surface-alt); }
.sm-t tbody tr:hover td { background: rgb(219,231,247); color: rgb(0,0,0); } /* Design Lab §7 : survol bleu clair, texte noir */
:root[data-theme="v2"] .sm-t tbody tr:hover td { background: var(--pmc-primary-soft); color: inherit; }
/* Cadre de survol 1px (100 % plus foncé que le fond) dessiné en box-shadow sur les cellules : un outline sur le tr
   serait recouvert par les cellules positionnées (CVE). Ligne simple : quatre côtés ; paire : voir plus bas. */
.sm-t { --pair-frame: rgb(0,0,0); }
:root[data-theme="v2"] .sm-t { --pair-frame: var(--pmc-text); }
.sm-t tbody tr:hover:not(.sm-detail-row):not(:has(+ .sm-detail-row)) > td { box-shadow: inset 0 1px 0 var(--pair-frame), inset 0 -1px 0 var(--pair-frame); }
.sm-t tbody tr:hover:not(.sm-detail-row):not(:has(+ .sm-detail-row)) > td:first-child { box-shadow: inset 1px 0 0 var(--pair-frame), inset 0 1px 0 var(--pair-frame), inset 0 -1px 0 var(--pair-frame); }
.sm-t tbody tr:hover:not(.sm-detail-row):not(:has(+ .sm-detail-row)) > td:last-child { box-shadow: inset -1px 0 0 var(--pair-frame), inset 0 1px 0 var(--pair-frame), inset 0 -1px 0 var(--pair-frame); }
.sm-t tbody tr:hover:not(.sm-detail-row):not(:has(+ .sm-detail-row)) > td.sm-status::after { left: 1px; width: 3px; top: 1px; bottom: 1px; }
/* #5257 / Design Lab §13 : la paire ligne serveur + ligne de détail est un seul bloc — même fond (zébrage par paire),
   survol commun, cadre dessiné sur les cellules (haut + côtés / bas + côtés), aucun trait entre les deux, liseré décalé derrière le trait. */
.sm-t tbody tr:hover + .sm-detail-row td, .sm-t tbody tr:has(+ .sm-detail-row:hover) td { background: rgb(219,231,247); color: rgb(0,0,0); }
:root[data-theme="v2"] .sm-t tbody tr:hover + .sm-detail-row td, :root[data-theme="v2"] .sm-t tbody tr:has(+ .sm-detail-row:hover) td { background: var(--pmc-primary-soft); color: inherit; }
.sm-t tbody tr:has(+ .sm-detail-row) > td { border-bottom: 0; }
.sm-t tbody tr:is(:hover, :has(+ .sm-detail-row:hover)):has(+ .sm-detail-row) > td { box-shadow: inset 0 1px 0 var(--pair-frame); }
.sm-t tbody tr:is(:hover, :has(+ .sm-detail-row:hover)):has(+ .sm-detail-row) > td:last-child { box-shadow: inset 0 1px 0 var(--pair-frame), inset -1px 0 0 var(--pair-frame); }
.sm-t tbody tr:is(:hover, :has(+ .sm-detail-row:hover)):has(+ .sm-detail-row) > td:first-child { box-shadow: inset 0 1px 0 var(--pair-frame), inset 1px 0 0 var(--pair-frame); }
.sm-t tbody tr:is(:hover, :has(+ .sm-detail-row:hover)):has(+ .sm-detail-row) > td.sm-status::after { left: 1px; width: 3px; top: 1px; }
.sm-t tbody tr:hover + .sm-detail-row > td, .sm-t tbody tr.sm-detail-row:hover > td { box-shadow: inset 1px 0 0 var(--pair-frame), inset -1px 0 0 var(--pair-frame), inset 0 -1px 0 var(--pair-frame); }
.sm-t tbody tr:hover + .sm-detail-row td::before, .sm-t tbody tr.sm-detail-row:hover td::before { left: 1px; width: 3px; bottom: 1px; } /* liseré de détail derrière le trait, même largeur que la ligne serveur */
.sm-t tbody tr:last-child td { border-bottom: none; }

/* status stripe left */
.sm-t td.sm-status { width: 4px; padding: 0; position: relative; }
.sm-t td.sm-status::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; }
/* #5257 / Design Lab §13 : liseré = couleur de la première bulle quand elle n'est pas OK */
.sm-row-ok td.sm-status::after { background: transparent; }
.sm-row-warn td.sm-status::after { background: rgb(239,167,0); }
.sm-row-err td.sm-status::after { background: rgb(185,28,28); }
.sm-row-ack td.sm-status::after { background: rgb(37,99,235); }
.sm-row-off td.sm-status::after { background: rgb(148,163,184); }
.sm-row-off-license td.sm-status::after { background: rgb(37,99,235); }
.sm-row-proc td.sm-status::after { background: rgb(239,167,0); }


/* hidden rows for search filter */
.sm-hidden { display: none !important; }

/* ---------- cells ---------- */
.sm-srv { min-width: 180px; }
.sm-srv-name { font-weight: 600; color: var(--pmc-text); font-size: 13px; }
.sm-srv-name a { color: inherit; text-decoration: none; transition: color .12s; }
.sm-srv-name a:hover { color: var(--pmc-primary); }
.sm-env { font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.sm-org { font-size: 11px; color: var(--pmc-text-3); }
.sm-tag { font-size: 9px; padding: 1px 5px; border-radius: 3px; }
.sm-env-cell { white-space: nowrap; }
.sm-tag-cell { min-width: 110px; max-width: 220px; }
.sm-tag-empty { color: var(--pmc-text-3); font-size: 10px; }

.sm-host { font-family: var(--pmc-font-mono); font-size: 11px; white-space: nowrap; color: var(--pmc-text-2); }
.sm-host a { color: inherit; text-decoration: none; }
.sm-ro { font-size: 8px; padding: 1px 4px; border-radius: 2px; background: var(--pmc-ok); color: var(--pmc-on-ok); font-weight: 700; vertical-align: middle; }

.sm-ver { white-space: nowrap; font-size: 11px; color: var(--pmc-text-2); }
.sm-ver img { vertical-align: middle; }

.sm-cve-cell { position: relative; white-space: nowrap; min-width: 64px; }
.sm-cve-trigger { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--pmc-border-strong);
                  border-radius: 999px; padding: 2px 7px; font-size: 10px; font-weight: 800;
                  background: var(--pmc-surface-alt); color: var(--pmc-text); cursor: pointer; text-decoration: none; }
.sm-cve-trigger:hover, .sm-cve-trigger:focus { color: inherit; text-decoration: none; }
/* Match the error badge palette and outrank the shared .pmc-app link color. */
.pmc-app a.sm-cve-trigger:is(.critical,.high) { background: rgb(185,28,28); border-color: rgb(185,28,28); color: rgb(255,255,255); }
.pmc-app a.sm-cve-trigger.medium { background: rgb(239,167,0); border-color: rgb(234,142,0); color: rgb(0,0,0); }
.sm-cve-trigger.low { background: rgb(49,100,140); border-color: rgb(27,58,87); color: rgb(255,255,255); }
.sm-cve-trigger.none, .sm-cve-trigger.unknown { background: var(--pmc-surface-alt); border-color: var(--pmc-border); color: var(--pmc-text-2); }
.sm-cve-kev-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--pmc-crit); box-shadow:0 0 0 2px var(--pmc-crit-soft); }
.sm-cve-pop { display: none; position: absolute; left: 0; top: 100%; width: 420px; max-width: 52vw;
              background: var(--pmc-surface); color: var(--pmc-text); border: 1px solid var(--pmc-border); border-radius: 8px;
              box-shadow: var(--pmc-shadow-lg); padding: 10px; z-index: 30; white-space: normal; }
.sm-cve-cell:hover .sm-cve-pop, .sm-cve-cell:focus-within .sm-cve-pop { display: block; }
.sm-cve-pop-title { display:flex; justify-content:space-between; gap:8px; color:var(--pmc-text); font-weight:800; margin-bottom:7px; }
.sm-cve-pop-sub { color:var(--pmc-text-3); font-size:10px; font-weight:600; }
.sm-cve-item { border-top:1px solid var(--pmc-border); padding:7px 0; }
.sm-cve-item:first-of-type { border-top:0; }
.sm-cve-id { font-weight:800; color:var(--pmc-info); text-decoration:none; }
.sm-cve-id:hover { color:var(--pmc-primary); text-decoration:underline; }
.sm-cve-sev { display:inline-block; min-width:54px; text-align:center; border-radius:999px; padding:1px 5px;
              color:var(--pmc-on-crit); font-size:9px; font-weight:800; text-transform:uppercase; margin-left:4px; }
.sm-cve-sev.critical, .sm-cve-sev.high { background:rgb(185,28,28); color:rgb(255,255,255); }
.sm-cve-sev.medium { background:rgb(239,167,0); color:rgb(0,0,0); }
.sm-cve-sev.low { background:var(--pmc-info); }
.sm-cve-sev.none, .sm-cve-sev.unknown { background:var(--pmc-text-2); }
.sm-cve-item-title { color:var(--pmc-text-2); font-size:10px; margin-top:3px; line-height:1.35; }
.sm-cve-item-meta { color:var(--pmc-text-3); font-size:9px; margin-top:3px; }
.sm-cve-more { color:var(--pmc-text-2); border-top:1px solid var(--pmc-border); padding-top:7px; font-size:10px; font-weight:700; }
.sm-cve-empty { color: var(--pmc-text-3); font-size: 10px; }


.sm-badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
/* #5257 / Design Lab §12 : badges pleins (latence, vu, CVE) aux couleurs setFlash */
.sm-badge.ok   { background: rgb(76,113,65); color: rgb(255,255,255); }
.sm-badge.good { background: rgb(49,100,140); color: rgb(255,255,255); }
.sm-badge.warn { background: rgb(239,167,0); color: rgb(0,0,0); }
.sm-badge.crit { background: rgb(115,46,3); color: rgb(255,255,255); }
.sm-badge.muted { background: rgb(71,85,105); color: rgb(255,255,255); }
.sm-badge.info { background: rgb(49,100,140); color: rgb(255,255,255); }
.sm-seen-guard { padding: 8px 12px; font-size: 12px; } /* #4539 : flush (pmc-alert-flush), aucune marge avant le thead */

.sm-detail-row td { padding: 0 10px 4px 38px; border-bottom: 1px solid var(--pmc-border); font-size: 11px; background: var(--pmc-surface); }
.sm-detail-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.sm-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.sm-detail-actions .pmc-btn { font-size: 10px; padding: 2px 6px; margin-right: 0; }
.sm-detail-actions form { display: inline-flex; margin: 0; }
.sm-detail-placeholder { flex: 1; min-width: 12px; }
.sm-proc-label { display: inline-flex; align-items: center; font-size: 10px; padding: 1px 6px; border-radius: 3px;
                 font-weight: 700; background: var(--pmc-warn-soft); color: var(--pmc-warn); }
.sm-kill-worker { font-weight: 700; }
/* #5257 : liseré de la ligne de détail dessiné par ::before, couleur de l'état de la ligne serveur — aucun fond d'état */
.sm-detail-row td { position: relative; }
.sm-detail-row td::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--sm-detail-stripe, transparent); }
.sm-err-row { --sm-detail-stripe: rgb(185,28,28); }
.sm-err-row td .sm-err-text { color: var(--pmc-crit); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* #5266 : message d'erreur en badge plein, blanc sur rouge (format de « ⚠ Aucun succès MySQL enregistré ») ;
   le fond suit l'état de la ligne serveur comme le liseré. */
.sm-badge.sm-err-msg { background: rgb(185,28,28); color: rgb(255,255,255); white-space: normal; overflow-wrap: anywhere; }
.sm-detail-row td .pmc-badge { font-size: 9px; }
.sm-row-ack + .sm-err-row { --sm-detail-stripe: rgb(37,99,235); }
.sm-row-ack + .sm-err-row .sm-err-text { color: var(--pmc-info); }
.sm-row-ack + .sm-err-row .sm-err-msg { background: rgb(37,99,235); }
.sm-row-warn + .sm-err-row { --sm-detail-stripe: rgb(239,167,0); }
.sm-row-warn + .sm-err-row .sm-err-text { color: var(--pmc-warn); }
.sm-row-warn + .sm-err-row .sm-err-msg { background: rgb(239,167,0); color: rgb(0,0,0); }
.sm-row-off + .sm-err-row { --sm-detail-stripe: rgb(148,163,184); }
.sm-row-off + .sm-err-row .sm-err-text { color: var(--pmc-neutral); }
.sm-row-off + .sm-err-row .sm-err-msg { background: rgb(71,85,105); }
.sm-row-off-license + .sm-err-row { --sm-detail-stripe: rgb(37,99,235); }
.sm-row-off-license + .sm-err-row .sm-err-text { color: var(--pmc-info); }
.sm-row-off-license + .sm-err-row .sm-err-msg { background: rgb(37,99,235); }
.sm-row-proc + .sm-detail-row { --sm-detail-stripe: rgb(239,167,0); }
.sm-t tbody tr:has(+ .sm-detail-row) td { border-bottom: none; }

/* general log switch compact */
.sm-org-cell { font-size: 11px; color: var(--pmc-text-2); white-space: nowrap; }

/* ping cell */
.sm-ping { white-space: nowrap; }

/* no data */
.sm-empty { text-align: center; padding: 40px; color: var(--pmc-text-3); }

/* status dot — seule définition, partagée par Server/main et Slave/show (Display::statusDot) */
.sv-dot {
    --size: 10px;
    --startColor: rgb(148,163,184); /* sans état (supervision manuelle) = N/A gris */
    --endColor: transparent;
    position: relative;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    flex: 0 0 auto;
    background-color: var(--startColor);
}
/* #5257 / Design Lab §13 : couleurs fixes des bulles d'état (MySQL puis SSH) */
.sv-dot.ok   { --startColor: rgb(21,128,61);    --endColor: transparent;  }
.sv-dot.fail { --startColor: rgb(185,28,28);    --endColor: transparent;  }
.sv-dot.info { --startColor: rgb(37,99,235);    --endColor: transparent;  }
.sv-dot.warn { --startColor: rgb(239,167,0);    --endColor: transparent;  }
.sv-dot.na   { --startColor: rgb(148,163,184);  --endColor: transparent;  }
.sm-dot-cell { white-space: nowrap; }
.sm-dot-cell .sv-dot-ssh { margin-left: 2px; }
/* #5261 : l'anneau de pulsation est un ::after animé en transform + opacity,
   exécuté par le compositeur. L'ancienne animation de box-shadow recalculait
   style et peinture à chaque frame sur ~100 bulles : ≈ 1,4 s de style et
   9 s de tâches par 10 s de page ouverte, même rafraîchissement en pause. */
.sv-dot.halo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--startColor);
                      pointer-events: none; animation: status-dot-pulse 1.5s infinite; }
@keyframes status-dot-pulse {
    from { transform: scale(1); opacity: 1; }
    70%  { transform: scale(3); opacity: 0; }
    to   { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sv-dot.halo::after { animation: none; opacity: 0; } }

/* (#4226) compléments : environnement sur les tokens --pmc-hm-env-*, cellules sans style inline */
.sm-env.pmc-env-danger { background: var(--pmc-hm-env-danger); color: var(--pmc-on-crit); }
.sm-env.pmc-env-warning { background: var(--pmc-hm-env-warning); color: var(--pmc-on-warn); }
.sm-env.pmc-env-success { background: var(--pmc-hm-env-success); color: var(--pmc-on-ok); }
.sm-env.pmc-env-info { background: var(--pmc-hm-env-info); color: var(--pmc-on-primary); }
.sm-env.pmc-env-primary { background: var(--pmc-hm-env-primary); color: var(--pmc-on-primary); }
.sm-env.pmc-env-default { background: var(--pmc-hm-env-default); color: var(--pmc-on-primary); }
.sm-t th.sm-status-head { width: 4px; padding: 0; }
.sm-t td.sm-dot-cell { width: 20px; text-align: center; }
.sm-badge.sm-badge-gap { margin-left: 4px; }
.sm-dim { opacity: .7; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — Alarms/index (core feed; #5135)
   Barre de résumé de l'écran Alarms du cœur : compteurs actifs à gauche,
   action « test alarm » poussée à droite. L'écran du plugin alerting
   remplace la vue mais ne réutilise pas ces classes. Tokens uniquement.
   Préfixe `pmc-alarms-` — vérifié sans collision dans ce fichier.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-alarms-toolbar{
  display:flex; align-items:center; gap:var(--pmc-sp-3); flex-wrap:wrap;
}
.pmc-app .pmc-alarms-toolbar-action{ margin-left:auto; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MaxScale/index (#4179, épique #4101 / #3053)
   Tableau de bord des instances MaxScale : page et cartes sur les composants
   génériques, identités serveur `pmc-`, tables défilables, états accessibles
   et barres à paliers sans largeur inline. Préfixe `pmc-msx-` — vérifié sans
   collision. Couleurs et dimensions visuelles issues des tokens du thème.
   -------------------------------------------------------------------------- */
.pmc-maxscale-index svg[data-lucide]{
  width:1em; height:1em; flex:none; vertical-align:middle;
}
.pmc-app .pmc-msx-kpis .pmc-stat{ min-height:calc(var(--pmc-h-row) + var(--pmc-h-ctl)); }
.pmc-app .pmc-msx-instance-head{ flex-wrap:wrap; }
.pmc-app .pmc-msx-logo{
  width:var(--pmc-h-ctl); height:var(--pmc-h-ctl); object-fit:contain;
  padding:var(--pmc-sp-1); border-radius:var(--pmc-r-sm); background:var(--pmc-grad-head-text);
}
.pmc-app .pmc-msx-who{
  min-width:0; display:flex; flex:1 1 auto; flex-direction:column;
}
.pmc-app .pmc-msx-instance-title{ font-size:var(--pmc-fs-md); overflow-wrap:anywhere; }
.pmc-app .pmc-msx-head-sub{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--pmc-sp-1);
  color:var(--pmc-grad-head-muted); font-size:var(--pmc-fs-xs); font-weight:400;
}
.pmc-app .pmc-msx-head-sub code{
  color:var(--pmc-grad-head-text); background:transparent; border-color:transparent;
}
.pmc-app .pmc-msx-backend-count{ white-space:nowrap; }
.pmc-app .pmc-msx-stale{ margin:0; }
.pmc-app .pmc-msx-stale-reason{ display:block; margin-top:var(--pmc-sp-1); }
.pmc-app .pmc-msx-meta{
  align-items:center; padding-bottom:var(--pmc-sp-3); border-bottom:1px solid var(--pmc-border);
  color:var(--pmc-text-2); font-size:var(--pmc-fs-sm);
}
.pmc-app .pmc-msx-password{ gap:var(--pmc-sp-1); }
.pmc-app .pmc-msx-service{ max-width:100%; flex-wrap:wrap; }
.pmc-app .pmc-msx-service-meta{ opacity:.8; font-weight:400; overflow-wrap:anywhere; }
.pmc-app .pmc-msx-table-card,
.pmc-app .pmc-msx-rw-table-card{ box-shadow:none; }
.pmc-app .pmc-msx-server-name{ font-weight:600; }
.pmc-app .pmc-msx-backend-alias{ font-size:var(--pmc-fs-xs); font-weight:400; }
.pmc-app .pmc-msx-connection{
  display:flex; align-items:center; gap:var(--pmc-sp-2); min-width:0;
}
.pmc-app .pmc-msx-connection-bar{ flex:1 1 auto; min-width:var(--pmc-h-row); }
.pmc-app .pmc-msx-rw{ box-shadow:none; }
.pmc-app .pmc-msx-rw-heading{ flex-wrap:wrap; }
.pmc-app .pmc-msx-rw-title{ min-width:0; overflow-wrap:anywhere; }
.pmc-app .pmc-msx-rw-summary{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--pmc-sp-2); margin:0;
}
.pmc-app .pmc-msx-rw-summary > div{
  min-width:0; padding:var(--pmc-sp-2) var(--pmc-sp-3);
  border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm);
  background:var(--pmc-surface-alt);
}
.pmc-app .pmc-msx-rw-summary dt{
  color:var(--pmc-text-3); font-size:var(--pmc-fs-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
}
.pmc-app .pmc-msx-rw-summary dd{
  margin:var(--pmc-sp-1) 0 0; color:var(--pmc-text); font-size:var(--pmc-fs-sm);
  overflow-wrap:anywhere;
}
.pmc-app .pmc-msx-route{ display:grid; gap:var(--pmc-sp-2); }
.pmc-app .pmc-msx-route-bar{ display:flex; }
.pmc-app .pmc-msx-route-bar > span{ flex:none; border-radius:0; }
.pmc-app .pmc-msx-route-replica{ background:var(--pmc-ok); }
.pmc-app .pmc-msx-route-master{ background:var(--pmc-primary); }
.pmc-app .pmc-msx-route-all{ background:var(--pmc-neutral); }
.pmc-app .pmc-msx-route-legend{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--pmc-sp-1) var(--pmc-sp-4);
  color:var(--pmc-text-2); font-size:var(--pmc-fs-xs);
}
.pmc-app .pmc-msx-route-legend > span{
  display:inline-flex; align-items:center; gap:var(--pmc-sp-1);
}
.pmc-app .pmc-msx-swatch{
  display:inline-block; width:var(--pmc-sp-2); height:var(--pmc-sp-2);
  border-radius:var(--pmc-r-sm); flex:none;
}
.pmc-app .pmc-msx-rw-params{ gap:var(--pmc-sp-1); }
.pmc-app .pmc-msx-rw-param{ font-size:var(--pmc-fs-xs); overflow-wrap:anywhere; }
.pmc-app .pmc-msx-rw-findings{
  list-style:none; margin:0; padding:0; display:grid; gap:var(--pmc-sp-2);
}
.pmc-app .pmc-msx-rw-findings li{
  display:flex; align-items:flex-start; gap:var(--pmc-sp-2); font-size:var(--pmc-fs-sm);
}
.pmc-app .pmc-msx-finding-level{ min-width:var(--pmc-h-ctl); justify-content:center; }
.pmc-app .pmc-msx-empty-icon{
  display:block; width:var(--pmc-sp-6); height:var(--pmc-sp-6);
  margin:0 auto var(--pmc-sp-2);
}
@media (max-width:768px){
  .pmc-app .pmc-msx-rw-summary{ grid-template-columns:minmax(0,1fr); }
  .pmc-app .pmc-msx-route-legend{ align-items:flex-start; flex-direction:column; }
  .pmc-app .pmc-msx-backend-count{ margin-left:0; }
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MaxScaleAudit/index (#4180)
   Les icones Lucide suivent la taille du texte dans le bandeau, les badges,
   les boutons et la table dense. L'etat vide neutralise la hauteur de ligne
   compacte sans introduire de valeur ou de couleur hors tokens.
   -------------------------------------------------------------------------- */
.pmc-maxscale-audit-index svg[data-lucide]{
  width:1em; height:1em; flex:none; vertical-align:middle;
}
.pmc-maxscale-audit-index .pmc-tbl td.pmc-maxscale-audit-empty-cell{
  height:auto; padding:var(--pmc-sp-3);
}

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — PhpLiveRegex/index (#3053)
   Testeur de regex : saisies 6/2/4, chaîne de test 5/12 + résultats 7/12,
   motif encadré de deux délimiteurs `/`, volet « occupé » pendant l'appel
   AJAX (classe basculée par js/PhpLiveRegex/index.js), aide-mémoire en
   listes de définitions. Préfixe `pmc-plr-`.
   -------------------------------------------------------------------------- */
.pmc-app .pmc-plr-inputs{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,2fr) minmax(0,4fr); column-gap:var(--pmc-sp-4); }
.pmc-app .pmc-plr-inputs .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-plr-regex .pmc-input{ border-radius:0; }
.pmc-app .pmc-plr-regex .pmc-addon:first-child{ border-left:1px solid var(--pmc-border-strong); border-right:0; border-radius:var(--pmc-r-sm) 0 0 var(--pmc-r-sm); }
.pmc-app .pmc-plr-work{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--pmc-sp-4); align-items:start; }
.pmc-app .pmc-plr-work > .pmc-field{ margin-bottom:0; }
.pmc-app .pmc-plr-work > *, .pmc-app .pmc-plr-inputs > *{ min-width:0; }
.pmc-app .pmc-plr-examples{ min-height:calc(var(--pmc-h-row) * 13); }
.pmc-app .pmc-plr-panes{ transition:opacity var(--pmc-transition); }
.pmc-app .pmc-plr-panes.pmc-plr-busy{ opacity:.5; }
.pmc-app .pmc-plr-panes .pmc-tab-pane{ padding-bottom:0; }
.pmc-app .pmc-plr-output{ color:var(--pmc-text); background:var(--pmc-surface-2); border:1px solid var(--pmc-border); border-radius:var(--pmc-r-sm); padding:var(--pmc-sp-2); font-family:var(--pmc-font-mono); white-space:pre; margin:var(--pmc-sp-2) 0 0; max-height:calc(var(--pmc-h-row) * 16); overflow:auto; }
.pmc-app .pmc-plr-cheats{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--pmc-sp-1) var(--pmc-sp-3); margin:0; font-size:var(--pmc-fs-sm); }
.pmc-app .pmc-plr-cheats dt{ font-weight:400; }
.pmc-app .pmc-plr-cheats dd{ margin:0; color:var(--pmc-text-2); }
.pmc-app .pmc-plr-options{ display:flex; flex-wrap:wrap; gap:var(--pmc-sp-2) var(--pmc-sp-5); margin:0; padding:0; list-style:none; font-size:var(--pmc-fs-sm); color:var(--pmc-text-2); }
@media (max-width:768px){
  .pmc-app .pmc-plr-results .pmc-tabs button{ min-height:calc(var(--pmc-h-ctl-lg) + var(--pmc-sp-1)); }
  .pmc-app .pmc-plr-inputs, .pmc-app .pmc-plr-work{ grid-template-columns:minmax(0,1fr); row-gap:var(--pmc-sp-4); }
}
/* ==========================================================================
   SCREEN-SPECIFIC — ProxySQL/replicaLag (#992) : barres de lag max par tranche, plafond en tirets
   ========================================================================== */
.pmc-proxysql-replicalag .pmc-lag-spark{ display:block; color:var(--pmc-text-3); }
.pmc-proxysql-replicalag .pmc-lag-ok{ fill:var(--pmc-ok); }
.pmc-proxysql-replicalag .pmc-lag-over{ fill:var(--pmc-crit); }

/* Daemon duration cards keep a bounded canvas in both themes. */
.pmc-app .pmc-daemon-duration-canvas { position:relative; height:220px; min-width:0; }
.pmc-daemon-index #daemon-duration-history .pmc-card { min-width:0; }

/* --------------------------------------------------------------------------
   SCREEN-SPECIFIC — MysqlServer/raid volume inventory (#6774)
   -------------------------------------------------------------------------- */
.pmc-raid-page .pmc-raid-volume > summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;
  gap:var(--pmc-sp-3);align-items:center;padding:var(--pmc-sp-4);cursor:pointer;
  list-style:none;min-height:var(--pmc-touch-min,40px);
}
.pmc-raid-page .pmc-raid-volume > summary::-webkit-details-marker{display:none;}
.pmc-raid-page .pmc-raid-volume > summary:focus-visible,
.pmc-raid-page .pmc-raid-disk-detail > summary:focus-visible{
  outline:var(--pmc-focus-ring-width) solid var(--pmc-focus-ring);outline-offset:var(--pmc-sp-1);
}
.pmc-raid-page .pmc-raid-volume-heading{display:flex;flex-direction:column;gap:var(--pmc-sp-1);min-width:0;overflow-wrap:anywhere;}
.pmc-raid-page .pmc-raid-volume-icon{color:var(--pmc-primary);}
.pmc-raid-page .pmc-raid-volume-capacity{text-align:right;color:var(--pmc-text-2);font-size:var(--pmc-fs-sm);overflow-wrap:anywhere;}
.pmc-raid-page .pmc-raid-volume-caret{transition:transform var(--pmc-transition);}
.pmc-raid-page .pmc-raid-volume[open] .pmc-raid-volume-caret{transform:rotate(180deg);}
.pmc-raid-page .pmc-raid-volume-meter{grid-column:2/5;display:flex;align-items:center;gap:var(--pmc-sp-3);}
.pmc-raid-page .pmc-raid-volume-meter .pmc-meta{flex-shrink:0;}
.pmc-raid-page .pmc-raid-volume-body{border-top:var(--pmc-border-width,1px) solid var(--pmc-border);}
.pmc-raid-page .pmc-raid-meter{
  appearance:none;-webkit-appearance:none;width:100%;height:var(--pmc-sp-3);
  border:0;border-radius:var(--pmc-r-full);overflow:hidden;background:var(--pmc-neutral-soft);color:var(--pmc-primary);
}
.pmc-raid-page .pmc-raid-meter::-webkit-progress-bar{background:var(--pmc-neutral-soft);border-radius:var(--pmc-r-full);}
.pmc-raid-page .pmc-raid-meter::-webkit-progress-value{background:var(--pmc-primary);border-radius:var(--pmc-r-full);}
.pmc-raid-page .pmc-raid-meter::-moz-progress-bar{background:var(--pmc-primary);border-radius:var(--pmc-r-full);}
.pmc-raid-page .pmc-raid-meter-crit::-webkit-progress-value{background:var(--pmc-crit);}
.pmc-raid-page .pmc-raid-meter-crit::-moz-progress-bar{background:var(--pmc-crit);}
.pmc-raid-page .pmc-raid-meter-warn::-webkit-progress-value{background:var(--pmc-warn);}
.pmc-raid-page .pmc-raid-meter-warn::-moz-progress-bar{background:var(--pmc-warn);}
.pmc-raid-page .pmc-raid-meter-neutral::-webkit-progress-value{background:var(--pmc-text-3);}
.pmc-raid-page .pmc-raid-meter-neutral::-moz-progress-bar{background:var(--pmc-text-3);}
.pmc-raid-page .pmc-raid-volume-properties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pmc-sp-3) var(--pmc-sp-6);margin:0;}
.pmc-raid-page .pmc-raid-volume-properties > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pmc-sp-3);}
.pmc-raid-page dt{font-weight:normal;color:var(--pmc-text-3);font-size:var(--pmc-fs-sm);}
.pmc-raid-page dd{margin:0;overflow-wrap:anywhere;}
.pmc-raid-page .pmc-raid-battery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pmc-sp-3);margin:0 0 var(--pmc-sp-4);}
.pmc-raid-page .pmc-raid-battery-grid dd{font-weight:var(--pmc-fw-semibold,600);margin-top:var(--pmc-sp-1);}
.pmc-raid-page .pmc-raid-usage-legend{display:flex;flex-wrap:wrap;gap:var(--pmc-sp-4);font-size:var(--pmc-fs-sm);color:var(--pmc-text-2);}
.pmc-raid-page .pmc-raid-usage-legend > span{display:flex;align-items:center;gap:var(--pmc-sp-2);}
.pmc-raid-page .pmc-raid-disks{overflow:visible;max-height:none;height:auto;}
.pmc-raid-page .pmc-raid-disk-table{table-layout:fixed;width:100%;}
.pmc-raid-page .pmc-raid-disk-table th,
.pmc-raid-page .pmc-raid-disk-table td{white-space:normal;overflow-wrap:anywhere;vertical-align:top;}
.pmc-raid-page .pmc-raid-disk-table thead th:nth-child(1){width:15%;}
.pmc-raid-page .pmc-raid-disk-table thead th:nth-child(2){width:50%;}
.pmc-raid-page .pmc-raid-disk-table thead th:nth-child(3){width:15%;}
.pmc-raid-page .pmc-raid-disk-table thead th:nth-child(4){width:20%;}
.pmc-raid-page .pmc-raid-disk-table .pmc-badge{white-space:normal;max-width:100%;text-align:left;}
.pmc-raid-page .pmc-raid-disk-controller,
.pmc-raid-page .pmc-raid-disk-serial{display:block;margin-top:var(--pmc-sp-1);}
.pmc-raid-page .pmc-raid-disk-detail > summary{cursor:pointer;min-height:var(--pmc-touch-min,40px);}
.pmc-raid-page .pmc-raid-disk-detail dl{display:grid;gap:var(--pmc-sp-2);margin:var(--pmc-sp-2) 0 0;}
.pmc-raid-page .pmc-raid-disk-detail dl > div{display:flex;flex-wrap:wrap;gap:var(--pmc-sp-2);}
.pmc-raid-page .pmc-raid-disk-crit td:nth-child(2){color:var(--pmc-crit);}
.pmc-raid-page .pmc-raid-filesystem{margin:0;overflow-wrap:anywhere;}
@media(max-width:640px){
  .pmc-raid-page .pmc-raid-volume > summary{grid-template-columns:auto minmax(0,1fr) auto;}
  .pmc-raid-page .pmc-raid-volume > summary > .pmc-badge{grid-column:2;justify-self:start;}
  .pmc-raid-page .pmc-raid-volume-capacity{grid-column:2;text-align:left;}
  .pmc-raid-page .pmc-raid-volume-caret{grid-column:3;grid-row:1;}
  .pmc-raid-page .pmc-raid-volume-meter{grid-column:1/-1;}
  .pmc-raid-page .pmc-raid-volume-properties{grid-template-columns:minmax(0,1fr);}
  .pmc-raid-page .pmc-raid-battery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pmc-raid-page .pmc-raid-disk-table{font-size:var(--pmc-fs-xs);}
  .pmc-raid-page .pmc-raid-disk-table th,.pmc-raid-page .pmc-raid-disk-table td{padding:var(--pmc-sp-2);}
}

.pmc-raid-page .pmc-raid-inventory .pmc-ico{width:var(--pmc-sp-5);height:var(--pmc-sp-5);flex:none;}
.pmc-raid-page .pmc-raid-battery .pmc-card-head > span:first-child{display:flex;align-items:center;gap:var(--pmc-sp-2);}
@media(max-width:640px){
  .pmc-raid-page .pmc-raid-disk-table,
  .pmc-raid-page .pmc-raid-disk-table thead,
  .pmc-raid-page .pmc-raid-disk-table tbody{display:block;}
  .pmc-raid-page .pmc-raid-disk-table thead tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .pmc-raid-page .pmc-raid-disk-table thead th:nth-child(n){width:auto;min-height:var(--pmc-touch-min,40px);display:flex;align-items:center;}
  .pmc-raid-page .pmc-raid-disk-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;min-height:0;border-bottom:var(--pmc-border-width) solid var(--pmc-border);}
  .pmc-raid-page .pmc-raid-disk-table tbody th,.pmc-raid-page .pmc-raid-disk-table tbody td{display:block;min-width:0;height:auto;}
  .pmc-raid-page .pmc-raid-disk-table tbody th{grid-column:1;grid-row:1;}
  .pmc-raid-page .pmc-raid-disk-table tbody td:nth-child(3){grid-column:2;grid-row:1;}
  .pmc-raid-page .pmc-raid-disk-table tbody td:nth-child(2){grid-column:1/-1;grid-row:2;}
  .pmc-raid-page .pmc-raid-disk-table tbody td:nth-child(4){grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:var(--pmc-sp-2);}
  .pmc-raid-page .pmc-raid-disk-table [data-raid-label]::before{content:attr(data-raid-label);display:block;font-size:var(--pmc-fs-xs);font-weight:normal;color:var(--pmc-text-3);margin-bottom:var(--pmc-sp-1);}
}