/* ============================================================
   Mini ERP — CSS Responsive (Mobile + Desktop)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@media (display-mode: standalone) {
  :root { --safe-b: env(safe-area-inset-bottom); }
}

:root {
  /* Hauteur RÉELLE de la barre du bas mobile : 10 + 20 (icône) + 3 (gap)
     + 12 (libellé) + 8 + 1px de bordure. Le contenu réservait 90px en dur,
     soit ~30px de trop — d'où une bande vide au-dessus de la barre. Une seule
     variable pour les deux : ils ne peuvent plus diverger. */
  --bottom-nav-h: 56px;

  /* ⚠ Encoche BASSE : nulle dans un onglet de navigateur, réelle en application
     installée (PWA).
     Dans un onglet, le navigateur réserve DÉJÀ la zone de gestes : y ajouter
     `env(safe-area-inset-bottom)` empilait deux réserves, d'où une bande blanche
     entre la barre du bas et les boutons du téléphone. Elle disparaissait au premier
     défilement — le navigateur recalcule alors l'inset à 0 —, ce qui la faisait
     passer pour un défaut d'affichage passager plutôt que pour une marge en trop.
     En mode `standalone` il n'y a plus de navigateur pour la réserver : on la remet. */
  --safe-b: 0px;

  /* Brand / primary — user-configurable via JS */
  --primary:   #7A7B7E;
  --primary-d: #5f6063;
  --primary-l: rgba(122,123,126,.12);
  /* Teinte claire de la marque : fonds de pastilles, lignes actives, avatars.
     Recalculée par applyTheme() comme --primary-l. Sans cette définition, tous les
     `var(--primary-soft, #e0e7ff)` du code retombaient sur un indigo FIXE — d'où des
     pastilles indigo à côté d'une couleur de société verte ou rouge. */
  --primary-soft: rgba(122,123,126,.16);

  --blue:    #1a7fe8;   /* links, focus, charts */
  --green:   #0eb87f;
  --orange:  #f5803e;
  --red:     #e53e3e;
  --purple:  #8b5cf6;
  --dark:    #1a1a2e;

  --sidebar-bg:   #1f2129;   /* dark sidebar */
  --sidebar-text: rgba(255,255,255,.72);
  --sidebar-w:    230px;
  --sidebar-w-col: 64px;     /* collapsed width */

  --bg:      #f4f5f7;
  --white:   #ffffff;
  /* --card et --hover étaient utilisés (39 fois) mais JAMAIS définis : les valeurs de
     repli inscrites dans chaque `var(--card, #fff)` faisaient illusion, sauf là où le
     repli manquait — l'en-tête d'accordéon de la page Paramètres se retrouvait alors
     sans fond du tout (var() invalide → propriété ignorée). */
  --card:    #ffffff;
  --hover:   #f3f4f6;
  --border:  #e4e6ea;
  --text:    #1a1a2e;
  --muted:   #6b7280;
  --radius:  10px;
  --shadow:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
}

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================
   LOGIN
   ============================================================ */
#login-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #15321f 0%, #11151c 45%, #0c0e13 100%);
  padding: 1.5rem;
  overflow: hidden;
}
/* Arrière-plan animé (grille interactive) */
#login-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.login-card {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 22px;
  padding: 2.75rem 2.5rem;
  width: 100%;
  max-width: 430px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(31,170,89,.08);
  animation: loginCardIn .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes loginCardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.login-logo { text-align: center; margin-bottom: 2rem; }
