/* ══════════════════════════════════════════════════════════
   CAD2 Analytics - Feuille de styles globale
   ══════════════════════════════════════════════════════════ */

/* ── 1. Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 1b. Design tokens - alignés sur le thème DevExtreme Fluent SaaS Light ─
   Source : wwwroot/lib/devextreme/css/dx.fluent.saas.light.css            */
:root {
  --accent:          #5486ff;   /* --dx-color-primary  */
  --accent-bg:       #eef2ff;   /* tint clair (états actifs/sélection)     */
  --accent-bg-hover: #f5f7ff;   /* tint très clair (survol)               */
  --color-success:   #19914B;   /* --dx-color-success  */
  --color-danger:    #DC2828;   /* --dx-color-danger   */
  --color-warning:   #fde300;   /* --dx-color-warning  */
  --color-text:      #21293b;   /* --dx-color-text     */
  --color-border:    #e5e8f0;   /* --dx-color-border   */
  --color-main-bg:   #FAFBFF;   /* --dx-color-main-bg  */

  /* ── Marque Solutions CA - charte-couleurs.html ────────────────────────
     Le CHROME de l'app (fond, header, sidebar, états de navigation) suit la
     marque ; les widgets DevExtreme conservent leur thème Fluent (bleu). */
  --brand-navy:         #001952;          /* header, sidebar, titres forts   */
  --brand-navy-deep:    #0A0F27;
  --navy-surface:       #16223b;
  --brand-orange:       #DC5C01;          /* accent - états actifs, CTA      */
  --brand-orange-hover: #B54A01;
  --brand-teal:         #12769E;          /* liens, accents froids           */
  --blue-soft:          #c8d4e0;          /* texte clair sur fond marine     */
  --blue-muted:         #8fafc8;          /* texte secondaire sur marine     */
  --orange-alpha-12:    rgba(220, 92, 1, .12);   /* fond d'état actif        */
  --line-light:         rgba(255, 255, 255, .08); /* filets sur fond sombre  */
  --app-bg:             #f5f5f5;          /* fond de page (charte gray-100)  */

  --radius:          4px;        /* --dx-border-radius - aligne le radius DX */
  --component-h:     32px;       /* --dx-component-height                    */
  /* Police du thème Fluent (Roboto bundlé) - partagée HTML natif + widgets */
  --font-family: "Roboto", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Échelle typographique (encadrement des tailles - rendu pro cohérent) ──
     Appliquée aux surfaces principales : tableaux, graphiques, objectifs, header,
     sidebar. Paramètres/superadmin/onboarding : 2e passe. */
  --fs-title:   1.25rem;    /* titres de page / grands en-têtes              */
  --fs-section: 0.9375rem;  /* titres de section (cartes, tableaux) = 15px    */
  --fs-body:    0.875rem;   /* corps, cellules, items de navigation = 14px    */
  --fs-label:   0.8rem;     /* libellés secondaires, breadcrumb               */
  --fs-meta:    0.72rem;    /* méta (sous-titres de cellule, dates, badges)   */

  /* Largeur du sélecteur central de la period-bar - IDENTIQUE Indicateurs / Objectifs.
     Responsive (mobile/tablette) mais jamais dépendante de la date ni de l'onglet. */
  --period-box-width: clamp(220px, 72vw, 300px);
}

/* Le sélecteur central de la period-bar (plage Indicateurs / mois Objectifs) :
   largeur unique portée par le wrapper (pas l'élément du widget, sinon le style inline
   width:100% de DevExtreme l'écraserait). Les ◀▶ ne bougent jamais ; identique Ind./Obj. */
.period-box { width: var(--period-box-width); flex: none; }
.period-box #date-range, .period-box #month-picker { width: 100%; }
/* Objectifs : le mois est centré dans la case */
#month-picker .dx-texteditor-input { text-align: center; }

/* ── 2. Base ─────────────────────────────────────────────── */
/* Réserve en permanence la gouttière de la barre de défilement → la largeur de la page ne
   « saute » plus selon qu'elle déborde ou non (affichage stable, app comptable pro). */
html { scrollbar-gutter: stable; }
body {
  font-family: var(--font-family);
  background: var(--app-bg);
  color: var(--color-text);
  min-height: 100vh;
}

/* Pages avec carte centrée (login + onboarding) */
.pg-auth,
.pg-onboarding {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pg-auth { flex-direction: column; }

/* Pile logo + carte centrée (login onboarding : reproduit pg-auth sans changer la
   disposition « rangée » du panneau admin affiché après connexion).
   width:100% est ESSENTIEL : sans largeur définie, .auth-stack se rétrécit au contenu
   et la carte (width:100%; max-width:440px) ne se résout pas au même 440px qu'index.html. */
.auth-stack { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* ── 3. Composants partagés ──────────────────────────────── */

/* Logo */
.logo {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-navy);        /* wordmark = marine (titre fort) */
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
header .logo { font-size: 1.2rem; margin-bottom: 0; color: var(--brand-navy); }

/* Carte */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  width: 100%;
  max-width: 440px;
  padding: 36px 40px;
}

.card h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}

.subtitle {
  font-size: .875rem;
  color: #666;
  margin-bottom: 28px;
}

/* Formulaires */
.card label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Inputs « maison » uniquement - on exclut les inputs internes DevExtreme (.dx-texteditor-input)
   pour éviter le chevauchement (double bordure/padding) avec les widgets dx. */
input[type="text"]:not(.dx-texteditor-input),
input[type="email"]:not(.dx-texteditor-input),
input[type="password"]:not(.dx-texteditor-input) {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: .95rem;
  color: #111;
  transition: border-color .15s;
  outline: none;
}
input:not(.dx-texteditor-input):focus { border-color: var(--accent); }

.field { margin-bottom: 18px; }

