/* ==========================================================================
   Thème REEL / DEV VIR pour InvenTree 1.5.5 (interface web)
   - Uniquement des variables de couleur Mantine et des classes stables
     (mantine-*, reel-*). Les classes reel-* sont posées par aide.js.
   - Couleur principale : bleu atelier (remplace l'indigo par défaut).
     Rouge REEL réservé à l'identité (liseré, onglet actif) : le rouge des
     actions dangereuses (supprimer) reste celui d'InvenTree.
   - Si un utilisateur choisit une autre couleur dans ses réglages de thème,
     son choix reste prioritaire (seul l'indigo par défaut est remplacé).

   v2 (2026-09-27, refonte visuelle d'après maquettes Claude Design) :
   - Polices IBM Plex Sans / IBM Plex Mono auto-hébergées (fonts/, licence
     OFL, sous-ensembles latin + latin-ext seulement : pas de cyrillique, grec
     ni vietnamien, inutiles ici).
   - Nouvelle couche de jetons --dv-* : surfaces à 3 niveaux (page / section /
     relief), texte, bordures, couleurs d'état. Utilisée par les panneaux et
     widgets maison (be.js, dashboard.js) ; alias directs vers les variables
     Mantine pour tout ce qui a un équivalent (couleur principale, vert/orange/
     rouge/cyan/gris), valeurs propres pour les 3 niveaux de surface qui
     n'existent pas nativement dans Mantine.
   - Deux correctifs sur la coque, ciblés et sûrs (voir commentaires) :
     bandeau « Mode Superutilisateur » compacté, titre de page en dégradé
     neutralisé (illisible en sombre + jamais sur une seule ligne).
   ========================================================================== */

/* --- Polices IBM Plex, auto-hébergées (fonts/), licence OFL --------------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/reel-ui/fonts/ibm-plex-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/reel-ui/fonts/ibm-plex-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/reel-ui/fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/reel-ui/fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/reel-ui/fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/reel-ui/fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/reel-ui/fonts/ibm-plex-mono-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/reel-ui/fonts/ibm-plex-mono-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --reel-red: #E00C20;
  --reel-graphite: #2C2C2A;

  --mantine-color-indigo-0: #eaf2fa !important;
  --mantine-color-indigo-1: #d3e3f3 !important;
  --mantine-color-indigo-2: #a9c8e6 !important;
  --mantine-color-indigo-3: #7eabd8 !important;
  --mantine-color-indigo-4: #5a93cc !important;
  --mantine-color-indigo-5: #3f81c2 !important;
  --mantine-color-indigo-6: #2a70b4 !important;
  --mantine-color-indigo-7: #1f609f !important;
  --mantine-color-indigo-8: #185189 !important;
  --mantine-color-indigo-9: #0f3d6b !important;

  --mantine-primary-color-0: #eaf2fa !important;
  --mantine-primary-color-1: #d3e3f3 !important;
  --mantine-primary-color-2: #a9c8e6 !important;
  --mantine-primary-color-3: #7eabd8 !important;
  --mantine-primary-color-4: #5a93cc !important;
  --mantine-primary-color-5: #3f81c2 !important;
  --mantine-primary-color-6: #2a70b4 !important;
  --mantine-primary-color-7: #1f609f !important;
  --mantine-primary-color-8: #185189 !important;
  --mantine-primary-color-9: #0f3d6b !important;

  --mantine-radius-default: 6px !important;

  --mantine-font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  --mantine-font-family-monospace: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;

  /* --- Jetons DEV VIR (couche B/C : panneaux et widgets maison) ----------
     Alias directs vers Mantine quand un équivalent existe (respecte le choix
     de couleur de chaque utilisateur et s'adapte seul au thème) ; valeurs
     propres pour les 3 niveaux de surface, qui n'ont pas d'équivalent Mantine. */
  --dv-font: var(--mantine-font-family);
  --dv-mono: var(--mantine-font-family-monospace);
  --dv-id: var(--reel-red);

  --dv-tx: var(--mantine-color-text);
  --dv-dim: var(--mantine-color-dimmed);
  --dv-dis: var(--mantine-color-disabled-color, var(--mantine-color-dimmed));

  --dv-pri: var(--mantine-primary-color-filled);
  --dv-pri-h: var(--mantine-primary-color-filled-hover);
  --dv-pri-l: var(--mantine-primary-color-light);
  --dv-pri-tx: var(--mantine-primary-color-light-color);

  --dv-ok: var(--mantine-color-green-6);
  --dv-ok-l: var(--mantine-color-green-light);
  --dv-ok-tx: var(--mantine-color-green-light-color);
  --dv-warn: var(--mantine-color-orange-6);
  --dv-warn-l: var(--mantine-color-orange-light);
  --dv-warn-tx: var(--mantine-color-orange-light-color);
  --dv-err: var(--mantine-color-red-6);
  --dv-err-l: var(--mantine-color-red-light);
  --dv-err-tx: var(--mantine-color-red-light-color);
  --dv-cy: var(--mantine-color-cyan-6);
  --dv-cy-l: var(--mantine-color-cyan-light);
  --dv-cy-tx: var(--mantine-color-cyan-light-color);
  --dv-neu-l: var(--mantine-color-gray-light);
  --dv-neu-tx: var(--mantine-color-gray-light-color);

  --dv-r-sm: 3px;
  --dv-r: 4px;
  --dv-r-lg: 6px;
  --dv-shadow: var(--mantine-shadow-sm);
}