/* Logo agrandi avec halo translucide */
.login-mark {
  width: 96px; height: 96px;
  margin: 0 auto .9rem;
  border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31,170,89,.10);
  border: 1px solid rgba(31,170,89,.18);
  box-shadow: 0 12px 34px rgba(31,170,89,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.login-mark img { width: 78px; height: 78px; display: block; }
.login-logo h1 { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: .3px; }
.login-logo p  { font-size: 13px; color: var(--muted); margin-top: 4px; }
/* Bouton login pleine largeur plus présent */
#login-screen .btn-full { margin-top: .4rem; padding: 13px; font-size: 15px; }

/* ============================================================
   APP LAYOUT — DESKTOP SIDEBAR + MOBILE BOTTOM NAV
   ============================================================ */
#app {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar (desktop only) ────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  box-shadow: 2px 0 12px rgba(0,0,0,.18);
  transition: width .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
/* Collapsed sidebar — icons only */
.sidebar.collapsed { width: var(--sidebar-w-col); }
.sidebar.collapsed .sidebar-app-title,
.sidebar.collapsed .sidebar-sage-status,
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .item-label,
.sidebar.collapsed .user-name,
.sidebar.collapsed .user-role { opacity: 0; max-width: 0; overflow: hidden; }
.sidebar.collapsed .sidebar-logo {
  justify-content: center; gap: 0; padding: 10px 0 9px; flex-direction: column;
}
.sidebar.collapsed .sidebar-nav { padding-top: 9px; }
.sidebar.collapsed .logo-sm { flex-shrink: 0; }
.sidebar.collapsed .sidebar-toggle { display: none; }
.sidebar.collapsed .logo-sm { cursor: pointer; }
.sidebar.collapsed .logo-sm:hover { transform: scale(1.06); transition: transform .12s; }
.sidebar.collapsed .sidebar-item,
.sidebar.collapsed .sidebar-group-hdr { justify-content: center; gap: 0; padding: 7px 0; }
/* En mode réduit : les titres de section deviennent de fins séparateurs entre blocs */
.sidebar.collapsed .sidebar-section-title {
  font-size: 0 !important; line-height: 0; color: transparent;
  margin: 8px 12px !important; padding: 0; height: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  opacity: 1; max-width: none; overflow: hidden; display: block;
}
/* Pas de séparateur avant le tout premier bloc (Principal → dashboard) */
.sidebar.collapsed .sidebar-nav > .sidebar-section-title:first-child { display: none; }
.sidebar.collapsed .sidebar-user { justify-content: center; gap: 0; padding: 8px 0; }
.sidebar.collapsed .sidebar-footer .sidebar-item { justify-content: center; gap: 0; }
/* En mode réduit, les libellés masqués ne doivent rien occuper (évite le décalage des icônes
   et le grand vide sous le logo : le titre + statut prenaient leur hauteur en colonne) */
.sidebar.collapsed .item-label,
.sidebar.collapsed .user-name,
.sidebar.collapsed .user-role,
.sidebar.collapsed .sidebar-app-title,
.sidebar.collapsed .sidebar-sage-status { display: none; }

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.logo-sm {
  width: 34px; height: 34px;
  background: var(--primary);
  border-radius: 9px;
  color: #fff; font-size: 15px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-app-title { font-size: 14px; font-weight: 800; color: #fff; flex: 1; white-space: nowrap; transition: all .22s; }
.sidebar-sage-status { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 1px; white-space: nowrap; transition: all .22s; }

/* Sidebar collapse toggle button */
.sidebar-toggle {
  width: 26px; height: 26px; flex-shrink: 0;
  background: rgba(255,255,255,.1); border: none; border-radius: 6px;
  cursor: pointer; color: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; margin-left: auto;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.22); color: #fff; }
.sidebar-toggle svg { width: 14px; height: 14px; }

.sidebar-nav { flex: 1; padding: 4px 8px 10px; overflow-y: auto; overflow-x: hidden; }
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

.sidebar-section-title {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 8px 4px; white-space: nowrap;
  transition: all .22s;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--sidebar-text);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  border: none; background: none;
  width: 100%; text-align: left;
  margin-bottom: 2px;
  transition: background .15s, color .15s;
  white-space: nowrap; overflow: hidden;
}
.sidebar-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-item.active {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}
.sidebar-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-item .item-label { flex: 1; transition: all .22s; }

.sidebar-footer {
  padding: 10px 8px 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  overflow: hidden;
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.user-name  { font-size: 13px; font-weight: 700; line-height: 1.2; color: #fff; white-space: nowrap; transition: all .22s; }
.user-role  { font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; transition: all .22s; }

/* ── Main content area ────────────────────────────────────── */
.main-area {
  flex: 1;
  min-width: 0;            /* flex-item : autorise le rétrécissement sous la largeur du contenu
                              (sinon un contenu large — kanban CRM — déborde la page horizontalement) */
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left .22s cubic-bezier(.4,0,.2,1);
}
.main-area.sidebar-collapsed { margin-left: var(--sidebar-w-col); }

/* ── Top header (desktop) ─────────────────────────────────── */
.app-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.header-left  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-title    { font-size: 16px; font-weight: 700; color: var(--text); }
.app-sub      { display: none; } /* caché desktop, visible mobile */

/* ── Global Search Bar ────────────────────────────────────── */
.header-search {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
.header-search-input {
  width: 100%;
  padding: 8px 14px 8px 38px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: #f8f9fb;
  color: var(--text);
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.header-search-input:focus {
  background: var(--white);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-l);
}
.header-search-input::placeholder { color: #9ca3af; }
/* Page sans liste cherchable : barre désactivée (pas de recherche croisée). */
.header-search-input.is-disabled,
.header-search-input:disabled {
  background: var(--bg, #f1f2f4);
  border-color: var(--border);
  color: #9ca3af;
  cursor: not-allowed;
  opacity: .6;
}
.header-search-input.is-disabled::placeholder,
.header-search-input:disabled::placeholder { color: #b6bcc4; }
.header-search-icon {
  position: absolute;
  left: 11px; top: 50%; transform: translateY(-50%);
  color: #9ca3af; pointer-events: none;
  width: 16px; height: 16px;
}

/* ── Page content ─────────────────────────────────────────── */
.page-header {
  padding: 20px 28px 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.page-header h2 { font-size: 20px; font-weight: 800; color: var(--text); }
.page-content   { padding: 20px 24px 48px; flex: 1; min-width: 0; }

/* ── Droits / permissions : matrice groupée par module ───────── */
.perm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.perm-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--card, #fff);
  border-bottom: 2px solid var(--border);
}
.perm-res-col { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
.perm-act-col { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; padding: 8px 6px; white-space: nowrap; }
.perm-group-row td {
  padding: 12px 12px 5px;
  background: linear-gradient(var(--bg-soft, #f6f8fb), var(--bg-soft, #f6f8fb));
}
.perm-group {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--primary);
}
.perm-group svg { opacity: .8; }
.perm-row { border-top: 1px solid var(--border); transition: background .12s; }
.perm-row:hover { background: var(--bg-soft, #f6f8fb); }
.perm-res { text-align: left; padding: 9px 12px 9px 26px; font-weight: 500; color: var(--text); }
.perm-cell { text-align: center; padding: 7px 6px; }
.perm-cell input { width: auto; min-width: 0; cursor: pointer; accent-color: var(--primary); }
.perm-cell input:disabled { cursor: not-allowed; opacity: .5; }

/* ── Page « À propos » (licence + éditeur RunSoft) ───────────── */
.about-card { width: 100%; }
.about-logo { display: flex; justify-content: center; padding: 8px 0 2px; }
.about-proview-img { height: 56px; width: auto; max-width: 100%; object-fit: contain; }
.about-app { text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 6px; letter-spacing: .02em; }
.about-lic { display: flex; align-items: center; gap: 16px; background: var(--bg-soft, #f6f8fb); border-radius: 10px; padding: 14px 18px; margin-top: 6px; }
.about-lic-days { font-size: 30px; font-weight: 800; line-height: 1; min-width: 52px; text-align: center; }
.about-editor { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.about-runsoft-img { height: 52px; width: auto; flex: none; object-fit: contain; }
.about-edit { font-size: 13px; color: var(--text); line-height: 1.65; margin: 0; flex: 1; min-width: 260px; }
.about-contacts { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.about-contacts a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; }
.about-contacts a:hover { text-decoration: underline; }

/* ── Bottom nav (mobile only — hidden desktop) ────────────── */
.bottom-nav { display: none; }
/* Mobile header (hidden desktop) */
.mobile-header { display: none; }

/* ── Drawer (mobile only) ─────────────────────────────────── */
.drawer-overlay { display: none; }
.drawer         { display: none; }

/* ============================================================
   GRID & LAYOUT DESKTOP
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--white);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  margin-bottom: 16px;
  border: 1px solid #eaecf0;
}
.card-dark      { background: var(--dark); border-color: transparent; }
.card-clickable { cursor: pointer; transition: box-shadow .15s, transform .1s; }
.card-clickable:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-1px); }
.card-title     { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card-title-light { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 14px; }
.card-row       { display: flex; align-items: center; gap: 14px; }
.card-body      { flex: 1; min-width: 0; }
.card-name      { font-size: 14px; font-weight: 700; }
.card-meta      { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   KPI CARDS
   ============================================================ */
.kpi-card {
  background: var(--white);
  border-radius: 12px;
  padding: 15px 16px 13px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
  border: 1px solid var(--border);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.kpi-card.kpi-clickable { cursor: pointer; }
.kpi-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16,24,40,.08); border-color: #dfe3ea; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kpi-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.kpi-ic {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f2f4f7; color: #667085;            /* icône monochrome neutre, sans couleur */
}
.kpi-ic .dash-ico { width: 18px; height: 18px; }
.kpi-value { font-size: 25px; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 6px; letter-spacing: -.4px; }
.kpi-sub { font-size: 12px; font-weight: 500; color: var(--muted); }
.kpi-sub.up    { color: var(--green); }
.kpi-sub.down  { color: var(--orange); }
.kpi-sub.link  { color: var(--primary); font-weight: 600; }
.kpi-sub.muted { color: var(--muted); }
/* Icônes monochromes dans les titres de cartes */
.card-title .dash-ico { width: 17px; height: 17px; color: var(--muted); }

/* ============================================================
   BAR CHART
   ============================================================ */
.bar-chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 80px; padding: 0 4px;
}
.bar-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 5px; height: 100%; justify-content: flex-end;
}
.bar {
  width: 100%; background: var(--blue);
  border-radius: 5px 5px 0 0; min-height: 3px;
  opacity: .85; transition: opacity .15s;
}
.bar:hover { opacity: 1; }
.bar-wrap span { font-size: 10px; color: var(--muted); font-weight: 500; }

/* ============================================================
   LIST ROWS & TABLES
   ============================================================ */
.list-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: none; }
.row-title  { font-size: 14px; font-weight: 600; }
.row-sub    { font-size: 12px; color: var(--muted); margin-top: 2px; }
.row-right  { text-align: right; flex-shrink: 0; margin-left: 12px; }
.row-amount { font-size: 14px; font-weight: 800; }
.row-amount.lg { font-size: 24px; }
.list-count { font-size: 12px; color: var(--muted); margin-bottom: 12px; }

/* ============================================================
   FORMS
   ============================================================ */
.field       { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--muted); margin-bottom: 6px; letter-spacing: .02em;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 14px; font-size: 14px;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--white); color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
/* Cases à cocher et boutons radio : la règle générique ci-dessus leur donnait
   width:100% et un cadre, ce qui étirait le rond sur toute la largeur et
   éjectait son libellé hors du cadre (vu sur « Type de document » de la
   création de devis, en écran étroit). */
.field input[type=radio], .field input[type=checkbox] {
  width: auto; flex: 0 0 auto; margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none;
  accent-color: var(--primary); cursor: pointer;
}
.field input[type=radio]:focus, .field input[type=checkbox]:focus {
  border: 0; box-shadow: none;
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-l);
}
.field-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  min-height: 38px; padding: 0 16px; border-radius: 9px;
  font-size: 13px; font-weight: 500; line-height: 1;
  cursor: pointer; border: 1px solid var(--border);
  background: var(--white); color: var(--text);
  transition: background .15s, border-color .15s, box-shadow .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; white-space: nowrap; vertical-align: middle;
}
.btn:hover    { background: #f9fafb; }
.btn:active   { transform: translateY(.5px); }
/* Nom de tiers cliquable sur les documents (fiche, tableau, carte, kanban).
   Discret au repos — une liste entière en couleur devient illisible — et explicite au survol. */
.lien-tiers { color: inherit; text-decoration: none; cursor: pointer; border-bottom: 1px dotted var(--muted); }
.lien-tiers:hover { color: var(--primary); border-bottom-color: var(--primary); }
.doc-card-client .lien-tiers, .kanban-card-name .lien-tiers { border-bottom: none; }
.doc-card-client .lien-tiers:hover, .kanban-card-name .lien-tiers:hover { text-decoration: underline; }

.btn-primary  { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn-success  { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover { filter: brightness(.96); }
.btn-danger   { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover  { filter: brightness(.96); }
.btn-full     { width: 100%; min-height: 44px; font-size: 14px; }
.btn-sm       { min-height: 30px; padding: 0 11px; font-size: 12px; border-radius: 7px; gap: 6px; }
.btn-row      { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Icônes SVG ligne — taille et alignement cohérents partout */
.icon         { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: -3px; margin-right: 6px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn .icon, .doc-type-icon .icon, .soc-conn-chip .icon, .card-title .icon, .sage-cardhead .icon { margin-right: 0; }
.icon-btn {
  width: 38px; height: 38px; border: 1.5px solid var(--border);
  background: var(--white); border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all .15s; position: relative;
}
.icon-btn:hover { background: #f3f4f6; color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.fab { display: none; } /* desktop: pas de FAB */

/* ============================================================
   BADGES
   ============================================================ */
.badges  { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.badge   {
  font-size: 10px; font-weight: 700; padding: 3px 9px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .05em;
  display: inline-flex; align-items: center;
  border: 1px solid transparent;
}
.badge-ok   { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.badge-err  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.badge-warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.badge-info { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.badge-gray { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
/* Pastille « Réf. Sage » : une puce claire, pas un bloc sombre. L'ancienne version
   (fond #0f172a, texte bleu pâle) plaquait un rectangle noir au milieu d'une fiche
   claire et se lisait mal. */
.badge-sage { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; font-weight: 700; }

/* ============================================================
   ALERTS & MISC
   ============================================================ */
.alert       { padding: 12px 16px; border-radius: 9px; font-size: 14px; margin-bottom: 16px; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

.filter-tabs, .filter-scroll {
  display: flex; gap: 6px; margin-bottom: 16px;
  overflow-x: auto; padding-bottom: 4px;
}
.filter-btn {
  padding: 7px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--muted); cursor: pointer; white-space: nowrap; transition: all .15s;
}
.filter-btn:hover  { border-color: var(--primary); color: var(--primary); }
.filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.search-bar { position: relative; margin-bottom: 16px; }
.search-bar input {
  padding: 11px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  font-size: 13px;
  background: #f9fafb;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.search-bar input:focus {
  background: var(--white);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,127,232,.1);
}
.search-bar input::placeholder { color: #9ca3af; }

.avatar {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--primary-soft); color: var(--primary-d);
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar.lg { width: 54px; height: 54px; border-radius: 14px; font-size: 20px; }

.detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 16px; gap: 12px;
}
.detail-header h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.detail-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; }
.detail-item label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 2px; }
.detail-item span  { font-size: 14px; font-weight: 500; }

.ref-badge { font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: .04em; margin-bottom: 3px; }
.stock-bar-wrap { height: 4px; background: #f3f4f6; border-radius: 2px; margin: 8px 0 4px; overflow: hidden; }
.stock-bar      { height: 100%; border-radius: 2px; transition: width .4s; }

/* ── Sage connector ───────────────────────────────────────── */
.sage-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.sage-title  { font-size: 16px; font-weight: 800; color: var(--white); }
.sage-sub    { font-size: 12px; color: #64748b; margin-top: 2px; }
.sage-meta   { font-size: 12px; color: #64748b; }
.conn-badge  { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; }
.conn-ok     { background: rgba(14,184,127,.15); color: #0eb87f; }
.conn-warn   { background: rgba(214,158,46,.15); color: #d69e2e; }
.conn-err    { background: rgba(229,62,62,.15); color: #fc8181; }

/* ── Logs ──────────────────────────────────────────────────── */
.log-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.card:not(.card-dark) .log-row { border-bottom-color: var(--border); }
.log-row:last-child { border-bottom: none; }
.log-icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0; margin-top: 1px;
}
.log-icon.ok   { background: rgba(14,184,127,.25); color: #34d399; }
.log-icon.err  { background: rgba(229,62,62,.25);  color: #f87171; }
.log-icon.warn { background: rgba(245,128,62,.25); color: #fb923c; }
.log-msg  { font-size: 13px; color: #94a3b8; line-height: 1.45; }
.card:not(.card-dark) .log-msg { color: var(--text); }
.log-time { font-size: 11px; color: #64748b; margin-top: 2px; }

/* ── Loading ───────────────────────────────────────────────── */
.loading { display: flex; justify-content: center; align-items: center; padding: 5rem; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty   { text-align: center; color: var(--muted); font-size: 14px; padding: 3rem; }
.muted   { color: var(--muted); font-size: 13px; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ── Notif dot ─────────────────────────────────────────────── */
.notif-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); border: 2px solid var(--white); }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 28px; right: 28px;
  background: var(--dark); color: var(--white);
  padding: 12px 20px; border-radius: 10px; font-size: 13px;
  z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: slideIn .3s ease;
}
.toast-err  { background: var(--red); }
.toast-warn { background: #c07600; }
@keyframes slideIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* ── Chevron ───────────────────────────────────────────────── */
.chevron { width: 16px; height: 16px; color: #d1d5db; flex-shrink: 0; }

/* ============================================================
   MOBILE — max-width 768px
   ============================================================ */
@media (max-width: 768px) {
  /* Cacher la sidebar desktop */
  .sidebar  { display: none; }
  .main-area { margin-left: 0; }

  /* ── En-tête mobile ────────────────────────────────────────
     Sur 375 px, l'en-tête empilait logo + titre + sous-titre + pastille société +
     plein écran + cloche + menu. Trois décisions :
       • le plein écran ne sert à rien sur un téléphone → retiré ;
       • la pastille société ne garde que son logo (le nom est déjà en sous-titre,
         l'afficher deux fois coûtait ~70 px de largeur) ;
       • le titre prend la place restante et se tronque proprement. */
  .app-header  { padding: 0 12px; gap: 8px; }
  .header-left { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .header-left > div:last-child { min-width: 0; }
  .app-title   { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-sub     { display: block; font-size: 10px; color: var(--muted);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-right { gap: 4px; min-width: 0; }
  #fullscreen-btn { display: none; }
  /* Le bouton d'action (« + Document »…) est libellé pour le bureau : sur un écran étroit
     il confisquait la largeur et ne laissait presque rien au titre de page. On le borne. */
  #page-action-btn { max-width: 120px; overflow: hidden; text-overflow: ellipsis;
                     white-space: nowrap; display: inline-block; padding: 0 10px; }
  /* ── Cohérence de la barre ──────────────────────────────────
     Les contrôles avaient quatre hauteurs (30, 32, 34, 36) et trois rayons : la barre
     paraissait bricolée. Tout passe à 34 px de haut et 9 px de rayon. */
  #mobile-logo, .icon-btn, #page-action-btn,
  .societe-switcher, .societe-badge.single { height: 34px; border-radius: 9px; }
  .icon-btn { width: 34px; }
  #page-action-btn { min-height: 34px; }

  #societe-switch-wrap { flex: 0 0 auto; }
  /* (le style de la pastille société est plus bas, APRÈS ses règles de base :
     placé ici, il serait écrasé par elles — les media queries n'ajoutent pas de
     spécificité, c'est le dernier en ordre de fichier qui gagne) */

  /* Afficher la bottom nav */
  .bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    min-height: var(--bottom-nav-h);
    background: var(--white); border-top: 1px solid var(--border);
    z-index: 200; padding-bottom: var(--safe-b);
  }
  .nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 10px 0 8px; background: none; border: none; cursor: pointer;
    color: #9ca3af; font-size: 10px; font-weight: 500; gap: 3px;
    transition: color .15s;
  }
  .nav-item svg   { width: 20px; height: 20px; }
  .nav-item.active { color: var(--primary); }

  /* Lanceur d'apps : PAS de barre du bas. La page EST déjà un menu — les icônes
     mènent aux mêmes destinations, la barre ne fait que répéter quatre d'entre
     elles en amputant la grille. Et on retire du même coup la réserve d'espace,
     sinon la page garde un vide au bas sans rien pour l'occuper. */
  body[data-page="accueil"] .bottom-nav { display: none; }
  body[data-page="accueil"] .page-content { padding-bottom: calc(16px + var(--safe-b)); }

  /* Drawer mobile */
  .drawer-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 300;
  }
  /* ── Tiroir latéral ────────────────────────────────────────
     Plus large (les libellés se coupaient à 260 px), défilable, avec des cibles
     tactiles d'au moins 44 px et la page courante enfin mise en évidence. */
  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(300px, 86vw);
    background: var(--white); z-index: 301;
    padding: 14px 10px calc(10px + var(--safe-b));
    display: flex; flex-direction: column;
    box-shadow: -8px 0 28px rgba(0,0,0,.18);
  }
  .drawer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 6px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
  }
  .drawer-title  { font-size: 15px; font-weight: 800; }
  /* Le tiroir défile seul : sur un petit écran la liste dépassait, et le pied
     (déconnexion, identité) devenait inatteignable. */
  /* `min-height: 0` est indispensable : sans lui un enfant flex ne descend pas sous la
     hauteur de son contenu, la liste pousse le tiroir hors de l'écran et le pied
     (déconnexion, identité) devient inatteignable — le défilement ne suffit pas. */
  .drawer-nav { flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .drawer-nav button {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left; min-height: 44px; padding: 10px 12px;
    border: none; background: none; cursor: pointer; font-size: 14.5px;
    border-radius: 10px; margin-bottom: 2px; color: var(--text);
    transition: background .12s, color .12s;
  }
  .drawer-nav button:active { background: var(--hover); }
  .drawer-nav button.active {
    background: var(--primary-soft); color: var(--primary-d); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--primary);
  }
  .drawer-nav-section {
    padding: 12px 12px 4px; font-size: 10px; letter-spacing: .09em;
  }
  .drawer-nav-section:first-child { padding-top: 4px; }
  .drawer-sep { height: 1px; background: var(--border); margin: 8px 6px; }
  .logout-btn { color: var(--red) !important; }
  .drawer-user {
    display: flex; align-items: center; gap: 10px; padding: 12px 8px 0;
    border-top: 1px solid var(--border); flex: 0 0 auto;
  }

  /* Content mobile */
  .page-header  { padding: 14px 16px 6px; }
  .page-header h2 { font-size: 20px; }
  /* Réserve la hauteur de la barre + l'encoche + une respiration, plutôt qu'un
     nombre en dur : sous-estimé le contenu passe dessous, surestimé il laisse un vide. */
  .page-content { padding: 4px 16px calc(var(--bottom-nav-h) + var(--safe-b) + 10px); }

  /* Grilles mobile */
  .kpi-grid     { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-grid    { grid-template-columns: 1fr; }
  .two-col      { grid-template-columns: 1fr; }
  .three-col    { grid-template-columns: 1fr; }
  .detail-grid  { grid-template-columns: 1fr 1fr; }
  .field-row    { grid-template-columns: 1fr; }

  /* KPI mobile */
  .kpi-card     { padding: 14px; }
  .kpi-value    { font-size: 20px; }
  .kpi-icon     { font-size: 18px; }

  /* Doc & Tiers cards mobile */
  .doc-card     { padding: 12px 14px; }
  .doc-card-amount { font-size: 14px; }
  .tiers-meta   { gap: 5px; }
  .type-tabs    { font-size: 12px; }

  /* Articles grid mobile */
  .articles-grid { grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap: 10px; }

  /* View toolbar mobile : masquer les labels */
  .vtoggle-label { display: none; }

  /* FAB mobile */
  .fab {
    display: flex; position: fixed; bottom: 76px; right: 16px;
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--primary); color: #fff; border: none;
    font-size: 24px; cursor: pointer; z-index: 150;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(122,123,126,.4);
  }
}

/* ============================================================
   TABLET — 768px à 1024px
   ============================================================ */
/* Très petits écrans (≤ 360 px) : on rend la main au titre de page.
   Ce bloc doit rester APRÈS la fermeture du bloc mobile : l'insérer au milieu
   fermait celui-ci trop tôt et faisait basculer tiroir et barre du bas sous 360 px. */
@media (max-width: 360px) {
  #page-action-btn { max-width: 84px; font-size: 12px; }
  .app-header      { padding: 0 8px; gap: 6px; }
  .header-right    { gap: 2px; }
  /* Le logo est décoratif — il est déjà présent dans le tiroir et sur l'écran d'accueil.
     Sous 360 px, ces 42 px valent mieux au titre de page, seul repère de navigation. */
  #mobile-logo     { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .kpi-grid   { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LARGE DESKTOP — > 1400px — full width like Odoo
   ============================================================ */
@media (min-width: 1400px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   SWITCH SOCIÉTÉ
   ============================================================ */
.societe-badge.single {
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: var(--primary-l); padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid rgba(122,123,126,.2);
}

.societe-dropdown-wrap { position: relative; }

.societe-switcher {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--text); transition: all .15s; white-space: nowrap;
  max-width: 200px;
}
.societe-switcher:hover { border-color: var(--primary); background: var(--primary-l); }
.soc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--primary-l);
}

.societe-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 500; min-width: 240px; overflow: hidden;
}
.soc-drop-title {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 14px 6px;
}
.soc-drop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: none; background: none;
  cursor: pointer; width: 100%; text-align: left;
  transition: background .12s;
}
.soc-drop-item:hover  { background: var(--hover); }
.soc-drop-item.active { background: var(--primary-soft); }
.soc-color {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.soc-name { font-size: 13px; font-weight: 700; color: var(--text); }
.soc-code { font-size: 11px; color: var(--muted); margin-top: 1px; }
.soc-check { margin-left: auto; color: var(--blue); font-weight: 900; font-size: 14px; }
.soc-drop-sep { height: 1px; background: var(--border); margin: 4px 0; }
.soc-drop-manage {
  display: flex; width: 100%; align-items: center;
  padding: 10px 14px; border: none; background: none;
  cursor: pointer; font-size: 13px; color: var(--muted);
  transition: background .12s;
}
.soc-drop-manage:hover { background: #f3f4f6; color: var(--text); }

/* Mobile : switch plus compact */
@media (max-width: 768px) {
  /* Pastille société sur mobile : le nom étant déjà en sous-titre, on ne garde que le
     logo (ou l'initiale). Sans mise en forme, elle ressemblait à un disque pâle sans
     fonction ; on lui donne le gabarit exact des autres boutons de la barre — 34 px,
     rayon 9 px — avec la teinte de la société, pour qu'on la voie cliquable.
     Ces règles doivent rester APRÈS `.societe-switcher` de base, sinon elles sont écrasées. */
  .societe-switcher, .societe-badge.single {
    box-sizing: border-box;
    width: 34px; min-width: 34px; max-width: 34px; height: 34px;
    padding: 0; gap: 0; overflow: hidden; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-soft); border: 1.5px solid var(--primary);
    color: var(--primary-d); font-weight: 800; font-size: 13px;
  }
  .societe-switcher svg { display: none; }              /* le chevron ne tient pas */
  /* `.soc-nom` couvre les DEUX rendus (switcher multi-société et badge simple). */
  .soc-nom { display: none !important; }
  .societe-switcher img, .societe-badge.single img {
    width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; object-fit: contain;
  }
  /* Repli sans logo : l'initiale doit remplir la pastille, pas y flotter en gris. */
  .societe-switcher > span:not(#societe-active-nom), .societe-badge.single > span {
    width: auto; height: auto; background: none !important; color: inherit !important;
    font-size: 13px; font-weight: 800;
  }
  .societe-dropdown { right: 0; left: auto; min-width: 200px; }
}

/* ============================================================
   PAGE GESTION SOCIÉTÉS
   ============================================================ */
.societe-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px; background: var(--bg); border-radius: 10px; text-align: center;
}
.societe-stat-val { font-size: 24px; font-weight: 900; color: var(--text); }
.societe-stat-label { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 600; }

/* ============================================================
   SAGE SYNC BUTTONS
   ============================================================ */
.sync-btn-grid {
  display: grid;
  grid-template-columns: 1fr repeat(4, auto);
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sync-btn-all {
  padding: 12px 20px; font-size: 14px;
  display: flex; align-items: center; gap: 8px; justify-content: center;
}
.sync-btn {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  white-space: nowrap;
}
.sync-btn-icon { font-size: 16px; line-height: 1; }
@media (max-width: 768px) {
  .sync-btn-grid { grid-template-columns: 1fr 1fr; }
  .sync-btn-all  { grid-column: 1 / -1; }
}

/* ============================================================
   SAGE STATUS BADGES
   ============================================================ */
.conn-badge {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.conn-ok   { background: #d1fae5; color: #065f46; }
.conn-warn { background: #fef3c7; color: #92400e; }
.conn-err  { background: #fee2e2; color: #991b1b; }
.sage-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sage-title  { font-size: 16px; font-weight: 800; color: var(--white); }
.sage-sub    { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.sage-meta   { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 8px; }
.sage-meta b { color: rgba(255,255,255,.85); }

/* Connecteur Sage — multi-société (refonte) */
.soc-conn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.soc-conn-chip  {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.15);
}
.sage-cardhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.soc-sync-card .sync-btn-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 8px;
}
.soc-manage-table { display: flex; flex-direction: column; }
.soc-manage-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 10px 2px; border-bottom: 1px solid var(--border);
}
.soc-manage-row:last-child { border-bottom: 0; }

/* Cartes repliables (dropdown / accordéon) */
.collapse-card .collapse-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; cursor: pointer; user-select: none;
}
.collapse-card .collapse-hdr-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.collapse-chevron { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.collapse-chevron .icon { transition: transform .2s ease; margin-right: 0; }
.collapse-card:not(.open) .collapse-chevron .icon { transform: rotate(-90deg); }
.collapse-card.open  > .collapse-hdr { margin-bottom: 14px; }
.collapse-card:not(.open) .collapse-body { display: none; }

/* ============================================================
   DASHBOARD AMÉLIORÉ
   ============================================================ */
.kpi-icon { font-size: 22px; position: absolute; top: 14px; right: 14px; opacity: .7; }
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.card-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.card-title-row .card-title { margin-bottom: 0; }
.btn-dark {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.8); font-size: 12px;
}
.btn-dark:hover { background: rgba(255,255,255,.2); color: #fff; }
.dash-doc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
  margin: 0 -4px; padding-left: 4px; border-radius: 6px;
}
.dash-doc-row:hover { background: #f8faff; }
.dash-doc-row:last-child { border-bottom: none; }
.dash-doc-ref   { font-size: 12px; font-weight: 700; color: var(--blue); min-width: 90px; }
.dash-doc-client { font-size: 13px; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-doc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dash-doc-amt   { font-size: 13px; font-weight: 800; color: var(--text); }
.empty-mini { font-size: 13px; color: var(--muted); padding: 12px 0; text-align: center; }

/* ============================================================
   LIST HEADERS & TYPE TABS
   ============================================================ */
.list-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.list-actions { display: flex; align-items: center; gap: 8px; }
.list-actions .view-toolbar { margin-bottom: 0; }

.type-tabs { display: flex; gap: 0; background: #f0f2f5; border-radius: 10px; padding: 4px; }
.type-tab {
  padding: 7px 16px; border-radius: 7px; font-size: 13px; font-weight: 600;
  border: none; background: none; cursor: pointer; color: var(--muted);
  transition: all .15s; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.type-tab:hover { color: var(--text); }
.type-tab.active { background: var(--white); color: var(--text); box-shadow: var(--shadow); }
.type-tab-count {
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 10px; min-width: 20px; text-align: center;
  display: inline-block;
}
.type-tab:not(.active) .type-tab-count { background: var(--muted); }
.type-tab-count:empty { display: none; }

/* ============================================================
   FILTER PILLS
   ============================================================ */
.filter-scroll {
  display: flex; gap: 6px; margin-bottom: 12px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: all .15s; flex-shrink: 0;
}
.filter-pill:hover  { border-color: var(--primary); color: var(--primary); }
.filter-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.filter-pill.active .filter-pill-count { background: rgba(255,255,255,.3); }
.filter-pill-count {
  background: #e5e7eb; color: var(--muted); font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}

/* ============================================================
   DOCS TOOLBAR & SUMMARY
   ============================================================ */
.docs-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 10px;
}
.docs-toolbar .view-toolbar { margin-bottom: 0; }
.docs-summary {
  font-size: 12px; color: var(--muted); margin-bottom: 12px;
  padding: 6px 12px; background: #f8faff; border-radius: 8px; display: inline-block;
}
.docs-summary b { color: var(--text); }

/* ============================================================
   DOCUMENT CARDS (Devis / Factures / Commandes)
   ============================================================ */
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.doc-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.doc-card-main { flex: 1; min-width: 0; }
.doc-card-ref {
  font-size: 12px; font-weight: 800; color: var(--primary);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.doc-card-client {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.doc-card-date { font-size: 12px; color: var(--muted); }
.doc-card-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  flex-shrink: 0;
}
.doc-card-amount { font-size: 16px; font-weight: 900; color: var(--text); }
.doc-card-reste  { font-size: 11px; color: var(--orange); font-weight: 700; }

/* ============================================================
   TIERS CARDS (Clients / Fournisseurs)
   ============================================================ */
.tiers-list { display: flex; flex-direction: column; gap: 8px; }
.tiers-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.tiers-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.tiers-avatar {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; border: 2px solid currentColor;
}
.tiers-body { flex: 1; min-width: 0; }
.tiers-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tiers-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.tiers-meta span { display: flex; align-items: center; gap: 3px; }
.tiers-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }

/* ============================================================
   ARTICLE CARDS (grille)
   ============================================================ */
.article-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow);
  padding: 14px; display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.article-card.alerte { border-color: #fed7aa; background: #fffbf5; }
.article-card-ref {
  font-size: 11px; font-weight: 800; color: var(--blue);
  text-transform: uppercase; letter-spacing: .04em;
}
.article-card-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.35; flex: 1;
}
.article-card-cat { font-size: 11px; color: var(--muted); }
.article-card-stock { margin-top: 4px; }
.article-stock-label { font-size: 11px; font-weight: 600; margin-top: 3px; }
.stock-min { font-weight: 400; color: var(--muted); }
.article-card-footer {
  display: flex; align-items: baseline; gap: 4px;
  border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px;
}
.article-price { font-size: 16px; font-weight: 900; color: var(--text); }
.article-price-sub { font-size: 11px; color: var(--muted); }
.stock-alerte-banner {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
}

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty-state {
  text-align: center; padding: 60px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty-icon { font-size: 48px; opacity: .5; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--text); }
.empty-sub   { font-size: 13px; color: var(--muted); max-width: 340px; line-height: 1.5; margin-bottom: 8px; }

/* ============================================================
   VIEW TOOLBAR — toggle Kanban / Liste / Grille + Col Picker
   ============================================================ */
.view-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.view-toolbar .filters { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.vtoggle-label { font-size: 12px; }
.vtoggle {
  display: flex;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.vtoggle-btn {
  border: none;
  background: none;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.vtoggle-btn + .vtoggle-btn {
  border-left: 1px solid var(--border);
}
.vtoggle-btn:hover { background: #f5f7fa; color: var(--text); }
.vtoggle-btn.active {
  background: var(--primary);
  color: #fff;
}

/* ── Column Picker ─────────────────────────────────────────── */
.col-picker-wrap {
  position: relative;
}
.col-picker-btn {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 8px;
  width: 34px; height: 34px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-size: 15px;
  transition: background .12s, color .12s;
}
.col-picker-btn:hover { background: #f5f7fa; color: var(--text); }
.col-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 200;
  padding: 6px 0;
}
.col-picker-menu-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 14px 4px;
}
.col-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .1s;
  user-select: none;
}
.col-opt:hover { background: #f8faff; }
.col-opt input[type=checkbox] { accent-color: var(--primary); cursor: pointer; }
.col-opt span { font-size: 13px; color: var(--text); }

/* ============================================================
   TABLE VIEW
   ============================================================ */
.erp-table-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
  overflow: hidden;          /* desktop : clips rounded corners */
  overflow-x: auto;          /* mais scroll horizontal si table trop large */
  -webkit-overflow-scrolling: touch;
}
.erp-table {
  width: 100%;
  border-collapse: collapse;
}
.erp-table th {
  background: #fbfcfd;
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.erp-table td {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle;
}
.erp-table tr:last-child td { border-bottom: none; }
.erp-table tbody tr {
  cursor: pointer;
  transition: background .1s;
}
.erp-table tbody tr:hover td { background: #f6f7f9; }
/* Colonnes numériques alignées à droite (style Odoo) */
.erp-table td.num, .erp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.erp-table .badge { font-size: 11px; }

/* Mobile : scroll horizontal */
@media (max-width: 768px) {
  .erp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .erp-table { min-width: 560px; }
}

/* ============================================================
   KANBAN BOARD
   ============================================================ */
.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
}
.kanban-col {
  background: #f4f6fb;
  border-radius: 12px;
  min-width: 240px;
  max-width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 260px);
}
.kanban-col-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
}
.kanban-col-hdr span:first-child {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.kanban-cnt {
  background: rgba(0,0,0,.08);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  color: inherit;
}
.kanban-cards {
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.kanban-card {
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  border-left: 3px solid transparent;
}
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kanban-card-ref {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 3px;
  text-transform: uppercase;
}
.kanban-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}
.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.kanban-card-amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.kanban-card-date {
  font-size: 11px;
  color: var(--muted);
}
.kanban-empty {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 16px 10px;
  opacity: .7;
}

/* Kanban column accent colours by status */
.kanban-col[data-status="BROUILLON"]           .kanban-col-hdr { border-color: var(--muted);   color: var(--muted); }
.kanban-col[data-status="ENVOYE"]              .kanban-col-hdr,
.kanban-col[data-status="ENVOYEE"]             .kanban-col-hdr { border-color: var(--blue);   color: var(--blue); }
.kanban-col[data-status="ACCEPTE"]             .kanban-col-hdr { border-color: var(--green);  color: var(--green); }
.kanban-col[data-status="REFUSE"]              .kanban-col-hdr,
.kanban-col[data-status="ANNULEE"]             .kanban-col-hdr { border-color: var(--red);    color: var(--red); }
.kanban-col[data-status="EXPIRE"]              .kanban-col-hdr { border-color: var(--orange); color: var(--orange); }
.kanban-col[data-status="PARTIELLEMENT_PAYEE"] .kanban-col-hdr,
.kanban-col[data-status="PARTIELLEMENT_LIVREE"].kanban-col-hdr { border-color: var(--orange); color: var(--orange); }
.kanban-col[data-status="PAYEE"]               .kanban-col-hdr,
.kanban-col[data-status="LIVREE"]              .kanban-col-hdr { border-color: var(--green);  color: var(--green); }
.kanban-col[data-status="EN_COURS"]            .kanban-col-hdr { border-color: var(--blue);   color: var(--blue); }

/* Kanban card left-border accent */
.kanban-col[data-status="BROUILLON"]           .kanban-card { border-left-color: var(--muted); }
.kanban-col[data-status="ENVOYE"]              .kanban-card,
.kanban-col[data-status="ENVOYEE"]             .kanban-card,
.kanban-col[data-status="EN_COURS"]            .kanban-card { border-left-color: var(--blue); }
.kanban-col[data-status="ACCEPTE"]             .kanban-card,
.kanban-col[data-status="PAYEE"]               .kanban-card,
.kanban-col[data-status="LIVREE"]              .kanban-card { border-left-color: var(--green); }
.kanban-col[data-status="REFUSE"]              .kanban-card,
.kanban-col[data-status="ANNULEE"]             .kanban-card { border-left-color: var(--red); }
.kanban-col[data-status="EXPIRE"]              .kanban-card,
.kanban-col[data-status="PARTIELLEMENT_PAYEE"] .kanban-card,
.kanban-col[data-status="PARTIELLEMENT_LIVREE"].kanban-card { border-left-color: var(--orange); }

/* Mobile : kanban scrolls horizontally in available width */
@media (max-width: 768px) {
  .kanban-col { min-width: 210px; max-width: 210px; }
  .kanban-col { max-height: calc(100vh - 220px); }
}

/* ============================================================
   ARTICLES GRID VIEW
   ============================================================ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.article-grid-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.article-grid-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.article-grid-ref {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
}
.article-grid-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  flex: 1;
}
.article-grid-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.article-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.article-grid-stock {
  font-size: 11px;
  color: var(--muted);
}
.article-grid-stock.alerte { color: var(--red); font-weight: 700; }

@media (max-width: 600px) {
  .articles-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
}

/* ============================================================
   LINES TABLE (detail documents)
   ============================================================ */
.lines-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -20px; padding: 0 20px;
}
.lines-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.lines-table thead th {
  background: #f4f5f7; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  padding: 9px 12px; text-align: left; border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.lines-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid #f0f2f5; vertical-align: middle;
}
.lines-table tbody tr:last-child td { border-bottom: none; }
.lines-table tfoot td { border-top: 2px solid var(--border); background: #fafbfc; }
.line-label { font-size: 13px; font-weight: 600; color: var(--text); }
.line-ref   { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Sous-lignes de nomenclature (composants) : surbrillance pour les distinguer nettement
   des lignes normales une fois le composé déplié. */
.lines-table tbody tr.nomencl-comp td { background: var(--primary-l); }
.lines-table tbody tr.nomencl-comp td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.lines-table tbody tr.nomencl-comp .line-label { font-weight: 500; }
/* Composants de nomenclature en ÉDITION : même surbrillance que la liste (mode view). */
.devis-lines-tbl tr.nomencl-comp td { background: var(--primary-l); }
.devis-lines-tbl tr.nomencl-comp td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.devis-lines-tbl tr.nomencl-comp td:nth-child(3) { padding-left: 18px; }
.lines-table tbody tr.nomencl-comp .line-label::before { content: "\21B3\A0"; color: var(--primary); font-weight: 700; }

.lines-empty {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 4px; color: var(--muted);
}

/* ============================================================
   ADVANCED FILTER PANEL (Odoo-style)
   ============================================================ */
.adv-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.adv-filter-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.adv-filter-toggle:hover { border-color: var(--primary); color: var(--primary); }
.adv-filter-toggle.active { background: var(--primary-l); border-color: var(--primary); color: var(--primary); }
.adv-filter-toggle svg { width: 14px; height: 14px; }

.adv-filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px; flex: 1;
}
.adv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--primary-l); color: var(--primary);
  border: 1px solid rgba(122,123,126,.3);
}
.adv-chip-remove {
  background: none; border: none; cursor: pointer;
  color: var(--primary); font-size: 14px; line-height: 1;
  padding: 0; opacity: .7; transition: opacity .1s;
}
.adv-chip-remove:hover { opacity: 1; }
.adv-chip-clear {
  padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: none; border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: all .15s;
}
.adv-chip-clear:hover { border-color: var(--red); color: var(--red); }

.adv-filter-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.adv-filter-panel-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 12px;
}
.adv-filter-fields {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.adv-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1; }
/* Saut de ligne dans un conteneur flex : un élément de largeur pleine et de hauteur nulle.
   Il ouvre la deuxième rangée devant les dates, sans dépendre de la largeur de la fenêtre. */
.adv-filter-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
/* Un champ date a une largeur NATURELLE (jj/mm/aaaa). Laissé à `flex:1`, il s'étirait sur
   toute la rangée pour dix caractères de contenu. */
.adv-filter-field-date { flex: 0 1 190px; max-width: 230px; }
.adv-filter-field label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.adv-filter-field input,
.adv-filter-field select {
  padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; background: #f9fafb; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.adv-filter-field input:focus, .adv-filter-field select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l); background: var(--white);
}
.adv-filter-actions { display: flex; gap: 8px; align-items: flex-end; }
.adv-filter-apply {
  padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--primary); color: #fff; border: none; cursor: pointer;
  transition: background .15s; white-space: nowrap;
}
.adv-filter-apply:hover { background: var(--primary-d); }
.adv-filter-reset {
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: none; color: var(--muted); border: 1.5px solid var(--border);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.adv-filter-reset:hover { border-color: var(--red); color: var(--red); }

/* Export button */
.export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--white); color: var(--muted);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.export-btn:hover { border-color: var(--green); color: var(--green); background: #f0fdf4; }
.export-btn svg { width: 14px; height: 14px; }

/* Results bar */
.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; background: #f8f9fb; border-radius: 8px;
  margin-bottom: 12px; font-size: 12px; color: var(--muted);
}
.results-bar b { color: var(--text); }
.results-bar-right { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   SETTINGS / COLOR CUSTOMIZATION
   ============================================================ */
.settings-section { margin-bottom: 24px; }
.settings-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.color-swatches {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.color-swatch {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; transition: transform .15s, border-color .15s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--text); }
.color-custom-input {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.color-custom-input input[type=color] {
  width: 38px; height: 38px; border: 1.5px solid var(--border);
  border-radius: 8px; cursor: pointer; padding: 2px; background: var(--white);
}
.color-preview-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--primary);
}

/* ============================================================
   ODOO-STYLE TABLE TOOLBAR
   ============================================================ */
.odoo-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.odoo-toolbar-left  { display: flex; align-items: center; gap: 8px; flex: 1; }
.odoo-toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Improved table: Odoo-style full-width */
.erp-table th {
  background: #f4f5f7;
  font-size: 11px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 10px 16px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap; position: relative;
}
.erp-table td { padding: 12px 16px; }

/* ============================================================
   MOBILE — sidebar / search adjustments
   ============================================================ */
@media (max-width: 768px) {
  .header-search { display: none; } /* Masqué sur mobile — search dans la page */
  .adv-filter-fields { flex-direction: column; }
  .adv-filter-field { min-width: 0; width: 100%; }
  .results-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .adv-filter-bar { flex-wrap: wrap; }
}

/* ============================================================
   DOCUMENT TYPE TABS (Sage 100 DE / BC / BL / FA …)
   ============================================================ */
.doc-type-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.doc-type-tabs::-webkit-scrollbar { display: none; }

.doc-type-tab {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 8px 14px;
  border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--white); cursor: pointer;
  transition: all .15s; flex-shrink: 0; min-width: 64px;
  position: relative;
}
.doc-type-tab:hover {
  border-color: var(--primary);
  background: var(--primary-l);
}
.doc-type-tab.active {
  border-color: var(--tab-color, var(--primary));
  background: var(--tab-color, var(--primary));
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.doc-type-icon {
  line-height: 1; color: var(--muted); display: flex;
}
.doc-type-code {
  font-size: 11px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  line-height: 1;
}
.doc-type-label {
  font-size: 10px; font-weight: 600; color: var(--muted);
  white-space: nowrap; max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; line-height: 1;
  text-align: center;
}
.doc-type-tab.active .doc-type-code,
.doc-type-tab.active .doc-type-label {
  color: #fff;
}
.doc-type-tab.active .doc-type-icon { color: #fff; }
.doc-type-cnt {
  position: absolute; top: 4px; right: 5px;
  font-size: 9px; font-weight: 800;
  background: rgba(0,0,0,.18); color: #fff;
  border-radius: 8px; padding: 1px 4px; line-height: 1.2;
  min-width: 14px; text-align: center;
}
.doc-type-tab:not(.active) .doc-type-cnt {
  background: #e5e7eb; color: var(--muted);
}

/* Inline doc-type badge on cards/rows */
.doc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--primary-l); color: var(--primary);
  border: 1px solid rgba(122,123,126,.2);
  flex-shrink: 0;
}
/* Variante à FOND PLEIN : la couleur du type de document est posée en style inline.
   Le texte doit alors être blanc — sinon il garde la couleur d'accent de l'interface
   et disparaît quand les deux se ressemblent (accent rouge + type FFA rouge, la
   pastille apparaît vide). */
.doc-badge.solid { color: #fff; border-color: rgba(0,0,0,.12); text-shadow: 0 1px 1px rgba(0,0,0,.18); }
/* Sur une fiche, le NUMÉRO se lit en couleur de texte : il n'a pas à porter l'accent,
   qui le faisait passer pour une alerte quand l'accent est rouge ou orange. */
.detail-header .doc-card-ref { color: var(--text); font-size: 15px; }


/* ── Sidebar sub-menus ────────────────────────────────────── */
.sidebar-group-hdr {
  display: flex; align-items: center; /* override flex already set by .sidebar-item */
}
.sidebar-chevron {
  width: 14px; height: 14px; flex-shrink: 0; margin-left: auto;
  opacity: .5; transition: transform .2s;
}
.sidebar-group-hdr.open .sidebar-chevron { transform: rotate(180deg); }

.sidebar-subs {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
}
.sidebar-subs.open { max-height: 200px; }

.sidebar-sub {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 12px 7px 38px;
  border: none; background: none; cursor: pointer;
  color: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 500;
  border-radius: 8px; text-align: left;
  transition: background .12s, color .12s;
}
.sidebar-sub:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
.sidebar-sub.active {
  background: var(--primary); color: #fff;
}
.sub-icon { font-size: 14px; flex-shrink: 0; }

/* Hide sub-items when sidebar is collapsed */
.sidebar.collapsed .sidebar-subs { display: none; }
.sidebar.collapsed .sidebar-chevron { display: none; }

/* ── Drawer nav section headers ───────────────────────────── */
.drawer-nav-section {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 10px 16px 4px; pointer-events: none;
}
/* Sous-titre de GROUPE : hiérarchie intermédiaire entre la section et l'entrée.
   Porte l'icône du groupe, ce qui le distingue d'un titre de section (en majuscules
   grises), et ses entrées sont décalées — sans quoi rien ne dit à quoi elles tiennent. */
.drawer-nav-group {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--text);
  padding: 12px 16px 4px; pointer-events: none;
}
.drawer-nav .drawer-sub { padding-left: 30px; }

/* ============================================================
   RESPONSIVE — doc type tabs on mobile
   ============================================================ */
@media (max-width: 768px) {
  .doc-type-tab { min-width: 56px; padding: 7px 10px; }
  .doc-type-label { display: none; }
  .doc-type-code { font-size: 12px; }
  .doc-type-icon { font-size: 14px; }
}

/* ============================================================
   TYPEAHEAD DROPDOWN
   ============================================================ */
.typeahead-wrap { position: relative; }
.typeahead-dd {
  /* position:fixed — évite le clipping par overflow:hidden/auto des parents (table, card…) */
  position: fixed; z-index: 9000; min-width: 200px;
  background: var(--white); border: 1.5px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18); max-height: 260px; overflow-y: auto;
}
.typeahead-item {
  padding: 9px 14px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover { background: var(--bg); }

/* Selected client badge */
.selected-badge {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary-l); border: 1.5px solid var(--primary);
  border-radius: 9px; padding: 8px 12px; font-size: 13px; font-weight: 600;
  color: var(--primary); margin-top: 6px;
}
.btn-icon-sm {
  background: none; border: none; cursor: pointer; padding: 2px 7px;
  font-size: 14px; color: var(--muted); border-radius: 5px;
  line-height: 1; transition: color .12s, background .12s;
}
.btn-icon-sm:hover { color: #e53e3e; background: rgba(229,62,62,.08); }

/* ============================================================
   DEVIS / COMMANDE FORM — lignes
   ============================================================ */
.devis-lines-tbl {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.devis-lines-tbl thead th {
  text-align: left; padding: 7px 8px;
  border-bottom: 2px solid var(--border);
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.devis-lines-tbl tbody td {
  padding: 4px 5px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.inp-sm {
  width: 100%; padding: 5px 8px; font-size: 12px;
  border: 1.5px solid var(--border); border-radius: 6px;
  background: var(--white); color: var(--text);
  transition: border-color .12s;
}
.inp-sm:focus { border-color: var(--primary); outline: none; }
select.inp-sm { padding: 5px 6px; }
/* Champs numériques des lignes : pas de flèches up/down (on garde la saisie numérique) */
.inp-sm::-webkit-outer-spin-button,
.inp-sm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inp-sm[type=number] { -moz-appearance: textfield; appearance: textfield; }
.devis-line-tot { text-align: right; font-weight: 600; white-space: nowrap; padding-right: 8px; }

.devis-totals {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 5px; margin: 14px 0 6px; padding: 14px 18px;
  background: var(--bg); border-radius: 10px;
}
.devis-total-row {
  display: flex; justify-content: space-between; gap: 48px;
  font-size: 13px; color: var(--muted); min-width: 260px;
}
.devis-total-ttc {
  font-size: 16px; font-weight: 700; color: var(--text);
  border-top: 1.5px solid var(--border); padding-top: 7px; margin-top: 2px;
}
.devis-total-ttc span:last-child { color: var(--primary); }

/* ============================================================
   FICHE DÉTAIL TABULÉE (style Sage SenSaaS)
   ============================================================ */
.fiche-page {
  display: flex; flex-direction: column;
}
.fiche-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 12px; flex-wrap: wrap;
}
.fiche-topbar-back { flex-shrink: 0; }
.fiche-topbar-title {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.fiche-topbar-title h2 {
  font-size: 20px; font-weight: 800; margin: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fiche-ref {
  font-size: 12px; color: var(--muted); font-weight: 600;
  background: var(--bg); padding: 3px 9px; border-radius: 6px;
  white-space: nowrap;
}
.fiche-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* KPI bar sous le titre */
.fiche-kpi-bar {
  display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.fiche-kpi {
  flex: 1; min-width: 150px;
  padding: 12px 16px; border-radius: 10px;
  display: flex; flex-direction: column; gap: 3px;
  color: #fff; position: relative; overflow: hidden;
}
.fiche-kpi.green  { background: #059669; }
.fiche-kpi.blue   { background: #2563eb; }
.fiche-kpi.gray   { background: #4b5563; }
.fiche-kpi.orange { background: #d97706; }
.fiche-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; opacity: .8; }
.fiche-kpi-val   { font-size: 18px; font-weight: 900; line-height: 1.1; }
.fiche-kpi-sub   { font-size: 11px; opacity: .75; }

/* Onglets en bas de la fiche, façon Sage */
.fiche-body {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  overflow: hidden;
}
.fiche-tabs {
  display: flex; border-bottom: 2px solid var(--border);
  background: #f8f9fb; overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none;
}
.fiche-tabs::-webkit-scrollbar { display: none; }
.fiche-tab {
  padding: 11px 18px; font-size: 13px; font-weight: 600; color: var(--muted);
  border: none; background: none; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .12s, border-color .12s;
  display: flex; align-items: center; gap: 6px;
}
.fiche-tab:hover { color: var(--text); }
.fiche-tab.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--white); }
.fiche-tab-badge {
  font-size: 10px; font-weight: 800; background: var(--primary);
  color: #fff; border-radius: 10px; padding: 1px 6px; min-width: 18px;
  text-align: center; display: inline-block;
}
.fiche-tab:not(.active) .fiche-tab-badge { background: var(--muted); }
.fiche-tab-badge:empty { display: none; }

.fiche-panel {
  padding: 20px; flex: 1; overflow-y: auto;
}
.fiche-panel.hidden { display: none; }

/* Identification grid dans fiche */
.fiche-id-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px;
}
.fiche-id-item label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; display: block; margin-bottom: 3px;
}
.fiche-id-item span { font-size: 13px; font-weight: 500; }

/* Table interrogation docs */
.fiche-docs-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.fiche-docs-table th {
  text-align: left; padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; background: #f8f9fb;
}
.fiche-docs-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.fiche-docs-table tr:last-child td { border-bottom: none; }
.fiche-docs-table tr:hover td { background: #f8faff; cursor: pointer; }
.fiche-no-data {
  text-align: center; padding: 32px; color: var(--muted); font-size: 13px;
}

/* Stock multi-dépôt */
.fiche-depot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.fiche-depot-card {
  background: var(--bg); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.fiche-depot-name  { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.fiche-depot-stock { font-size: 22px; font-weight: 900; }
.fiche-depot-sub   { font-size: 11px; color: var(--muted); }

/* Contacts liste dans fiche */
.fiche-contacts-list { display: flex; flex-direction: column; gap: 8px; }
.fiche-contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg); border-radius: 10px;
}
.fiche-contact-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-l); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0;
}
.fiche-contact-info { flex: 1; min-width: 0; }
.fiche-contact-name { font-size: 13px; font-weight: 700; }
.fiche-contact-meta { font-size: 12px; color: var(--muted); }

/* Tarifs */
.fiche-tarif-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.fiche-tarif-row:last-child { border-bottom: none; }
.fiche-tarif-label { font-weight: 600; }
.fiche-tarif-val { font-size: 15px; font-weight: 900; color: var(--text); }

/* Sidebar section sub-items */
.sidebar-sub .sub-icon {
  width: 16px; text-align: center; flex-shrink: 0; opacity: .7;
}

@media (max-width: 768px) {
  .fiche-kpi-bar { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; }
  .fiche-kpi { min-width: 140px; }
  .fiche-id-grid { grid-template-columns: 1fr 1fr; }

  /* ── Gestion du Stock — responsive ──────────────────────── */
  .fiche-kpi-bar { -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .erp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Formulaire devis : lignes scrollables */
  .devis-lines-tbl { min-width: 560px; }
  .devis-totals { margin-left: 0 !important; }
  .btn-row { flex-wrap: wrap; }
  /* Sync buttons */
  .sync-btn-grid { grid-template-columns: 1fr 1fr !important; }
  .sync-btn-all { grid-column: 1 / -1 !important; }
}

/* ============================================================
   FINITION VISUELLE (polish — couleurs, contraste, profondeur)
   ============================================================ */
/* Cartes : ombre plus douce et survol subtil */
.card { box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); border-color: #edeef2; }
.kpi-card { box-shadow: 0 2px 6px rgba(16,24,40,.06); }

/* Tables : en-tête plus lisible */
.erp-table thead th {
  background: #f7f8fa; color: #475467; font-size: 11px; letter-spacing: .03em;
  text-transform: uppercase; font-weight: 700;
}
.erp-table tbody tr:hover td { background: var(--primary-l); }

/* Barre de résultats : séparation nette */
.results-bar { border: 1px solid #edeef2; }

/* Boutons : transitions homogènes */
.btn { transition: background .15s, box-shadow .15s, opacity .15s; }
.btn:active { transform: translateY(1px); }

/* En-tête appli : fine bordure basse pour détacher du contenu */
.app-header { border-bottom: 1px solid #e9ebef; }

/* Boutons icône (header) : meilleur retour visuel */
.icon-btn { transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--primary-l); color: var(--primary); }

/* Bandeau stock ligne : coins arrondis en haut */
#ligne-stock-bar { border-top-left-radius: 12px; border-top-right-radius: 12px; }

/* Espacement vertical homogène entre blocs empilés */
.docs-toolbar, .list-header { margin-bottom: 12px; }
.filter-scroll { margin-bottom: 14px; }

/* Cases de mise en forme PDF par ligne (B = gras, S = souligné, P = P.U. seul) */
.pdf-flag {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  margin: 0 2px; font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--muted); cursor: pointer; user-select: none; vertical-align: middle;
}
.pdf-flag input { margin: 0; cursor: pointer; }
.pdf-flag span { line-height: 1; }
.pdf-flag input:checked + span { color: var(--primary); }

/* En-têtes de tableau triables */
.erp-table th.erp-th-sort { transition: background .12s, color .12s; }
.erp-table th.erp-th-sort:hover { background: var(--primary-l); color: var(--primary); }

/* ── Panneau de notifications (cloche) ─────────────────────── */
.notif-panel {
  position: fixed;
  width: 360px; max-width: calc(100vw - 20px);
  max-height: 70vh; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(16,24,40,.22);
  z-index: 1200;
  display: flex; flex-direction: column;
  animation: notifIn .16s ease both;
}
@keyframes notifIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700; color: var(--text);
}
.notif-count {
  background: var(--red, #e53e3e); color: #fff;
  font-size: 11px; font-weight: 700; min-width: 20px; height: 20px;
  border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.notif-body { overflow-y: auto; }
.notif-empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 13px; }
/* Séparateur de section (alertes de stock) : les deux flux ne viennent pas de la même
   source, les confondre dans une seule coulée les rendait indistinguables. */
.notif-sec {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); background: #fafbfc;
  border-top: 1px solid var(--border); border-bottom: 1px solid #f1f3f5;
}
/* Compte TOTAL de la section, pas le nombre de lignes montrées : c'est ce qui empêche
   de lire une liste plafonnée comme une liste complète. */
.notif-sec-n {
  background: rgba(245,128,62,.16); color: #b45309;
  border-radius: 9px; padding: 1px 7px; font-size: 11px; letter-spacing: 0;
}
.notif-more-row {
  padding: 9px 16px; font-size: 12px; font-weight: 600; color: var(--primary);
  cursor: pointer; text-align: center; border-bottom: 1px solid #f1f3f5;
}
.notif-more-row:hover { background: var(--primary-l); }
.notif-item {
  position: relative;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 38px 11px 16px; cursor: pointer;
  border-bottom: 1px solid #f1f3f5; transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f6f7f9; }
/* Non lu : un LISERÉ à gauche, plus une teinte très légère. Le fond plein d'avant peignait
   la liste entière dès que tout était non lu — donc ne distinguait plus rien. */
.notif-item.notif-unread {
  background: var(--primary-l);                                    /* repli navigateurs anciens */
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.notif-item.notif-unread::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--primary);
}
.notif-ic {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: #f1f3f5;
}
.notif-ic.red    { background: rgba(229,62,62,.12); }
.notif-ic.orange { background: rgba(245,128,62,.14); }
.notif-txt { min-width: 0; flex: 1; }
/* Le titre s'affiche sur DEUX lignes au plus. Tronqué à une seule, « Nouveau devis — ATLAS
   GRID » perdait le nom du client, qui est justement ce qu'on cherche du regard. */
.notif-title {
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-sub {
  font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-when { font-size: 11px; color: var(--muted); margin-top: 3px; opacity: .85; }
/* Suppression : discrète au repos, franche au survol. Toujours dans le flux (pas de
   `display:none`) pour rester atteignable au doigt, où il n'y a pas de survol. */
.notif-del {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; padding: 0; line-height: 1;
  border: none; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 17px; cursor: pointer;
  opacity: .35; transition: opacity .12s, background .12s, color .12s;
}
.notif-item:hover .notif-del { opacity: .8; }
.notif-del:hover { background: rgba(229,62,62,.12); color: var(--red, #e53e3e); opacity: 1; }
.notif-foot { border-top: 1px solid var(--border); padding: 8px; background: #fafbfc; }
.notif-all {
  width: 100%; padding: 9px; border: none; border-radius: 9px; background: transparent;
  color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s;
}
.notif-all:hover { background: var(--primary-l); }
.notif-more {
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 9px; padding: 1px 7px;
}
/* Fenêtre complète : mêmes lignes que la cloche, sur toute la hauteur utile. */
.notif-all-card { max-width: 560px; width: 100%; }
.notif-all-body { padding: 0; max-height: 65vh; }
.notif-all-body .notif-item { padding-right: 40px; }
.notif-all-card .modal-head .notif-count { margin-left: 8px; }

/* ── Login : se souvenir + crédit RUNSOFT ─────────────────── */
.login-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
  margin: 2px 0 16px; cursor: pointer; user-select: none;
}
.login-remember input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.login-credit {
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center; z-index: 2;
  font-size: 13px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.login-credit a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 1px; }
.login-credit a:hover { color: #34d27e; border-color: #34d27e; }

/* ── Login : sélecteur de langue ───────────────────────────
   DANS la carte, centré, comme la barre de langue du WelcomeScreen mobile. Posé sur
   le fond animé, un bouton clair disparaissait dès que la carte occupait le haut de
   l'écran (fenêtre étroite) : blanc sur blanc. */
.login-lang { position: relative; display: flex; justify-content: center; margin-bottom: 14px; }
.login-lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--muted,#6b7280);
  background: var(--bg-soft,rgba(0,0,0,.035)); border: 1px solid var(--border,#e3e6ea);
  transition: background .15s, border-color .15s, color .15s;
}
.login-lang-btn:hover { color: var(--text,#1a1d23); border-color: var(--muted,#9aa3af); }
.login-lang-btn svg { width: 16px; height: 16px; flex: none; }
.login-lang-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 190px; z-index: 5;
  background: var(--card,#fff); border: 1px solid var(--border,#e3e6ea); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(16,24,40,.22); overflow: hidden; padding: 5px;
}
.login-lang-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 8px; background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--text,#1a1d23);
  cursor: pointer; text-align: start;
}
.login-lang-item:hover { background: var(--hover,rgba(0,0,0,.05)); }
.login-lang-item.active { color: var(--primary,#27B768); }
.login-lang-flag { font-size: 16px; line-height: 1; flex: none; }
.login-lang-tick { margin-inline-start: auto; font-size: 12px; }

/* ── Login : écran de choix (démo / mes accès) ──────────────
   Deux entrées de MÊME NIVEAU, comme le WelcomeScreen de ProviewMobile : une carte
   pleine pour la démo, une carte fantôme pour la connexion classique. */
.login-prompt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted,#6b7280); text-align: center; margin: 2px 0 14px;
}
.login-opt {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 15px 16px; margin-bottom: 10px; border-radius: 14px;
  cursor: pointer; text-align: start; font: inherit;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
}
.login-opt:disabled { cursor: default; opacity: .75; }
.login-opt:not(:disabled):hover { transform: translateY(-1px); }
.login-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.login-opt-title { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.login-opt-sub { font-size: 12px; line-height: 1.35; opacity: .82; }

.login-opt-primary {
  background: var(--primary,#27B768); border: 1px solid var(--primary,#27B768); color: #fff;
  box-shadow: 0 6px 18px rgba(31,170,89,.28);
}
.login-opt-primary:not(:disabled):hover { box-shadow: 0 10px 24px rgba(31,170,89,.36); }
.login-opt-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2);
}
.login-opt-ic svg { width: 17px; height: 17px; }
/* Le triangle « lecture » et le chevron pointent vers l'avant : miroir en arabe. */
[dir="rtl"] .login-opt-ic svg, [dir="rtl"] .login-opt-go svg { transform: scaleX(-1); }

.login-opt-ghost {
  background: var(--card,#fff); border: 1px solid var(--border,#e3e6ea); color: var(--text,#1a1d23);
}
.login-opt-ghost:hover { background: var(--bg-soft,rgba(0,0,0,.03)); border-color: var(--muted,#9aa3af); }
.login-opt-go { flex: none; display: inline-flex; color: var(--muted,#6b7280); }
.login-opt-go svg { width: 19px; height: 19px; }

/* Retour du formulaire vers l'écran de choix. */
.login-back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 0 12px; padding: 5px 9px 5px 5px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--muted,#6b7280);
}
.login-back-btn:hover { background: var(--bg-soft,rgba(0,0,0,.04)); color: var(--text,#1a1d23); }
.login-back-btn svg { width: 15px; height: 15px; flex: none; }
[dir="rtl"] .login-back-btn svg { transform: scaleX(-1); }

/* ── Modale générique (ex : envoi e-mail) ─────────────────── */
.modal-ov {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(16,24,40,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: notifIn .15s ease both;
}
.modal-card {
  background: var(--white); border-radius: 16px;
  width: 100%; max-width: 540px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 700; color: var(--text);
}
.modal-x { background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.modal-x:hover { color: var(--text); }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-body .field { margin-bottom: 12px; }
.modal-body label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.modal-body input, .modal-body textarea {
  width: 100%; padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 9px;
  font-size: 14px; font-family: inherit;
}
.modal-body textarea { line-height: 1.5; resize: vertical; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border); background: #fafbfc;
}

/* ── Pagination des tableaux ──────────────────────────────── */
.erp-pager {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 2px;
}
/* Pager attaché au bas d'une table ERP : table + pager forment une seule carte
   continue (coins arrondis en haut sur la table, en bas sur le pager). */
[id^="erp-table-"] > .erp-table-wrap { border-radius: 10px 10px 0 0; }
[id^="erp-table-"] > .erp-pager {
  margin-top: 0;
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
@media (max-width: 768px) { [id^="erp-table-"] > .erp-pager { padding: 10px 12px; } }

/* ── Overlay de chargement initial (1ʳᵉ synchronisation) ──── */
.boot-ov {
  position: fixed; inset: 0; z-index: 2000;
  background: radial-gradient(1000px 500px at 50% -10%, #15321f 0%, #11151c 50%, #0c0e13 100%);
  display: flex; align-items: center; justify-content: center;
}
.boot-card { text-align: center; color: #fff; width: 90%; max-width: 420px; }
.boot-card img { width: 76px; height: 76px; margin-bottom: 18px; }
.boot-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.boot-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 22px; }
.boot-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.boot-bar > div { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg,#27B768,#1FAA59); transition: width .4s ease; }
.boot-step { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 12px; min-height: 16px; }
.boot-pct { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px; }

/* ============================================================
   WIDGETS — style d'affichage standardisé (widgets standard ET personnalisés)
   ============================================================ */
/* Bandeau de totaux (bar/line/pie) */
.w-totals { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--text);
  margin: 0 2px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.w-total-item { display: inline-flex; align-items: center; gap: 6px; }
.w-total-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.w-total-item b { font-weight: 700; }
/* Tableau de widget : barre supérieure (compteur + export) + ligne de totaux */
.w-table-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; flex: none; }
table.lines-table tfoot .w-table-total td { border-top: 2px solid var(--border);
  background: #fafbfc; font-size: 12px; padding-top: 7px; padding-bottom: 7px; position: sticky; bottom: 0; }
table.lines-table tfoot .w-table-total b { font-weight: 700; color: var(--text); }
/* Filtre de période COMPACT : une puce discrète qui ouvre la popup de dates */
.w-period { display: flex; margin: 0 0 8px; flex: none; }
.w-period-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px;
  background: #f6f7f9; color: var(--text); font-size: 11.5px; font-weight: 600;
  cursor: pointer; line-height: 1.4; max-width: 100%; transition: background .12s ease, border-color .12s ease;
}
.w-period-chip:hover { background: #eef0f4; border-color: #d4d9e2; }
.w-period-chip .icon { color: var(--muted); flex: none; }
.w-period-caret { color: var(--muted); font-size: 9px; margin-left: 1px; }
/* Popup de période : grille de raccourcis */
.w-preset-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.w-preset {
  padding: 6px 12px; border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--white); color: var(--text); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .12s ease;
}
.w-preset:hover { border-color: var(--primary); background: var(--primary-l); }
.w-preset.active { border-color: var(--primary); background: var(--primary); color: #fff; }

/* KPI widget — compact & minimaliste : valeur + icône sur une ligne, sous-texte, lien */
.w-kpi { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0; }
.w-kpi-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.w-kpi-ic { width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.w-kpi-value { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.w-kpi-sub { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; }
.w-kpi-link-lbl { font-size: 12px; font-weight: 700; margin-top: 6px; }
/* KPI cliquable (lien de navigation) */
.w-kpi-link { cursor: pointer; }
/* Survol : fond léger sur la TOTALITÉ de la carte du widget KPI cliquable */
#widget-grid > .card[data-wid]:has(.w-kpi-link),
#dash-pinned-grid > .card[data-wid]:has(.w-kpi-link) { transition: background .12s ease, border-color .12s ease; }
#widget-grid > .card[data-wid]:has(.w-kpi-link):hover,
#dash-pinned-grid > .card[data-wid]:has(.w-kpi-link):hover { background: #f5f6f8; border-color: #dfe3ea; }
/* Éditeur de widget — responsive mobile */
@media (max-width: 768px) {
  /* Lignes de séries : les contrôles passent à la ligne au lieu de déborder */
  .wf-srow { flex-wrap: wrap; }
  .wf-srow .wf-s-col, .wf-srow .wf-s-label { flex: 1 1 100% !important; }
  .wf-srow .wf-s-axis { flex: 1 1 auto !important; width: auto !important; }
  /* Grille de widgets : cartes en pleine largeur (la largeur fixe px est plafonnée) */
  #widget-grid > .card[data-wid], #dash-pinned-grid > .card[data-wid] {
    width: 100% !important; resize: none !important;
  }
}

/* ============================================================
   CRM — pipeline kanban & activités
   ============================================================ */
.crm-col-total { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 10px 2px; }
.crm-opp-card { cursor: pointer; }
.crm-card-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.25; }
.crm-card-sub { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.crm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.crm-card-amt { font-size: 13px; font-weight: 800; color: var(--text); }
.crm-card-owner { font-size: 11px; color: var(--muted); margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.crm-due { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px;
  background: #f1f5f9; color: #475569; white-space: nowrap; }
.crm-due-today { background: #fef3c7; color: #92400e; }
.crm-due-late  { background: #fee2e2; color: #991b1b; }
/* Lignes d'activité */
/* 2 groupes : gauche (case « fait » + type + titre) / droite (statut + badge + échéance + assigné).
   Le titre tient sur UNE ligne (tronqué par « … ») ; en largeur réduite, la méta passe sous le groupe gauche. */
.crm-act-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.crm-act-row:last-child { border-bottom: none; }
.crm-act-main { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
.crm-act-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; flex: 0 1 auto; }
/* Sélecteur à 2 classes pour BATTRE « .modal-body input { width:100%; padding; border } »
   (sinon la case à cocher s'étire sur toute la largeur dans les modales et pousse le contenu hors cadre). */
.crm-act-row .crm-act-chk { flex: none; width: auto; min-width: 0; padding: 0; border: 0; display: inline-block; margin: 0; }
.crm-act-done .crm-act-titre { text-decoration: line-through; color: var(--muted); }
.crm-act-type { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #667085;
  background: #f2f4f7; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.crm-act-titre { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-act-st { flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.crm-act-sub { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; white-space: nowrap; color: #6b7280; background: #f1f5f9; }
.crm-act-sub.done { color: #16a34a; background: #16a34a1a; }
.crm-act-ech { font-size: 11px; font-weight: 600; color: #475569; white-space: nowrap; }
.crm-act-ech.crm-due-today { color: #92400e; }
.crm-act-ech.crm-due-late  { color: #991b1b; }
.crm-act-who { font-size: 11px; white-space: nowrap; }
/* Barre de progression des tâches sur une carte d'opportunité (kanban). */
.crm-card-prog { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; }
.crm-card-prog-track { flex: 1; height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.crm-card-prog-fill { height: 100%; background: var(--primary); border-radius: 3px; }
.crm-card-prog-fill.done { background: #16a34a; }
.crm-card-prog-lbl { font-size: 10.5px; font-weight: 700; color: #6b7280; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

/* ============================================================
   CRM — Fiche compte 360°
   ============================================================ */
.c360-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.c360-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
.c360-kpi-val { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.1; }
.c360-kpi-lbl { font-size: 10.5px; color: var(--muted); margin-top: 3px; font-weight: 600; }
.c360-sec { margin-bottom: 14px; }
.c360-sec-hd { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
.c360-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 5px; font-size: 13px; cursor: default; }
.c360-row[onclick] { cursor: pointer; }
.c360-row[onclick]:hover { background: var(--bg); border-color: #dfe3ea; }
.c360-row-main { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c360-row-amt { font-weight: 800; white-space: nowrap; }
.c360-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) {
  .c360-stats { grid-template-columns: repeat(3, 1fr); }
  .c360-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   CRM — Vue calendrier des activités
   ============================================================ */
.cal-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { margin-bottom: 4px; }
.cal-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-cell { min-height: 92px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; background: var(--white); overflow: hidden; cursor: default; }
.cal-cell.cal-out { background: var(--bg); opacity: .6; }
.cal-cell.cal-today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-daynum { font-size: 11px; font-weight: 700; color: var(--muted); text-align: right; padding: 0 2px 2px; }
.cal-cell.cal-today .cal-daynum { color: var(--primary); }
.cal-act { font-size: 10.5px; font-weight: 600; background: var(--bg); border-radius: 4px; padding: 2px 5px; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-act:hover { background: #eef1f6; }
.cal-act-done { text-decoration: line-through; opacity: .6; }
.cal-more { font-size: 10px; font-weight: 700; color: var(--primary); cursor: pointer; padding: 0 4px; }
@media (max-width: 768px) {
  .cal-cell { min-height: 64px; }
  .cal-act { font-size: 9.5px; }
}

/* ============================================================
   CRM — Notes & @mentions
   ============================================================ */
.crm-note-box { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.crm-note-box textarea { flex: 1; resize: vertical; }
.crm-note { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: var(--white); }
.crm-note-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.crm-note-body { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.crm-mention { background: var(--primary-l); color: var(--primary); font-weight: 700; border-radius: 4px; padding: 0 3px; }

/* ============================================================
   Consolidation des besoins (module Demandes d'achat)
   ============================================================ */
.da-cons-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 14px; }
.da-cons-filters select { padding:7px 10px; font-size:13px; border:1.5px solid var(--border); border-radius:8px; background:var(--white); color:var(--text); }
.da-cf-date { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.da-cf-date input { padding:6px 8px; border:1.5px solid var(--border); border-radius:8px; font-size:12px; }
.da-cf-chk { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text); cursor:pointer; }
.da-seg { display:inline-flex; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; }
.da-seg button { border:none; background:var(--white); color:var(--muted); padding:7px 14px; font-size:13px; cursor:pointer; }
.da-seg button.on { background:var(--primary); color:#fff; font-weight:600; }
.da-cons-tbl tbody td { border-bottom:1px solid var(--border); }
.da-cons-ghdr td { background:var(--bg); font-weight:700; color:var(--text); padding:8px 10px !important; }
.da-cons-detail td { background:#fbfcfe; }
.da-cons-sub { width:100%; border-collapse:collapse; font-size:12px; margin:4px 0; }
.da-cons-sub th { text-align:left; color:var(--muted); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--border); }
.da-cons-sub td { padding:4px 8px; border-bottom:1px solid var(--border); }
.da-cons-sub .num, .da-cons-tbl .num { text-align:right; }
.da-cons-actionbar {
  position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:12px; padding:12px 18px; background:var(--white);
  border:1.5px solid var(--border); border-radius:12px; box-shadow:0 -2px 10px rgba(0,0,0,.05);
}
.da-cons-actionbar #da-cons-sel { font-size:13px; color:var(--muted); }

/* ── Écran Modules (Lot A) — tuiles mates, esprit Sage ── */
.mod-head { margin-bottom: 18px; font-size: 13px; line-height: 1.5; }
#mod-count { font-weight: 700; color: var(--primary); }
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.mod-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 10px 10px;
  text-align: center;
  opacity: .5;
  filter: grayscale(1);
  transition: opacity .18s, filter .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.mod-card.on { opacity: 1; filter: none; box-shadow: 0 1px 5px rgba(0,0,0,.05); }
.mod-card:hover { transform: translateY(-1px); border-color: #cbd5e1; }
/* Tuile pictogramme — mate sombre, glyphe épuré, point d'accent vert */
.mod-ico {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto 9px;
  border-radius: 11px;
  background: #22242c;                      /* mat, pas de dégradé */
  color: rgba(255,255,255,.92);
}
.mod-ico svg { width: 20px; height: 20px; }
.mod-card.on .mod-ico::after {               /* accent vert discret (clin d'œil Sage) */
  content: ""; position: absolute; right: 6px; bottom: 6px;
  width: 5px; height: 5px; border-radius: 50%; background: #27B768;
}
.mod-name { font-weight: 700; font-size: 12.5px; }
.mod-core {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  background: #f1f5f9; color: #64748b; border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
/* Intitulés de groupe (Socle / standard / supplémentaires) */
.mod-sect {
  margin: 18px 0 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: #94a3b8;
}
.mod-sect:first-of-type { margin-top: 0; }
/* Petite icône « ? » (description du module) + popup */
.mod-help {
  position: absolute; top: 8px; left: 8px;
  width: 16px; height: 16px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #94a3b8;
  border: none; border-radius: 50%; cursor: pointer;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.mod-help:hover { background: #e2e8f0; color: #475569; }
.mod-state {
  font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px;
  background: #fee2e2; color: #b91c1c;
}
.mod-state.on { background: #dcfce7; color: #15803d; }
.modal-head .mod-ico { width: 30px; height: 30px; border-radius: 8px; margin: 0; }
.modal-head .mod-ico svg { width: 15px; height: 15px; }
.mod-feats { display: flex; flex-direction: column; gap: 8px; }
.mod-feat { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.mod-feat svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: #27B768; }
/* Interrupteur */
.mod-switch { position: absolute; top: 10px; right: 10px; display: inline-block; width: 28px; height: 16px; flex: none; }
.mod-switch input { opacity: 0; width: 0; height: 0; }
.mod-slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: #cbd5e1; transition: background .15s;
}
.mod-slider::before {
  content: ""; position: absolute; height: 12px; width: 12px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.mod-switch input:checked + .mod-slider { background: var(--primary); }
.mod-switch input:checked + .mod-slider::before { transform: translateX(12px); }
.mod-switch input:disabled + .mod-slider { opacity: .6; cursor: wait; }

/* ── Lanceur d'apps (page Accueil) ─────────────────────── */
.app-launcher { max-width: 860px; margin: 26px auto 0; }
.app-hello { font-size: 17px; font-weight: 700; margin-bottom: 22px; color: var(--text, #1e293b); }
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 16px;
}
.app-tile {
  text-align: center; cursor: pointer;
  padding: 14px 8px 12px; border-radius: 14px;
  transition: background .15s, transform .12s;
}
.app-tile:hover { background: rgba(0,0,0,.045); transform: translateY(-2px); }
.app-tile-ico {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 10px;
  border-radius: 14px; background: #22242c; color: rgba(255,255,255,.92);
}
.app-tile-ico svg { width: 25px; height: 25px; }
.app-tile-ico::after {
  content: ""; position: absolute; right: 7px; bottom: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: #27B768;
}
.app-tile-name { font-size: 12.5px; font-weight: 600; }

/* Bouton « ← Apps » (sidebar en mode app) */
.sidebar-back { opacity: .75; }
.sidebar-back:hover { opacity: 1; }

/* Bandeau abonnement (écran Apps) */
.mod-ent {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
  border-radius: 10px; padding: 8px 14px; margin-bottom: 14px; font-size: 12.5px;
}
.mod-ent .btn { margin-left: auto; }

/* App hors abonnement : cadenas discret + mention */
.mod-lock {
  position: absolute; top: 8px; right: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fee2e2; color: #b91c1c; cursor: help;
}
.mod-lock svg { width: 9px; height: 9px; }
.mod-lock-txt { font-size: 10px; font-weight: 600; color: #b91c1c; margin-top: 3px; }

/* Bannière d'abonnement (C3) */
.ent-banner {
  padding: 8px 20px; font-size: 12.5px; font-weight: 600; text-align: center;
}
.ent-banner.warning   { background: #fef9c3; color: #854d0e; }
.ent-banner.grace     { background: #ffedd5; color: #9a3412; }
.ent-banner.expired   { background: #fee2e2; color: #b91c1c; }
.ent-banner.suspended { background: #b91c1c; color: #fff; }

/* ═══════════════════════════════════════════════════════════
   RTL — arabe (dir="rtl" pose sur <html> par i18n.js)
   Le navigateur retourne seul le texte, les champs de saisie et les puces.
   Ce qui reste a notre charge : ce qui est positionne en dur a gauche.
   Place en FIN de fichier : a specificite egale, la derniere regle gagne.
   ═══════════════════════════════════════════════════════════ */

/* Barre laterale : elle passe a droite, et la zone principale se decale a droite. */
[dir="rtl"] .sidebar {
  left: auto; right: 0;
  box-shadow: -2px 0 12px rgba(0,0,0,.18);
}
[dir="rtl"] .main-area {
  margin-left: 0;
  margin-right: var(--sidebar-w);
  transition: margin-right .22s cubic-bezier(.4,0,.2,1);
}
[dir="rtl"] .main-area.sidebar-collapsed {
  margin-left: 0;
  margin-right: var(--sidebar-w-col);
}

/* Tableaux : en-tetes et cellules alignes a droite. Les colonnes numeriques
   gardent leur alignement propre si elles en ont un (style inline). */
[dir="rtl"] .erp-table th,
[dir="rtl"] .erp-table td { text-align: right; }

/* Elements dont la mise en page est inversee par le sens d'ecriture. */
[dir="rtl"] .header-left,
[dir="rtl"] .header-right,
[dir="rtl"] .list-header,
[dir="rtl"] .results-bar,
[dir="rtl"] .card-title-row,
[dir="rtl"] .btn-row { flex-direction: row-reverse; }

/* Le tiroir mobile entre par la droite. */
[dir="rtl"] .drawer { left: auto; right: 0; }

/* Nombres, montants, dates, references : ils restent en lecture gauche-droite
   meme en arabe — sinon un « 1 250,00 » ou un « DE00005 » se lit a l'envers. */
[dir="rtl"] .fiche-kpi-val,
[dir="rtl"] .erp-table td.num,
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"] { direction: ltr; text-align: right; }

/* ═══════════════════════════════════════════════════════════
   RTL — passe complete (lot 16). Le lot 1 avait traite l'ossature
   (barre laterale, zone principale, tableaux, tiroir). Ici : tout ce qui
   reste ancre a gauche ou a droite en dur et se voit en arabe.
   ═══════════════════════════════════════════════════════════ */

/* Icone de la barre de recherche : elle doit suivre le debut du texte. */
[dir="rtl"] .header-search-icon { left: auto; right: 11px; }
[dir="rtl"] .header-search-input { padding-left: 12px; padding-right: 34px; }

/* Accents de couleur en bord de carte : ils marquent le DEBUT de la carte. */
[dir="rtl"] .doc-card {
  border-left: none;
  border-right: 4px solid var(--muted);
}
[dir="rtl"] .kanban-card {
  border-left: none;
  border-right: 3px solid transparent;
}
[dir="rtl"] .kanban-col[data-status="ENVOYE"]  .kanban-card { border-right-color: var(--blue); }
[dir="rtl"] .kanban-col[data-status="ACCEPTE"] .kanban-card { border-right-color: var(--green); }
[dir="rtl"] .kanban-col[data-status="REFUSE"]  .kanban-card { border-right-color: var(--red); }
[dir="rtl"] .kanban-col[data-status="EXPIRE"]  .kanban-card { border-right-color: var(--orange); }

/* Separateur entre boutons de vue : sinon double bordure d'un cote, aucune de l'autre. */
[dir="rtl"] .vtoggle-btn + .vtoggle-btn {
  border-left: none;
  border-right: 1px solid var(--border);
}

/* Pastilles, compteurs et badges en coin : ils passent du coin droit au coin gauche. */
[dir="rtl"] .notif-dot        { right: auto; left: 3px; }
[dir="rtl"] .doc-type-cnt     { right: auto; left: 5px; }
[dir="rtl"] .mod-core         { right: auto; left: 8px; }
[dir="rtl"] .mod-card.on .mod-ico::after { right: auto; left: 6px; }

/* Elements flottants : bouton d'action et notifications. */
[dir="rtl"] .fab   { right: auto; left: 16px; }
[dir="rtl"] .toast { right: auto; left: 28px; }

/* Menus deroulants : ils doivent s'ouvrir VERS L'INTERIEUR de la page. */
[dir="rtl"] .societe-dropdown { right: auto; left: 0; }
[dir="rtl"] .col-picker-menu  { right: auto; left: 0; }

/* « margin-left:auto » pousse vers la fin de ligne : en RTL c'est margin-right. */
[dir="rtl"] .sidebar-chevron,
[dir="rtl"] .soc-check,
[dir="rtl"] .w-period-caret { margin-left: 0; margin-right: auto; }
[dir="rtl"] .row-right      { margin-left: 0; margin-right: 12px; }

/* Indentations : decalage du cote du debut de ligne. */
[dir="rtl"] .dash-doc-row { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .devis-lines-tbl tr.nomencl-comp td:nth-child(2) { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .devis-line-tot { padding-right: 0; padding-left: 8px; }

/* Marge d'icone en ligne : elle separe l'icone du texte qui la SUIT. */
[dir="rtl"] .btn .icon:not(:only-child) { margin-right: 0; margin-left: 6px; }

/* text-align:left force : a repasser en droite, sauf les colonnes numeriques
   (elles gardent leur alignement propre, cf. bloc du lot 1). */
[dir="rtl"] .sidebar-item,
[dir="rtl"] .sidebar-sub,
[dir="rtl"] .drawer-nav button,
[dir="rtl"] .soc-drop-item,
[dir="rtl"] .perm-res-col,
[dir="rtl"] .perm-res,
[dir="rtl"] .lines-table thead th,
[dir="rtl"] .devis-lines-tbl thead th,
[dir="rtl"] .fiche-docs-table th,
[dir="rtl"] .da-cons-sub th { text-align: right; }

/* Numero de jour du calendrier : coin oppose. */
[dir="rtl"] .cal-daynum { text-align: left; }