.hint {
  font-size: .78rem;
  color: #888;
  margin-top: 6px;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border: none;
  border-radius: var(--radius);   /* aligné sur le radius DevExtreme (transition) */
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.btn:hover    { opacity: .88; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #fff; width: 100%; }
.btn-success { background: var(--color-success); color: #fff; width: 100%; }
.btn-outline  { background: transparent; border: 1px dashed #bbb; color: #555; font-size: .85rem; padding: 8px 14px; }
.btn-remove   { background: transparent; border: none; color: #aaa; font-size: 1.1rem; padding: 4px 8px; cursor: pointer; line-height: 1; }
.btn-remove:hover { color: #e53e3e; }

/* Lien discret (style « action secondaire » : bascule connexion/inscription, retour…) */
.link-discret {
  display: inline-block;
  background: none;
  border: none;
  padding: 10px 0 2px;
  margin-top: 8px;
  color: var(--brand-navy);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.link-discret:hover { text-decoration: underline; }

/* ── Habillage des écrans de connexion (index.html + onboarding.html) ── */

/* Accroche sous le wordmark */
.brand-tagline {
  font-size: .9rem;
  color: #6b7280;
  text-align: center;
  margin: 0 0 24px;
}
.logo + .brand-tagline { margin-top: -16px; }   /* resserre l'écart logo → accroche */

/* Pied de page */
.auth-footer {
  margin-top: 28px;
  text-align: center;
  font-size: .78rem;
  color: #9aa0ad;
  line-height: 1.8;
}
.auth-footer a       { color: #6b7280; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-footer .sep    { margin: 0 7px; color: #d0d4db; }

/* Fond des pages de connexion (dashboard index.html + panneau superadmin onboarding.html) :
   image BackConnex2 en plein écran, calée sur la fenêtre (`fixed`). */
body.pg-auth,
body.pg-onboarding {
  background: url("/Logo/BackConnex2.png?v=1") center center / cover no-repeat fixed;
  background-color: #0c1a2f;
}

/* onboarding.html héberge la connexion ET le panneau de configuration. Une fois connecté
   (classe .panel-actif ajoutée par doLogin), le fond redevient gris comme le reste de l'app :
   l'image BackConnex2 ne reste donc que sur l'écran de connexion. */
body.pg-onboarding.panel-actif {
  background: var(--app-bg);
}

/* Wordmark des pages de connexion : icône (Photo profile) à gauche + texte en blanc
   (même blanc que la carte). Scopé au login uniquement (exclut l'en-tête du panneau admin). */
body.pg-auth > .logo,
.pg-onboarding #login-wrap .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
body.pg-auth > .logo .logo-mark,
.pg-onboarding #login-wrap .logo .logo-mark {
  height: 1.6em;
  width: auto;
  border-radius: 6px;
}

/* ── Alignement des nombres (RÈGLE DE BASE : tous les chiffres alignés à droite) ── */
.num { text-align: right; font-variant-numeric: tabular-nums; }
input[type="number"]:not(.dx-texteditor-input) { text-align: right; font-variant-numeric: tabular-nums; }
/* Saisies numériques DevExtreme (objectifs, etc.) - alignées à droite partout.
   Les champs de DATE (dxDateBox / dxDateRangeBox) ne sont PAS visés et restent centrés. */
.dx-numberbox .dx-texteditor-input { text-align: right; font-variant-numeric: tabular-nums; }
/* Placeholder (ex. « 0 ») ancré à droite comme la valeur saisie (sinon DevExtreme le colle à gauche). */
.dx-numberbox .dx-placeholder { inset-inline-start: auto; inset-inline-end: 0; }

/* Messages */
.error-msg {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .875rem;
  margin-bottom: 18px;
  display: none;
}

.info-box {
  background: #f0faf5;
  border: 1px solid #9ae6b4;
  color: #276749;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .875rem;
  margin-bottom: 18px;
}

/* Divers */
.divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 20px 0;
}

.hidden { display: none !important; }

/* ── 4. index.html - Login & sélection de contexte ──────── */

.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  background: #f8f9fb;
  border: none;
  font-size: .875rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab-btn.active { background: var(--accent); color: #fff; }

.context-title {
  font-size: .95rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 14px;
}

.picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fff;
}
.picker-item:hover    { border-color: var(--accent); background: var(--accent-bg-hover); }
.picker-item.selected { border-color: var(--accent); background: var(--accent-bg); }

.picker-item .item-name   { font-weight: 600; font-size: .9rem; color: #111; }
.picker-item .item-detail { font-size: .8rem; color: #888; }

/* ── 5. onboarding.html - Admin onboarding ───────────────── */

/* La carte de connexion superadmin (#login-card) suit EXACTEMENT les règles
   d'affichage de index.html : mêmes taille, proportions et padding que .card
   (440px / 36px 40px / h1 1.25rem / subtitle 28px). Aucune surcharge de dimension. */
.pg-onboarding .divider     { margin: 28px 0; }

.section-title {
  font-size: .95rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
}

#succursales-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }

.succursale-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  background: #f8f9fb;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 12px;
}
.succursale-row input { background: #fff; }
.succursale-row label { font-size: .72rem; margin-bottom: 4px; }

.remove-col { display: flex; align-items: flex-end; padding-bottom: 2px; }

#result-section { display: none; }

.result-box {
  background: #f0faf5;
  border: 1px solid #9ae6b4;
  border-radius: 10px;
  padding: 24px;
}
.result-box h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #276749;
  margin-bottom: 18px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  font-size: .875rem;
  margin-bottom: 10px;
  color: #444;
}
.result-row span:last-child { font-weight: 600; color: #111; }

.code-block {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #9ae6b4;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.code-label {
  font-size: .72rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.code-value {
  font-size: 1rem;
  font-weight: 700;
  color: #2d3748;
  letter-spacing: .04em;
  font-family: monospace;
  word-break: break-all;
  margin-bottom: 14px;
}

.btn-copy {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-copy:hover  { opacity: .88; }
.btn-copy.copied { background: #18a06b; }

.succursales-result { margin-top: 16px; }
.succursales-result .label {
  font-size: .72rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.tag {
  display: inline-block;
  background: #ebf4ff;
  color: #2b6cb0;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .8rem;
  font-weight: 600;
  margin: 3px 3px 3px 0;
}

.btn-reset { margin-top: 24px; background: #f7f7f7; color: #444; border: 1px solid #ddd; width: 100%; }

/* ── 6. dashboard.html - Tableau de bord ────────────────── */

header {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  position: sticky;   /* app-frame : header fixé en haut de l'écran */
  top: 0;
  z-index: 30;
}

/* Écusson Solutions CA à gauche du wordmark (badge circulaire fond blanc) */
.header-logo { height: 40px; width: 40px; margin-right: 12px; flex-shrink: 0; }

/* Onglets intégrés dans le header */
.header-nav { display:flex; align-items:stretch; gap:0; margin-left:24px; flex:1; }
.tab-btn-main {
  padding: 0 20px;
  height: 60px;
  border: none;
  background: transparent;
  font-size: .875rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.tab-btn-main.active          { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-bg); }
.tab-btn-main:hover:not(.active) { color: #555; background: var(--accent-bg-hover); }

/* Layout sidebar + contenu */
.dashboard-body { display:flex; min-height: calc(100vh - 116px); }
.sidebar {
  width: 200px;
  min-width: 200px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  padding: 16px 0;
  flex-shrink: 0;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: .875rem;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
  user-select: none;
}
.sidebar-item:hover            { background: var(--accent-bg-hover); color: #222; }
.sidebar-item.active           { background: var(--accent-bg); color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.sidebar-item.locked           { color: #ccc; cursor: default; pointer-events: none; }
/* Entrée « Vue d'ensemble » (tableau de bord maître) - mise en avant */
.sidebar-overview              { font-weight: 700; color: #1a3c5e; }
.sidebar-overview .dx-icon     { font-size: 18px; }
.sidebar-sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 18px 7px 36px;
  font-size: .82rem; font-weight: 500; color: #666;
  cursor: pointer; border-left: 3px solid transparent;
  transition: background .12s, color .12s; user-select: none;
}
.sidebar-sub-item:hover           { background: var(--accent-bg-hover); color: #222; }
.sidebar-sub-item.active          { background: var(--accent-bg); color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.sidebar-sub-item.locked          { color: #ccc; cursor: default; pointer-events: none; }
.sidebar-divider               { height: 1px; background: #e8e8e8; margin: 8px 0; }
.sidebar-note                  { font-size: .7rem; color: #bbb; padding: 2px 18px; font-style: italic; }

/* ── Sidebar Lot B : sticky repliable + dxList (icônes DevExtreme) ───────────── */
/* Sidebar STICKY (hauteur = écran visible) → bouton de repli toujours en bas de la
   sidebar ; le contenu défile avec la barre du NAVIGATEUR (une seule barre). */
.sidebar-dx {
  /* --top-bars = hauteur RÉELLE (header + barre de contexte), mesurée en JS → aucun décalage */
  position: sticky; top: var(--top-bars, 116px); align-self: flex-start; z-index: 10;
  height: calc(100vh - var(--top-bars, 116px)); width: 200px; flex-shrink: 0;
  background: #fff; border-right: 1px solid #e8e8e8;
  display: flex; flex-direction: column; box-sizing: border-box;
  transition: width .2s ease, top .25s ease, height .25s ease;
}
.sidebar-dx.mini { width: 56px; }
/* Barre de contexte repliée → la sidebar remonte sous le header seul pour combler l'espace */
body.ctx-collapsed .sidebar-dx { top: var(--header-h, 60px); height: calc(100vh - var(--header-h, 60px)); }
.sidebar-dx #sidebar-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0; }

/* Neutralise le chrome par défaut des items dxList → on stylise nous-mêmes */
.sidebar-dx .dx-list-item { border: none !important; background: transparent; min-height: 0; }
.sidebar-dx .dx-list-item .dx-list-item-content { padding: 0; }
.sidebar-dx .dx-list-item.dx-state-hover,
.sidebar-dx .dx-list-item.dx-state-focused,
.sidebar-dx .dx-list-item.dx-state-active { background: transparent; }

.sidebar-dx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; font-size: var(--fs-body); font-weight: 500; color: #555;
  cursor: pointer; border-left: 3px solid transparent; white-space: nowrap;
  transition: background .12s, color .12s;
}
.sidebar-dx-item .dx-icon { font-size: 18px; width: 18px; text-align: center; color: #9aa7bd; flex-shrink: 0; }
.sidebar-dx-item .sidebar-dx-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/* Initiale (T/N/U/D) affichée à la place du libellé pour les sous-types en mode mini */
.sidebar-dx-item .sidebar-dx-initial { display: none; width: 18px; text-align: center; font-weight: 700; flex-shrink: 0; }
.sidebar-dx-item .sidebar-dx-badge { flex-shrink: 0; font-size: .8rem; }
.sidebar-dx-item .sidebar-dx-badge.check { color: #18a06b; font-weight: 700; }
.sidebar-dx-item:hover        { background: var(--accent-bg-hover); color: #222; }
.sidebar-dx-item.active       { background: var(--accent-bg); color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.sidebar-dx-item.active .dx-icon { color: var(--accent); }
.sidebar-dx-item.locked       { color: #ccc; cursor: default; }
.sidebar-dx-item.locked:hover { background: transparent; color: #ccc; }
.sidebar-dx-item.locked .dx-icon { color: #ddd; }
.sidebar-dx-item.overview     { font-weight: 700; color: var(--brand-navy); }
.sidebar-dx-item.overview .dx-icon { color: var(--brand-navy); }
.sidebar-dx-item.sep          { border-top: 1px solid #e8e8e8; margin-top: 6px; padding-top: 14px; }
/* Sous-types Unités : alinéa (décalés à droite du libellé parent) + zone plus mince → sous-catégories */
.sidebar-dx-item.sub          { padding: 6px 16px 6px 54px; font-size: var(--fs-label); font-weight: 500; color: #666; }
.sidebar-dx-item.sub .dx-icon { display: none; }

/* Bouton de repli (bas de la sidebar) */
.sidebar-toggle-row { border-top: 1px solid #e8e8e8; padding: 8px 10px; display: flex; justify-content: flex-end; }

/* Mode replié (mini) : icônes seules, libellés/sous-items/marqueurs masqués */
.sidebar-dx.mini .sidebar-dx-label,
.sidebar-dx.mini .sidebar-dx-badge { display: none; }
.sidebar-dx.mini .sidebar-dx-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
/* Sous-types Unités en mode mini : on garde la zone cliquable et on montre l'initiale (T/N/U/D) */
.sidebar-dx.mini .sidebar-dx-item.sub .sidebar-dx-initial { display: inline-block; }
.sidebar-dx.mini .sidebar-toggle-row { justify-content: center; }

/* ── Notes (Chantier 2) ───────────────────────────────────────────── */
/* Bouton flottant Notes (FAB) en bas à droite, façon widget d'assistance */
#notes-fab { position: fixed; bottom: 24px; right: 24px; z-index: 1400; }
.btn-notes-fab.dx-button { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.btn-notes-fab .dx-icon { font-size: 21px; }
.notes-fab-badge {
  position: absolute; top: -2px; right: -2px; background: #dc3545; color: #fff;
  font-size: .68rem; font-weight: 700; min-width: 20px; height: 20px; line-height: 20px;
  text-align: center; border-radius: 10px; padding: 0 5px; pointer-events: none;
  border: 2px solid #fff;
}
.notes-fab-badge.hidden { display: none; }

/* Panneau latéral des notes (contenu du dxPopup) */
.notes-panel  { display: flex; flex-direction: column; height: 100%; gap: 12px; }
.notes-canal  { flex-shrink: 0; }
/* Sélecteur de département (barre de titre) : choix et valeur sélectionnée en gras, même taille */
.notes-canal-box .dx-texteditor-input { font-size: var(--fs-body); font-weight: 700; }
.notes-canal-dd .dx-list-item { font-size: var(--fs-body); }   /* choix : même taille, mais pas en gras */
/* Ligne de choix : libellé à gauche, point rouge des non-lus à droite (identique à la sidebar) */
.notes-canal-item  { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.notes-canal-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-canal-badge {
  flex-shrink: 0; width: 7px; height: 7px; padding: 0;
  border-radius: 50%; background: #dc3545; opacity: .8;
}

/* Journal d'import éditable (panneau superadmin) */
.imp-succ-link { color: var(--brand-navy); font-weight: 600; text-decoration: none; cursor: pointer; }
.imp-succ-link:hover { text-decoration: underline; }
.det-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.det-titre { font-weight: 700; color: var(--brand-navy); min-width: 150px; text-align: center; }
.det-aide { font-size: .78rem; color: #888; }
.det-jour { font-weight: 700; background: #f4f6f9; }
.det-statut { font-size: .78rem; font-weight: 600; opacity: 0; transition: opacity .4s; min-width: 110px; }
.det-statut.ok  { color: #18a06b; }
.det-statut.err { color: #c0392b; }

/* Bouton « œil » des champs mot de passe : aucun fond, juste l'icône, plus petit, décalé un peu à droite */
.btn-oeil.dx-button,
.btn-oeil.dx-button.dx-state-hover,
.btn-oeil.dx-button.dx-state-active,
.btn-oeil.dx-button.dx-state-focused {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn-oeil.dx-button { transform: translateX(2px); }
.btn-oeil.dx-button .dx-button-content { padding: 2px; }
.btn-oeil.dx-button .dx-icon { font-size: 14px; color: #8a8a8a; }
/* Conversation = composant dxChat (bulles, avatars, heure, en-têtes par jour). Le panneau est
   en position:relative pour ancrer le bouton émoji en surimpression près de la zone de saisie. */
.notes-panel  { position: relative; }
.notes-chat   { flex: 1; min-height: 0; }
/* Le panneau du popup EST la section : pas de cadre autour du chat ni de la liste de messages
   (sinon « une section dans une section ») - seule la zone de saisie garde son contour. */
.notes-chat.dx-chat { height: 100%; border: none; }
/* Bulles plus proches des bords : la gouttière interne de la liste passe de 20 px à 8/10 px.
   La barre de défilement (6 px) est déjà collée à l'extrémité droite du panneau, HORS de la
   zone des bulles - les 10 px de droite lui laissent un dégagement permanent. (Même chaîne de
   sélecteurs que la règle du thème, sinon elle gagne en spécificité.) */
.notes-chat .dx-chat-messagelist>.dx-scrollable>.dx-scrollable-wrapper>.dx-scrollable-container>.dx-scrollable-content {
  padding-inline: 8px 10px; }
/* Corps de bulle personnalisé : titre (notes existantes) + contenu + mention « modifié » */
.note-corps   { user-select: text; }
.note-titre   { font-weight: 700; color: var(--brand-navy); overflow-wrap: anywhere; margin-bottom: 2px; }
.note-contenu { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-modifie { font-size: .7rem; color: #9aa7bd; font-style: italic; margin-top: 3px; }
/* Compositeur façon messagerie (Messenger/Slack) : [émoji] [zone de texte] [envoyer 36 px].
   Chaque zone est RÉSERVÉE → aucun chevauchement possible ; la barre grandit avec le texte
   (auto-agrandissement natif du dxChat, puis défilement), boutons ancrés en bas.
   GRILLE à zones nommées (pas une rangée flex) : en mode édition, le chat insère un bandeau
   .dx-chat-editing-preview dans la boîte → il occupe sa propre rangée pleine largeur, la
   rangée [émoji][texte] reste alignée dessous. */
.notes-chat .dx-chat-messagebox { padding: 8px 0 0; display: grid;
                                  grid-template-columns: auto 1fr;
                                  grid-template-areas: 'apercu apercu' 'emoji editeur';
                                  align-items: end; column-gap: 6px; }
.notes-chat .dx-chat-messagebox > .dx-chat-editing-preview { grid-area: apercu; margin-bottom: 6px; }
.notes-chat .dx-chat-messagebox > .notes-emoji-btn { grid-area: emoji; }
.notes-chat .dx-chat-messagebox-textarea-container { grid-area: editeur; min-width: 0; }
/* (le thème pose ces conteneurs en flex COLONNE → direction ligne explicite) */
.notes-chat .dx-chat-textarea { display: flex; flex-direction: row; align-items: flex-end; min-height: 0; }
.notes-chat .dx-chat-textarea .dx-texteditor-container  { flex: 1 1 auto; min-width: 0; width: auto; }
.notes-chat .dx-chat-textarea .dx-chat-textarea-toolbar { flex: 0 0 36px; width: 36px !important; }
/* Bouton émoji : colonne de gauche du compositeur, subtil, aligné sur la ligne de saisie */
.notes-emoji-btn.dx-button { height: 34px; min-width: 32px; opacity: .55; margin-bottom: 13px; }
.notes-emoji-btn.dx-button:hover { opacity: 1; }
/* Poignée ⋯ (Editer/Supprimer) au survol de SES bulles : coin supérieur droit RÉSERVÉ
   (padding du corps) → le texte ne passe jamais dessous ; ouvre le menu natif du chat. */
.notes-chat .dx-chat-messagebubble { position: relative; }
.note-corps-menu { padding-right: 16px; }
.note-menu-btn   { position: absolute; top: 1px; right: 8px; cursor: pointer; color: #8a96ab;
                   font-weight: 700; line-height: 1.2; opacity: 0; transition: opacity .12s;
                   user-select: none; }
.dx-chat-messagebubble:hover .note-menu-btn { opacity: 1; }
.note-menu-btn:hover { color: var(--brand-navy); }
/* Sélecteur d'emoji */
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-btn  { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; border-radius: 4px; }
.emoji-btn:hover { background: #eef2ff; }
.notes-readonly { flex-shrink: 0; font-size: .8rem; color: #9aa7bd; font-style: italic; padding-top: 8px; border-top: 1px solid #e8eef4; }

/* Pastilles d'action de l'historique des notes (même forme que .role-tag) */
.hist-pill   { display: inline-block; border-radius: 20px; padding: 3px 10px; font-size: .75rem; font-weight: 500; }
.pill-modif  { background: #e6f4ec; color: #19914B; }
.pill-suppr  { background: #fdeaea; color: #DC2828; }
.pill-ajout  { background: #e7eefb; color: #1F5FBF; }

.content-area                  { flex: 1; min-width: 0; padding: 28px 28px 110px; max-width: 1360px; overflow-y: auto; }
.unites-filter-bar             { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .875rem; color: #555; }
.breadcrumb                    { font-size: .8rem; color: #bbb; margin-bottom: 16px; }
.breadcrumb span               { cursor: pointer; color: var(--brand-teal); }
.breadcrumb span:hover         { text-decoration: underline; }
.ctx-id                        { font-size: .78rem; color: #999; margin-left: 2px; }

.header-right { display: flex; align-items: center; gap: 14px; }

.user-badge { display: flex; align-items: center; gap: 8px; }

/* Coin haut-droit : une seule famille (Roboto, héritée) + échelle cohérente. */
.user-name,
.user-email { font-size: .875rem; font-weight: 600; color: #222; }

/* Pastille de rôle : réutilisée sur le header marine ET dans des tableaux clairs
   → pastille claire à texte sarcelle, lisible sur les deux fonds. */
.role-tag {
  background: #eef3f8;
  color: var(--brand-teal);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Étiquette de section dans le formulaire utilisateur (dxPopup) - accès succursales / départements */
.uf-access-label {
  font-size: .8rem; font-weight: 700; color: #444;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}

.btn-logout {
  background: transparent;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-logout:hover { border-color: #999; color: #333; }

.context-bar {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: #555;
  position: sticky;   /* sous le header → reste visible au défilement */
  top: 60px;
  z-index: 29;
  transition: transform .25s ease;   /* se replie derrière le header au défilement */
}
/* Barre de contexte repliée (défilement vers le bas) : glisse derrière le header */
body.ctx-collapsed .context-bar { transform: translateY(-100%); }

.ctx-sep   { color: #bbb; }
.ctx-value { font-weight: 600; color: #222; }

.btn-change-ctx {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: .82rem;
  color: var(--brand-teal);
  cursor: pointer;
  font-weight: 600;
  padding: 0;
}
.btn-change-ctx:hover { text-decoration: underline; }
/* « Changer » est désormais un dxButton (#btn-change-ctx) → le garder à droite de la ligne */
#btn-change-ctx { margin-left: auto; }

main {
  padding: 32px 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.page-title {
  font-size: var(--fs-title);
  font-weight: 700;
  color: #111;
  margin-bottom: 24px;
}

/* ── Period selector ──────────────────────────────────── */
.period-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
}
.period-nav {
  background: #f5f7ff;
  border: 1.5px solid #c7d0f8;
  border-radius: var(--radius);
  padding: 5px 14px;
  font-size: 1.2rem;
  color: var(--accent);
  cursor: pointer;
  line-height: 1;
  font-weight: 700;
}
.period-nav:hover    { background: #eef1ff; }
.period-nav:disabled { opacity: .4; cursor: default; }
.period-label {
  font-size: .95rem;
  font-weight: 700;
  color: #222;
  min-width: 170px;
  text-align: center;
}
/* Champ de plage + menu de périodes dans la period-bar (laissés adjacents) */
#date-range { margin-right: 4px; }
/* Dates centrées dans leur champ, sans trait de soulignement */
#date-range .dx-texteditor-input { text-align: center; }
#date-range.dx-editor-underlined::before,
#date-range.dx-editor-underlined::after,
#date-range .dx-editor-underlined::before,
#date-range .dx-editor-underlined::after { border-bottom: 0 !important; }
.period-gran-toggle {
  background: #f5f7ff;
  border: 1.5px solid #c7d0f8;
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: .85rem;
  color: var(--accent);
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
}
.period-gran-toggle:hover  { background: #eef1ff; }
.period-gran-toggle.open   { background: #eef1ff; }
.period-gran-wrapper {
  position: relative;
}
.period-granularity-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1.5px solid #c7d0f8;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 200;
  flex-direction: column;
  min-width: 150px;
  overflow: hidden;
}
.period-granularity-dropdown.open { display: flex; }
.period-gran-option {
  background: none;
  border: none;
  padding: 10px 18px;
  text-align: left;
  font-size: .88rem;
  cursor: pointer;
  color: #333;
}
.period-gran-option:hover  { background: #f5f7ff; }
.period-gran-option.active { font-weight: 700; color: var(--accent); background: #eef1ff; }

/* ── 4 cases graphiques département (DevExtreme à venir) ─── */
.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.dept-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 20px 18px;
}

/* Comparaison au marché (P3) */
/* Barre d'outils Indicateurs : period-bar à gauche, bouton « Comparer au marché » à droite */
.indic-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.indic-toolbar .period-bar { margin-bottom: 0; }
.indic-toolbar .marche-bar { margin-bottom: 0; }
.marche-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.marche-note { font-size: .8rem; color: #888; }
.dept-marche { font-size: .78rem; color: var(--accent); margin-top: 6px; font-variant-numeric: tabular-nums; }
/* ── Graphiques (dxChart) - résumé Indicateurs ── */
/* Graphique maître (profit total entreprise) - plus grand que les mini-graphiques */
.chart-master-card  { background:#fff; border:1px solid #e8e8e8; border-radius:12px;
                      padding:16px 18px; margin-bottom:18px; }
.chart-master-sub   { font-size:var(--fs-meta); color:#9aa7bd; font-weight:400; }
.chart-master-area  { width:100%; }

/* Titre de zone de graphiques (« Profit brut total - entreprise ($) », « Profit brut par
   départements ») : HORS des cartes, typographie unique (15px gras 800 bleu marine) ;
   sous-titre optionnel (.chart-master-sub) aligné à droite. Les titres INTERNES des cartes
   sont fournis par dxChart (renderLineChart, gabarit « Libellé - montant »). */
.dept-charts-title  { display:flex; align-items:baseline; justify-content:space-between;
                      gap:12px; flex-wrap:wrap; margin:0 0 10px;
                      font-size:var(--fs-section); font-weight:800; color:var(--brand-navy); }

/* Graphiques de la vue détail département (1-2 côte à côte) */
/* Grille responsive : autant de graphiques que la largeur permet (3 de front en desktop,
   reflux propre en 2+1 puis 1 sur écrans étroits). minmax pilote le point de bascule. */
.dept-charts    { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
                  gap:14px; margin-bottom:22px; align-items:start; }
.dept-charts:empty { display:none; margin:0; }
.dept-chart-card { position:relative; background:#fff; border:1px solid #e8e8e8; border-radius:10px; padding:12px 14px; }
.dept-chart-box  { width:100%; height:280px; }
/* Agrandi : pleine largeur (toutes les colonnes) + plus haut, comme le graphique maître. */
.dept-chart-card.expanded            { grid-column:1 / -1; }
.dept-chart-card.expanded .dept-chart-box { height:400px; }
.chart-expand    { position:absolute; top:6px; right:6px; z-index:3; }
.dept-charts.single { grid-template-columns:1fr; }  /* 1 seul graphique → pleine largeur */
/* Service : grille figée 3 colonnes × 2 rangées, sans reflux au redimensionnement.
   La spécificité (.dept-charts.grid-3) prime sur la media query de reflux ci-dessous. */
.dept-charts.grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
/* Inventaire : grille figée 2 colonnes (2×2), sans reflux au redimensionnement. */
.dept-charts.grid-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:760px) { .dept-charts:not(.grid-3):not(.grid-2) { grid-template-columns:1fr; } }

/* Zone « notes » en pied de page (règle de structure : tous les textes descriptifs ici) */
.page-notes      { margin-top:22px; padding-top:14px; border-top:1px solid #eef0f4; }
.page-notes .note-line { font-size:.8rem; color:#8a93a3; font-style:italic;
                   line-height:1.55; margin:5px 0; }
.page-notes .note-line strong { color:#6b7280; font-style:normal; }
/* Encadré « Calculs » : formules numérotées, renvois ¹²³ dans les libellés des lignes concernées */
.calc-box        { background:#f7f9fc; border:1px solid #e3e9f2; border-radius:8px;
                   padding:10px 14px 8px; margin-bottom:12px; max-width:680px; }
.calc-box-title  { display:flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700;
                   text-transform:uppercase; letter-spacing:.05em; color:#7f8ba0; margin-bottom:5px; }
.calc-box-title .dx-icon-info { font-size:.9rem; color:#9aa5b8; }
.calc-line       { font-size:.8rem; color:#5d6a80; line-height:1.7; }
/* Renvois ¹²³ : police de l'app (héritée), graisse normale et corps réduit - trait fin, discret */
.calc-line sup   { color:#98a3b6; font-weight:400; font-size:.72em; margin-right:5px; }
/* Renvoi dans le libellé d'une ligne de tableau (survol = formule en infobulle) */
.calc-ref        { color:#a5aebf; font-weight:400; font-size:.68em; margin-left:3px; cursor:help; }

/* Graphique de la vue Objectifs (réagit à la saisie) */
/* Page Objectifs : conteneur transparent (fond gris de l'app, comme les Indicateurs) */
.obj-page        { margin-top:24px; }
.obj-chart-card  { background:#fff; border:1px solid #e8e8e8; border-radius:10px;
                   padding:12px 14px; margin-bottom:18px; }
.obj-chart-box   { width:100%; }

/* Menu « Copier » des Objectifs (dxMenu) - aspect bouton outlined NEUTRE, identique aux
   flèches dxButton outlined de la period-bar (bordure grise, texte sombre, pas de bleu accent). */
.obj-copy-menu, .obj-copy-menu .dx-menu-horizontal { background:transparent; }
.obj-copy-menu .dx-menu-item-has-text { border:1px solid #d6dbe2; border-radius:var(--radius); }
.obj-copy-menu .dx-menu-item-has-text .dx-menu-item-text,
.obj-copy-menu .dx-menu-item-has-text .dx-icon { color:#424f60; }
.obj-copy-menu .dx-menu-item-has-text.dx-state-hover { background:#f4f6f9; }

.dept-note            { font-size: .8rem; color: #667; font-style: italic; margin: 4px 0 14px; }
.metrics-group        { border: 1.5px solid #c8d8ea; border-radius: 12px;
                        padding: 14px 16px 6px; margin-bottom: 20px; background: #f4f8fc; }
.metrics-group-title  { font-size: .78rem; font-weight: 800; text-transform: uppercase;
                        letter-spacing: .09em; color: #1a3c5e; margin-bottom: 12px;
                        display: flex; align-items: center; justify-content: space-between;
                        cursor: pointer; user-select: none; }
.group-toggle         { background: none; border: none; cursor: pointer; color: inherit;
                        font-size: .9rem; line-height: 1; padding: 2px 4px;
                        transition: transform .15s; }
.metrics-group.collapsed .group-toggle      { transform: rotate(-90deg); }
.metrics-group.collapsed .metrics-group-body { display: none; }
.metrics-group.collapsed .metrics-group-title { margin-bottom: 0; }
/* Groupes repliables (en-tête .section-toggle des .metrics-group) */
.section-toggle { cursor: pointer; user-select: none; }
.metrics-group.vert             { border-color: #a8d5b5; background: #f0f8f2; }
.metrics-group.vert .metrics-group-title { color: #1a4a2e; }
.metrics-group.orange           { border-color: #f5c89a; background: #fef6ec; }
.metrics-group.orange .metrics-group-title { color: #7a3a00; }
.metrics-group.violet           { border-color: #d4c8e8; background: #f8f5fc; }
.metrics-group.violet .metrics-group-title { color: #4a3570; }
.metrics-group.gris             { border-color: #d8dce0; background: #f7f8f9; }
.metrics-group.gris .metrics-group-title { color: #4a5258; }
/* Tableaux « état des résultats » des Indicateurs (Chantier 1 - pilote Unités) */
.indic-grid { margin-top: 16px; }
/* Corps des tableaux en font 400 (défaut DevExtreme) - look comptable sobre, sans gras. */
.indic-grid .grid-cell-v { color: var(--color-text); }
.indic-grid .grid-cell-s { font-size: var(--fs-meta); color: #8a93a6; margin-top: 2px; line-height: 1.2; }
/* Titre + repli dans le toolbar dxDataGrid (comme Administration, mais collapsible) */
.indic-grid-title { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
                    font-weight: 600; font-size: var(--fs-section); color: var(--brand-navy); padding: 4px 2px; }
.indic-grid-chevron { display: inline-block; font-size: .9rem; transition: transform .15s; }
.indic-grid.collapsed .indic-grid-chevron { transform: rotate(-90deg); }
.indic-grid.collapsed .dx-datagrid-headers,
.indic-grid.collapsed .dx-datagrid-rowsview { display: none; }
/* En-tête gris-bleu léger (≠ fond d'app #f5f5f5) - GLOBAL : toutes les grilles de l'app, pour une
   cohérence stricte des tableaux (Indicateurs, Objectifs, Historique, panneaux superadmin, etc.). */
.dx-datagrid-headers .dx-header-row > td { background-color: #e9edf3; }
.indic-grid .dx-datagrid-headers .dx-header-row > td { white-space: normal; }
/* Colonne accent (Total / mois courant) en bleu accent léger */
.indic-grid .dx-data-row > td.grid-col-accent { background-color: var(--accent-bg); }
.indic-grid .dx-datagrid-headers .dx-header-row > td.grid-col-accent { background-color: #dfe7ff; }
/* Règle générale : lignes « Total » / profit total (data.estTotal) en gras 600, SANS couleur -
   seule emphase admise dans le corps (le reste est en 400). 1re règle : cellules en texte simple
   (libellé des grilles) ; 2e : la valeur (.grid-cell-v) ; 3e : sous-titres gardés en 400. */
.indic-grid .dx-data-row.grid-row-total > td { font-weight: 600; }
.indic-grid .dx-data-row.grid-row-total .grid-cell-v { font-weight: 600; }
.indic-grid .dx-data-row.grid-row-total .grid-cell-s { font-weight: 400; }
/* Lignes de groupe = sous-sections (vue par type) */
.indic-grid .dx-group-row > td { font-weight: 600; color: var(--brand-navy); background-color: #eef1f6; }
/* 1re section fusionnée dans la ligne d'en-tête (grilleParType) → sa ligne de groupe est masquée */
.indic-grid .dx-group-row.grid-groupe-en-tete { display: none; }
/* Grilles d'objectifs éditables : mêmes tableaux que les Indicateurs, cellules saisissables.
   Curseur pointeur sur les cellules de valeurs ; cellules calculées/verrouillées grisées. */
.obj-grid .dx-data-row > td { cursor: pointer; }
.obj-grid .dx-data-row > td.grid-col-metrique,
.obj-grid .dx-data-row > td.obj-cell-vide { cursor: default; }
.obj-grid .dx-data-row > td.obj-cell-locked { cursor: default; color: #9aa3b2; }
/* Objectif non inscrit : « 0 » gris très pâle, même invitation visuelle que le placeholder de saisie */
.obj-grid .obj-cell-zero { color: #c9d0dd; }

/* ── États chargement / vide ──────────────────────────── */
.metrics-state     { text-align: center; padding: 40px; color: #bbb; font-size: .9rem;
                     background: #fff; border: 1.5px dashed #e0e0e0; border-radius: 8px; }
.metrics-state small { display: block; margin-top: 6px; font-size: .8rem; }

/* ── 7. dashboard.html - Import DMS ─────────────────────── */

.import-section {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  padding: 28px 24px;
  margin-top: 24px;
}
.import-section h2 {
  font-size: .95rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 16px;
}
.btn-import {
  padding: 9px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-import:hover    { opacity: .88; }
.btn-import:disabled { opacity: .45; cursor: not-allowed; }

.import-feedback {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  display: none;
}
.import-feedback.success {
  background: #f0faf5;
  border: 1px solid #9ae6b4;
  color: #276749;
}
.import-feedback.error {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
}

.import-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════
   Panneau admin - onboarding.html
   ══════════════════════════════════════════════════════════ */

/* ── Coquille : même structure que le dashboard (header + corps sidebar/contenu) ── */
#admin-shell { width:100%; }
#admin-shell .dashboard-body   { min-height: calc(100vh - 60px); }  /* header seul (pas de context-bar) */
/* Identique à .content-area de l'app (cohérence 100 %) : même largeur, padding et défilement.
   min-width:0 empêche une grille large (ex. suivi imports) de pousser une barre horizontale. */
#admin-shell #tab-content-area { flex:1; min-width:0; max-width:1360px; padding:28px; overflow-y:auto; }
#admin-shell .header-right     { margin-left:auto; }  /* pousse courriel + déconnexion à droite */
#admin-shell .sidebar-dx       { top: 60px; height: calc(100vh - 60px); }  /* header seul (pas de context-bar) */
.ob-tab-content { min-height:420px; padding:18px 6px; }

/* Badge « Superadmin » et courriel dans le header du panneau */
.admin-brand-role {
  margin-left:10px; font-size:.72rem; font-weight:700; color:var(--accent);
  background:var(--accent-bg); border-radius:20px; padding:3px 12px;
  text-transform:uppercase; letter-spacing:.04em;
}
.admin-topbar-email { font-size:.85rem; color:#555; }

/* ── Badges ─────────────────────────────────────────────── */
.id-badge {
  font-size:.70rem; color:#999; background:#f0f0f0;
  border-radius:4px; padding:1px 5px; font-family:monospace;
  margin-left:4px; font-weight:400; vertical-align:middle;
}
.badge-actif   { background:#e6f4ea; color:#1a7a3c; border-radius:20px; padding:2px 10px; font-size:.78rem; font-weight:600; }
.badge-inactif { background:#fce8e6; color:#c00;    border-radius:20px; padding:2px 10px; font-size:.78rem; font-weight:600; }

/* ── Détail master-detail d'une concession (Gestion) ──────── */
.gestion-detail { padding:4px 2px; }
.detail-subtitle { font-size:.75rem; font-weight:700; color:#555; text-transform:uppercase; letter-spacing:.05em; margin:14px 0 8px; }
.inline-form { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.activation-block { background:#f0f4ff; border:1px solid #d0d9f5; border-radius:8px; padding:12px 16px; margin-bottom:16px; }
.activation-block code { font-family:monospace; font-size:.85rem; background:#fff; border:1px solid #d0d9f5; border-radius:6px; padding:5px 12px; display:inline-block; word-break:break-all; color:#333; }
.danger-zone { border-top:1px dashed #f5c6c3; padding-top:10px; margin-top:14px; }

/* Suivi des imports DMS - grille détail compacte (succursales × jours) */
.imp-detail-grid { margin: 4px 0 8px; }
.imp-detail-grid td { padding: 4px 3px !important; }
.imp-detail-grid .dx-header-row td { font-size: .7rem; color: #777; text-align: center; }

/* ══════════════════════════════════════════════════════════
   Responsive 11"→24" (la sidebar repliable libère déjà de l'espace en largeur)
   ══════════════════════════════════════════════════════════ */

/* Très grands écrans (24"+) : on exploite plus de largeur pour les grilles/graphiques */
@media (min-width: 1800px) {
  .content-area              { max-width: 1600px; }
  #admin-shell #tab-content-area { max-width: 1600px; }
}

/* Petits portables (≈13") : on resserre les marges pour gagner de la surface utile */
@media (max-width: 1180px) {
  .content-area              { padding: 20px 18px; }
  #admin-shell #tab-content-area { padding: 20px 18px; }
}

/* Très étroit (≈11" ou fenêtre réduite) : marges minimales + barres d'outils qui passent à la ligne */
@media (max-width: 860px) {
  .content-area              { padding: 16px 14px; }
  #admin-shell #tab-content-area { padding: 16px 14px; }
  .period-bar                { flex-wrap: wrap; }
}