/* ══════════════════════════════════════════════════════════
   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; }

/* ── 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; }
.notes-liste  { flex: 1; overflow-y: auto; }
/* Items de notes : curseur normal (pas le « doigt » de dxList) + texte sélectionnable/copiable */
.notes-liste .dx-list-item { cursor: default; user-select: text; }
.note-item    { position: relative; border: 1px solid #e8eef4; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #fff; overflow: hidden; cursor: auto; }
.note-titre, .note-contenu, .note-meta { user-select: text; cursor: text; }
.note-titre   { font-weight: 700; color: var(--brand-navy); font-size: .9rem; overflow-wrap: anywhere; padding-right: 44px; }
/* Actions (modifier/supprimer) : visibles seulement au survol de la note */
.note-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 8px;
                opacity: 0; transition: opacity .12s; }
.note-item:hover .note-actions, .note-item:focus-within .note-actions { opacity: 1; }
.note-act     { cursor: pointer; color: #aab3c2; font-size: 15px; }
.note-act:hover { color: var(--accent); }
.note-act[data-act="del"]:hover { color: #dc3545; }
.note-contenu { font-size: .85rem; color: #333; margin-top: 4px; white-space: pre-wrap; line-height: 1.4; overflow-wrap: anywhere; }
.note-meta    { font-size: .72rem; color: #9aa7bd; margin-top: 6px;
                max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pastille de couleur de communication (auteur) - volontairement très légère */
.note-dot     { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
                margin-right: 6px; vertical-align: middle; opacity: .55; }
/* Mes notes : décalées à droite, bord droit aligné sur le sélecteur de département.
   On annule le retrait horizontal des items dxList → la largeur utile des bulles = celle du
   panneau (donc du sélecteur), pour un alignement exact des bords. */
.notes-liste .dx-list-item-content { padding-left: 0; padding-right: 0; }
/* Barre de défilement masquée - le défilement reste possible (molette/tactile) */
.notes-liste .dx-scrollable-scrollbar.dx-scrollbar-vertical { display: none !important; }
.note-item.note-sent  { width: fit-content; max-width: 85%; margin-left: auto; background: #f3f7ff; border-color: #dde7fb; }
.note-item.note-other { width: fit-content; max-width: 85%; margin-right: auto; }
/* Formulaire en grille : [+titre] [zone de texte (emoji intégré à droite)] [publier].
   Le champ titre occupe la MÊME colonne que la zone de texte → même largeur exactement. */
.notes-form   { flex-shrink: 0; border-top: 1px solid #e8eef4; padding-top: 10px;
                display: grid; grid-template-columns: auto 1fr auto; column-gap: 6px; row-gap: 6px; align-items: end; }
.notes-titre-wrap        { grid-column: 2 / 3; grid-row: 1; }
.notes-titre-wrap.hidden { display: none; }
#notes-titre-toggle  { grid-column: 1; grid-row: 2; }
.notes-input-wrap    { grid-column: 2; grid-row: 2; position: relative; min-width: 0; }
#notes-publier       { grid-column: 3; grid-row: 2; }
.notes-form-actions  { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: flex-end; }
.notes-form .dx-button { height: 36px; min-width: 36px; }
/* Emoji subtil intégré à droite de la zone de texte (façon Messenger), centré sur une ligne */
.notes-emoji-btn { position: absolute; right: 2px; bottom: 2px; }
.notes-emoji-btn.dx-button { height: 32px; min-width: 32px; opacity: .45; }
.notes-emoji-btn.dx-button:hover { opacity: 1; }
.notes-input-wrap .dx-texteditor-input { padding-right: 32px; }
/* 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-head  { display:flex; align-items:baseline; justify-content:space-between;
                      gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.chart-master-head > span:first-child { font-size:var(--fs-section); font-weight:800; color:var(--brand-navy); }
.chart-master-sub   { font-size:var(--fs-meta); color:#9aa7bd; }
.chart-master-area  { width:100%; }

/* Grille 2×3 de mini-graphiques par département */
.mini-charts-grid   { display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
                      gap:14px; margin-bottom:28px; }
.mini-chart-card    { background:#fff; border:1px solid #e8e8e8; border-radius:10px;
                      padding:12px 14px; cursor:pointer;
                      transition:box-shadow .15s, border-color .15s; }
.mini-chart-card:hover { border-color:var(--accent); box-shadow:0 2px 10px rgba(84,134,255,.12); }
.mini-chart-head    { display:flex; align-items:baseline; justify-content:space-between;
                      gap:8px; margin-bottom:4px; }
.mini-chart-val     { font-size:1.05rem; font-weight:800; color:#111;
                      font-variant-numeric:tabular-nums; }
.mini-chart-area, .dept-chart-area { width:100%; }
@media (max-width:900px) { .mini-charts-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px) { .mini-charts-grid { grid-template-columns:1fr; } }

/* 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; }

/* 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; }

/* ── KPI - structure minimale (sera remplacée par DevExtreme) ── */
.metrics-section   { margin-bottom: 20px; background: #fff; border: 1px solid #e2e8f0;
                     border-radius: 10px; padding: 16px 18px 12px; }
.metrics-heading   { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .07em; color: #1a3c5e; margin-bottom: 12px;
                     padding-bottom: 8px; border-bottom: 1.5px solid #e8eef4; }
.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; }
/* Sections repliables (vue résumé) */
.section-toggle { cursor: pointer; user-select: none; }
.metrics-heading.section-toggle { display: flex; align-items: center; justify-content: space-between; }
.metrics-section.collapsed .group-toggle         { transform: rotate(-90deg); }
.metrics-section.collapsed .metrics-section-body { display: none; }
.metrics-section.collapsed .metrics-heading      { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.metrics-group .metrics-section { margin-bottom: 10px; }
.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; }
.indic-grid .grid-cell-v { font-weight: 600; color: var(--color-text); }
.indic-grid .grid-cell-s { font-size: var(--fs-meta); color: #8a93a6; margin-top: 2px; line-height: 1.2; }
.indic-grid .grid-col-metrique { font-weight: 500; }
/* Cartes repliables des Objectifs (pilote Service) - look cohérent avec les tableaux Indicateurs */
.obj-card       { border:1px solid var(--color-border); border-radius:8px; background:#fff; margin-bottom:14px; }
.obj-card-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:10px 14px; background:#f7f9fc; border-bottom:1px solid var(--color-border);
                  border-radius:8px 8px 0 0; }
.obj-card.collapsed .obj-card-title { border-bottom:none; border-radius:8px; }
.obj-card.collapsed .indic-grid-chevron { transform:rotate(-90deg); }
.obj-card.collapsed .obj-card-body { display:none; }
.obj-card-body  { padding:14px; }
/* Carte pleine largeur : les champs remplissent l'espace (reflux responsive) */
.obj-card-body .obj-fields { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
/* 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; }
/* Lignes de groupe = sous-sections (vue par type) */
.indic-grid .dx-group-row > td { font-weight: 600; color: var(--brand-navy); background-color: #eef1f6; }
.kpi-grid          { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 260px)); gap: 12px; }
.kpi-card          { background: #f8f9fb; border: 1px solid #e8eef4; border-radius: 8px; padding: 16px; }
.kpi-label         { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .04em; color: #aaa; margin-bottom: 6px; }
.kpi-value         { font-size: 1.4rem; font-weight: 800; color: #111;
                     text-align: right; font-variant-numeric: tabular-nums; }
.kpi-detail        { font-size: .73rem; color: #bbb; margin-top: 4px; text-align: right; }

/* ── É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;
}


/* ── 9. Objectifs ────────────────────────────────────────────── */

.obj-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin-bottom: 8px;
}
@media (max-width: 700px) {
  .obj-fields { grid-template-columns: 1fr; }
}

/* Sous-navigation Unités dans Objectifs */
/* Unités - 3 rectangles côte à côte */
.obj-unites-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}
.obj-unite-section {
  background: #f8f9fb;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}
.obj-unite-title {
  font-weight: 600;
  font-size: .85rem;
  color: #1a3c5e;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.obj-pvr-inputs {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.obj-pvr-unit {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .85rem;
  font-weight: 600;
  color: #555;
  flex: 1;
  min-width: 0;
}
/* dxNumberBox d'objectif : remplit son conteneur mais plafonné à une largeur pro
   (assez large pour de gros montants, sans s'étirer démesurément dans une box pleine largeur). */
.obj-num { width: 100%; max-width: 240px; }
.obj-pvr-unit .obj-num { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .obj-unites-grid { grid-template-columns: 1fr; }
}

/* Cartes groupées (Service 3 col., Pièces 4 col.) - responsive */
.obj-service-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.obj-service-card {
  background: #f8f9fb;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}
.obj-service-card-title {
  font-weight: 600;
  font-size: .85rem;
  color: #1a3c5e;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* Champs empilés verticalement dans chaque carte-colonne */
.obj-service-card .obj-fields { grid-template-columns: 1fr; }
/* Inventaire - box séparés Unités / Pièces */
.obj-inv-box {
  background: #f8f9fb;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.obj-rotation-note {
  font-size: .8rem;
  line-height: 1.45;
  color: #555;
  background: #eef3f9;
  border-left: 3px solid #1a3c5e;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.obj-rotation-note strong { color: #1a3c5e; }

/* Pièces tableau */
.obj-pieces-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
  font-size: .88rem;
}
.obj-pieces-table th {
  text-align: left;
  padding: 8px 10px;
  background: #f0f4f8;
  color: #1a3c5e;
  font-weight: 600;
  border-bottom: 2px solid #dde3ea;
}
.obj-pieces-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #eaecef;
  vertical-align: middle;
}
.obj-pieces-table tr:last-child td {
  font-weight: 600;
  background: #f8f9fb;
}

/* ══════════════════════════════════════════════════════════
   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; }
  .kpi-grid                  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}