:root[data-mantine-color-scheme="light"] {
  --mantine-color-indigo-filled: #2a70b4 !important;
  --mantine-color-indigo-filled-hover: #1f609f !important;
  --mantine-color-indigo-light: rgba(42, 112, 180, 0.10) !important;
  --mantine-color-indigo-light-hover: rgba(42, 112, 180, 0.16) !important;
  --mantine-color-indigo-light-color: #1f609f !important;
  --mantine-color-indigo-outline: #2a70b4 !important;
  --mantine-color-indigo-outline-hover: rgba(42, 112, 180, 0.06) !important;
  --mantine-color-indigo-text: #1f609f !important;
  --mantine-primary-color-filled: #2a70b4 !important;
  --mantine-primary-color-filled-hover: #1f609f !important;
  --mantine-primary-color-light: rgba(42, 112, 180, 0.10) !important;
  --mantine-primary-color-light-hover: rgba(42, 112, 180, 0.16) !important;
  --mantine-primary-color-light-color: #1f609f !important;

  --dv-page: #f3f4f6;
  --dv-sec: #ffffff;
  --dv-raised: #f8f9fa;
  --dv-bd: #d9dce1;
  --dv-bd2: #bfc4cb;
  --dv-hd: #ffffff;
}

:root[data-mantine-color-scheme="dark"] {
  --mantine-color-indigo-filled: #1f609f !important;
  --mantine-color-indigo-filled-hover: #185189 !important;
  --mantine-color-indigo-light: rgba(63, 129, 194, 0.18) !important;
  --mantine-color-indigo-light-hover: rgba(63, 129, 194, 0.26) !important;
  --mantine-color-indigo-light-color: #a9c8e6 !important;
  --mantine-color-indigo-outline: #5a93cc !important;
  --mantine-color-indigo-outline-hover: rgba(63, 129, 194, 0.08) !important;
  --mantine-color-indigo-text: #7eabd8 !important;
  --mantine-primary-color-filled: #1f609f !important;
  --mantine-primary-color-filled-hover: #185189 !important;
  --mantine-primary-color-light: rgba(63, 129, 194, 0.18) !important;
  --mantine-primary-color-light-hover: rgba(63, 129, 194, 0.26) !important;
  --mantine-primary-color-light-color: #a9c8e6 !important;

  --dv-page: #141618;
  --dv-sec: #1c1f22;
  --dv-raised: #24282c;
  --dv-bd: #33383e;
  --dv-bd2: #454b52;
  --dv-hd: #1c1f22;
}

/* --- Barre du haut : liseré rouge REEL ------------------------------------ */
.reel-header {
  border-bottom: 3px solid var(--reel-red) !important;
}
.reel-header .mantine-Tabs-tab[data-active] {
  border-bottom-color: var(--reel-red) !important;
}
.reel-header .mantine-Tabs-tab {
  font-weight: 500;
}
/* Onglet « JLCPCB » (plugin devvir, à droite de « Ventes ») : quand sa page est ouverte (aide.js pose
   data-reel-page="jlc" sur <html>), c'est lui l'onglet actif, pas « Achat en cours » (InvenTree active l'onglet
   d'après le début de l'adresse, ici /purchasing). */
html[data-reel-page="jlc"] .reel-header .mantine-Tabs-tab[data-active]:not(.reel-tab-jlc) {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
html[data-reel-page="jlc"] .reel-tab-jlc {
  background: var(--mantine-color-default-hover);
  border-bottom-color: var(--reel-red) !important;
}
.reel-navbar-msg {
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border: 1px solid var(--reel-red);
  border-radius: 999px;
  white-space: nowrap;
}

/* --- Bandeau « Mode Superutilisateur » : compacté, moins criard ----------
   Classe posée par aide.js (repérage par texte, jamais par une classe Mantine
   hachée) sur l'alerte native ; le contenu et le rôle d'alerte restent ceux
   d'InvenTree, seule la présentation change. */
.reel-banniere.mantine-Alert-root {
  --alert-radius: 0 !important;
  background: var(--dv-warn-l) !important;
  border: none !important;
  border-bottom: 1px solid var(--dv-bd) !important;
}
.reel-banniere .mantine-Alert-wrapper { align-items: center; gap: 8px; }
.reel-banniere .mantine-Alert-body { padding: 3px 0; }
.reel-banniere .mantine-Alert-title { font-size: 12.5px; display: inline; margin-right: 6px; }
.reel-banniere .mantine-Alert-label {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; line-height: 1.35; color: var(--dv-tx);
}
.reel-banniere .mantine-Alert-icon { width: 16px; height: 16px; color: var(--dv-warn); }
.reel-banniere .mantine-Alert-closeButton { width: 22px; height: 22px; min-height: 22px; }

/* --- Titre de page (variante « gradient » de Mantine) : une ligne, lisible
   Le dégradé (teinte principale -> plus sombre) tourne illisible en thème
   sombre et s'oppose au parti pris sobre/plat voulu ; on le retire partout où
   InvenTree l'utilise (titres de pièce, de stock, d'ordre...) sans toucher au
   composant Texte lui-même, très générique, qui sert ailleurs pour du texte
   normal. */
p.mantine-Text-root[data-variant="gradient"] {
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--dv-tx) !important;
  color: var(--dv-tx) !important;
}

/* --- Bulles de définition (aide.js) --------------------------------------- */
.reel-bulle {
  position: fixed;
  z-index: 10000;
  max-width: 320px;
  padding: 8px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
  background: #ffffff;
  color: #1d1f20;
  border: 1px solid #d4d4d7;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
:root[data-mantine-color-scheme="dark"] .reel-bulle {
  background: #2e2e2e;
  color: #e7e7ea;
  border-color: #4a4a4c;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.reel-bulle b,
.mantine-Tooltip-tooltip .reel-def b {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.reel-bulle b::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-right: 6px;
  vertical-align: -1px;
  background: var(--reel-red);
}
/* Définition ajoutée DANS une bulle InvenTree existante */
.mantine-Tooltip-tooltip:has(.reel-def) {
  white-space: normal !important;
  max-width: 320px !important;
}
.mantine-Tooltip-tooltip .reel-def {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(127, 127, 127, 0.35);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
}
/* --- Glossaire complet (Alt+Maj+G / Ctrl+K) -------------------------------- */
.reel-gl-fond {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
}
.reel-gl {
  width: 100%; max-width: 720px; max-height: 80vh;
  display: flex; flex-direction: column;
  background: #ffffff; color: #1d1f20;
  border: 1px solid #d4d4d7; border-top: 3px solid var(--reel-red);
  border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
:root[data-mantine-color-scheme="dark"] .reel-gl {
  background: #2e2e2e; color: #e7e7ea; border-color: #4a4a4c; border-top-color: var(--reel-red);
}
.reel-gl-tete { display: flex; align-items: center; padding: 12px 16px 6px; font-size: 16px; }
.reel-gl-tete b { font-weight: 600; }
.reel-gl-fermer {
  margin-left: auto; border: 0; background: transparent; color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.reel-gl-fermer:hover { background: rgba(127, 127, 127, 0.18); }
.reel-gl-champ {
  margin: 4px 16px 10px; padding: 8px 10px; font-size: 14px;
  border: 1px solid rgba(127, 127, 127, 0.45); border-radius: 6px;
  background: transparent; color: inherit; outline: none;
}
.reel-gl-champ:focus { border-color: var(--mantine-primary-color-filled, #2a70b4); }
.reel-gl-liste { overflow: auto; padding: 0 16px 14px; }
.reel-gl-ligne { padding: 8px 0; border-top: 1px solid rgba(127, 127, 127, 0.25); font-size: 13px; line-height: 1.45; }
.reel-gl-ligne:first-child { border-top: none; }
.reel-gl-ligne b { display: block; font-weight: 600; font-size: 13.5px; }
.reel-gl-ligne small { display: block; margin-top: 2px; opacity: 0.65; font-size: 11.5px; }
.reel-gl-vide { padding: 12px 0; opacity: 0.7; }

/* --- Palette « Outils DEV VIR » (Alt+Maj+O) : même fenêtre que le glossaire, lignes sélectionnables au clavier --- */
.reel-out .reel-gl-liste { padding-top: 4px; }
.reel-out-groupe { margin: 12px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: 0.6; }
.reel-out-groupe:first-child { margin-top: 4px; }
.reel-out-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px;
  margin: 0 -10px; padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.reel-out-ligne.sel { background: var(--dv-pri-l); }
.reel-out-ligne b { font-size: 13.5px; font-weight: 600; }
.reel-out-ligne .d { grid-column: 1; font-size: 12px; line-height: 1.4; opacity: 0.7; }
.reel-out-kbd {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap;
  font: 600 11px var(--dv-mono); padding: 2px 6px; border: 1px solid var(--dv-bd2); border-radius: 4px; opacity: 0.85;
}

/* Petit indicateur discret sur les éléments qui ont une définition */
.reel-a-aide {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(127, 127, 127, 0.55);
  text-underline-offset: 3px;
}