/* ════════════════════════════════════════════════════════════════════════════
   COMPTA BLOOMBERG — refonte UI dense + sobre + scan rapide
   Override les classes .cpt-* du module Comptabilité (comptabilite.js)
   Date : 2026-05-08
   Inspiration : terminal Bloomberg + cabinet feutré
   ════════════════════════════════════════════════════════════════════════════ */

/* Police monospace embarquée (JetBrains Mono via CDN, fallback gracieux) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Palette Bloomberg dérivée des tokens Nexus */
  --cb-bg:           #0a0b0c;
  --cb-bg-2:         #0f1212;
  --cb-bg-head:      rgba(255, 255, 255, 0.025);
  --cb-bg-zebra:     rgba(255, 255, 255, 0.012);
  --cb-bg-hover:     rgba(34, 118, 102, 0.07);
  --cb-bg-selected:  rgba(34, 118, 102, 0.14);
  --cb-line:         rgba(255, 255, 255, 0.06);
  --cb-line-strong:  rgba(255, 255, 255, 0.10);
  --cb-text:         #e8eaed;
  --cb-text-2:       #a8acb1;
  --cb-text-3:       #6b7280;
  /* Sémantique : entrée = vert désaturé, sortie = terracotta */
  --cb-in:           #5a8c6d;
  --cb-out:          #a85a5a;
  --cb-warn:         var(--gold, #c9a84c);
  --cb-ok:           var(--teal, #227666);
  --cb-mono:         'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Mode clair : adapter le contraste (la même structure, fond plus clair) */
html.theme-light {
  --cb-bg:           #f7faf9;
  --cb-bg-2:         #f1f5f4;
  --cb-bg-head:      rgba(0, 0, 0, 0.025);
  --cb-bg-zebra:     rgba(0, 0, 0, 0.015);
  --cb-bg-hover:     rgba(26, 93, 81, 0.06);
  --cb-bg-selected:  rgba(26, 93, 81, 0.10);
  --cb-line:         rgba(0, 0, 0, 0.08);
  --cb-line-strong:  rgba(0, 0, 0, 0.14);
  --cb-text:         #0b1515;
  --cb-text-2:       #4a6060;
  --cb-text-3:       #7a8c8c;
  --cb-in:           #3d6e4d;
  --cb-out:          #8a3d3d;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1) TABLEAUX — refonte .cpt-table / .cpt-thead / .cpt-row
   ───────────────────────────────────────────────────────────────────────────── */

/* Wrapper : permet le scroll horizontal sur petits écrans */
.cpt-table {
  background: var(--cb-bg);
  border: 1px solid var(--cb-line);
  border-radius: 6px;
  overflow: hidden auto;
  position: relative;
  /* Conteneur scrollable horizontal pour responsive */
  overflow-x: auto;
}
.cpt-table::-webkit-scrollbar { height: 8px; width: 8px; }
.cpt-table::-webkit-scrollbar-track { background: var(--cb-bg); }
.cpt-table::-webkit-scrollbar-thumb { background: var(--cb-line-strong); border-radius: 4px; }
.cpt-table::-webkit-scrollbar-thumb:hover { background: rgba(34,118,102,0.4); }

.cpt-thead {
  display: flex;
  padding: 0;
  background: var(--cb-bg-head);
  border-bottom: 1px solid var(--cb-line-strong);
  font-family: var(--cb-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
  color: var(--cb-text-3) !important;
  gap: 0 !important;
  position: sticky;
  top: 0;
  z-index: 5;
}
.cpt-thead > div {
  padding: 9px 14px;
  border-right: 1px solid var(--cb-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  user-select: none;
  /* Forcer le respect des largeurs définies en inline style */
  flex-shrink: 0;
}
.cpt-thead > div:last-child { border-right: 0; }

/* Header sortable : indicateur visuel */
.cpt-thead > div.sortable {
  cursor: pointer;
  transition: color .15s, background .15s;
}
.cpt-thead > div.sortable:hover {
  color: var(--cb-text) !important;
  background: rgba(255, 255, 255, 0.03);
}
.cpt-thead > div.sortable .sort-ind {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  opacity: 0.4;
  vertical-align: middle;
}
.cpt-thead > div.sorted-asc .sort-ind,
.cpt-thead > div.sorted-desc .sort-ind { opacity: 1; color: var(--cb-ok); }
.cpt-thead > div.sorted-asc .sort-ind::before  { content: '▲'; }
.cpt-thead > div.sorted-desc .sort-ind::before { content: '▼'; }
.cpt-thead > div:not(.sorted-asc):not(.sorted-desc) .sort-ind::before { content: '⇅'; }

/* Poignée de redimensionnement (4px à droite de chaque header) */
.cpt-thead > div .col-resizer {
  position: absolute;
  top: 0; right: -2px;
  width: 6px; height: 100%;
  cursor: col-resize;
  z-index: 6;
  background: transparent;
  transition: background .15s;
}
.cpt-thead > div .col-resizer:hover,
.cpt-thead > div .col-resizer.dragging {
  background: var(--cb-ok);
}
body.cpt-resizing { cursor: col-resize !important; user-select: none !important; }
body.cpt-resizing * { cursor: col-resize !important; }

/* Lignes : densité Bloomberg (32px) */
.cpt-row {
  display: flex;
  padding: 0;
  border-top: 1px solid var(--cb-line);
  gap: 0 !important;
  align-items: stretch;
  min-height: 32px;
  font-family: var(--cb-mono) !important;
  font-size: 12px !important;
  color: var(--cb-text) !important;
  transition: background .12s;
}
.cpt-row > div {
  padding: 7px 14px;
  border-right: 1px solid var(--cb-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  /* L'alignement vient des inline styles existants (text-align:right/center) */
  flex-shrink: 0;
  font-size: 12px !important;
  font-family: var(--cb-mono) !important;
}
.cpt-row > div:last-child { border-right: 0; }
.cpt-row > div[style*="text-align:right"]  { justify-content: flex-end; }
.cpt-row > div[style*="text-align:center"] { justify-content: center; }

.cpt-row:nth-child(even) { background: var(--cb-bg-zebra); }
.cpt-row:hover { background: var(--cb-bg-hover); }
.cpt-row.is-selected { background: var(--cb-bg-selected); }

/* ──────────────────────────────────────────────────────────────────
   Table responsive — lignes relevé bancaire (Sateliance + ASTORM)
   Grid CSS adaptable. Pour ne pas casser les tables flex existantes,
   on override seulement quand la classe .cpt-rl-row est presente.
   ────────────────────────────────────────────────────────────────── */
.cpt-releve-table { overflow: auto; }
.cpt-releve-table .cpt-rl-row {
  display: grid !important;
  grid-template-columns:
    96px              /* Date */
    minmax(180px, 1fr) /* Libelle */
    100px             /* Mnt EUR */
    36px              /* R */
    96px;             /* Actions */
  align-items: center;
  gap: 0 !important;
  padding: 0 !important;
}
.cpt-releve-table.sat-mode .cpt-rl-row {
  grid-template-columns:
    96px               /* Date */
    minmax(180px, 1fr) /* Libelle */
    100px              /* Mnt EUR */
    130px              /* Equiv TND + badge */
    48px               /* PJ */
    110px              /* Lien */
    44px               /* Note */
    36px               /* R */
    96px;              /* Actions */
  min-width: 940px;     /* assure scroll horizontal sur ecran etroit */
}
.cpt-releve-table .cpt-rl-row > div {
  padding: 6px 8px !important;
  min-width: 0;        /* IMPORTANT : permet au flex/text de shrinker */
  flex-shrink: 1 !important;
  white-space: normal;
  overflow: hidden;
}
.cpt-releve-table .cpt-thead.cpt-rl-row > div {
  padding: 8px 8px !important;
}
/* En-tête collant : fond opaque, sinon la 1re ligne transparaît dessous au scroll. */
.cpt-releve-table .cpt-thead { background: var(--cb-bg-2) !important; }

/* Mode compact 1100px : reduce pj/note + masquer R */
@media (max-width: 1200px) {
  .cpt-releve-table.sat-mode .cpt-rl-row {
    grid-template-columns:
      88px
      minmax(140px, 1fr)
      90px
      120px
      42px
      96px
      40px
      32px
      84px;
    min-width: 820px;
  }
}

/* Mode tres compact < 900px : masque colonnes auxiliaires, badges resumes sous le libellé */
@media (max-width: 900px) {
  .cpt-releve-table.sat-mode .cpt-rl-row {
    grid-template-columns:
      88px
      minmax(120px, 1fr)
      90px
      110px
      80px;
    min-width: 0;
  }
  /* Hide PJ + Lien + Note + R columns in head + body */
  .cpt-releve-table.sat-mode .cpt-rl-row > div:nth-child(5),
  .cpt-releve-table.sat-mode .cpt-rl-row > div:nth-child(6),
  .cpt-releve-table.sat-mode .cpt-rl-row > div:nth-child(7),
  .cpt-releve-table.sat-mode .cpt-rl-row > div:nth-child(8) {
    display: none !important;
  }
  /* Show summary inline under libelle */
  .cpt-releve-table .cpt-rl-summary { display: flex !important; }
}

/* En desktop large, le mini-resume sous le libelle est cache (les colonnes le rendent) */
@media (min-width: 901px) {
  .cpt-releve-table .cpt-rl-summary { display: none; }
}

/* Override inline color/font sur Menlo, --teal, --gold dans les cellules */
.cpt-row > div[style*="font-family:Menlo"] {
  font-family: var(--cb-mono) !important;
  font-size: 12px !important;
}
.cpt-row > div[style*="color:var(--teal)"] {
  color: var(--cb-text-2) !important;
}
.cpt-row > div[style*="color:var(--gold)"] {
  color: var(--cb-text) !important;
  font-weight: 500 !important;
}

.cpt-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--cb-text-3);
  font-family: var(--cb-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cpt-foot {
  margin-top: 6px;
  padding: 6px 10px;
  font-family: var(--cb-mono);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  color: var(--cb-text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2) BADGES → CHIPS OUTLINE (Bloomberg)
   ───────────────────────────────────────────────────────────────────────────── */
.cpt-badge {
  display: inline-block;
  padding: 2px 9px !important;
  border-radius: 3px !important;
  font-family: var(--cb-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent !important;
  line-height: 1.5;
}
.cpt-badge.teal  { color: var(--cb-ok)   !important; border-color: rgba(34, 118, 102, 0.45) !important; }
.cpt-badge.gold  { color: var(--cb-warn) !important; border-color: rgba(201, 168, 76, 0.45) !important; }
.cpt-badge.red   { color: var(--cb-out)  !important; border-color: rgba(168, 90, 90, 0.45) !important; }
.cpt-badge.gray  { color: var(--cb-text-2) !important; border-color: var(--cb-line-strong) !important; }
.cpt-badge.muted { color: var(--cb-text-3) !important; border-color: var(--cb-line) !important; font-style: normal; }

/* ─────────────────────────────────────────────────────────────────────────────
   3) MONTANTS — sémantique entrée / sortie / suffixe devise
   ───────────────────────────────────────────────────────────────────────────── */
.cpt-num,
.cpt-row .num,
.cpt-thead .num {
  font-family: var(--cb-mono) !important;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0 !important;
}
.cpt-num.in,  .cpt-row > div.in  { color: var(--cb-in)  !important; }
.cpt-num.out, .cpt-row > div.out { color: var(--cb-out) !important; }
.cpt-ccy {
  color: var(--cb-text-3);
  font-size: 10px;
  margin-left: 4px;
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4) TOOLBAR / FILTRES — Bloomberg sobriety
   ───────────────────────────────────────────────────────────────────────────── */
.cpt-toolbar {
  background: var(--cb-bg-2);
  border: 1px solid var(--cb-line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  gap: 6px !important;
}
.cpt-input,
.cpt-select {
  background: var(--cb-bg) !important;
  color: var(--cb-text) !important;
  border: 1px solid var(--cb-line-strong) !important;
  border-radius: 3px !important;
  font-family: var(--cb-mono) !important;
  font-size: 12px !important;
  padding: 6px 9px !important;
  letter-spacing: 0.3px;
  transition: border-color .15s, background .15s;
}
.cpt-input:focus,
.cpt-select:focus {
  outline: none;
  border-color: var(--cb-ok) !important;
  background: var(--cb-bg-2) !important;
}

/* Montants colores : positifs = vert, negatifs = rouge.
   Override le color: var(--cb-text) !important applique a .cpt-input */
.cpt-amount-pos { color: #4caf85 !important; font-weight: 600 !important; }
.cpt-amount-neg { color: #e57373 !important; font-weight: 600 !important; }
.cpt-amount-zero { color: var(--cb-text-3) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   5) ONGLETS COMPTA — affirmer la signature monospace
   ───────────────────────────────────────────────────────────────────────────── */
.cpt-tabs {
  border-bottom: 1px solid var(--cb-line-strong);
  margin-bottom: 12px !important;
}
.cpt-tab {
  font-family: var(--cb-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  padding: 9px 14px !important;
  color: var(--cb-text-3) !important;
}
.cpt-tab:hover { color: var(--cb-text) !important; background: rgba(255,255,255,0.025) !important; }
.cpt-tab.active {
  color: var(--cb-ok) !important;
  border-bottom-color: var(--cb-ok) !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6) KPI CARDS — version sobre Bloomberg
   ───────────────────────────────────────────────────────────────────────────── */
.cpt-kpi {
  background: var(--cb-bg);
  border: 1px solid var(--cb-line);
  border-radius: 4px;
  padding: 12px 14px;
}
.cpt-kpi-label {
  font-family: var(--cb-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 1.6px !important;
  color: var(--cb-text-3) !important;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cpt-kpi-value {
  font-family: var(--cb-mono) !important;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-weight: 500 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em;
  color: var(--cb-text) !important;
}
.cpt-kpi-sub {
  font-family: var(--cb-mono) !important;
  font-size: 10px !important;
  color: var(--cb-text-3) !important;
  margin-top: 3px;
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7) CARTES / FORMULAIRES
   ───────────────────────────────────────────────────────────────────────────── */
.cpt-card {
  background: var(--cb-bg);
  border: 1px solid var(--cb-line);
  border-radius: 6px;
  padding: 14px 16px;
}
.cpt-card h3 {
  font-family: var(--cb-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1.6px !important;
  color: var(--cb-text-2) !important;
  margin-bottom: 10px !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}
.cpt-form label {
  font-family: var(--cb-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  color: var(--cb-text-3) !important;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8) RESPONSIVE — scroll horizontal sous 1100px, masquage colonnes <768px
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cpt-table { min-width: 0; }
  .cpt-thead, .cpt-row { min-width: 980px; }
}
@media (max-width: 900px) {
  /* Masquer colonnes secondaires (PDF, Rappr) sur tablette */
  .cpt-table[data-compact="auto"] .cpt-thead > [data-col-priority="3"],
  .cpt-table[data-compact="auto"] .cpt-row   > [data-col-priority="3"] { display: none; }
  .cpt-thead, .cpt-row { min-width: 760px; }
}
@media (max-width: 640px) {
  .cpt-table[data-compact="auto"] .cpt-thead > [data-col-priority="2"],
  .cpt-table[data-compact="auto"] .cpt-row   > [data-col-priority="2"] { display: none; }
  .cpt-thead, .cpt-row { min-width: 560px; }
  .cpt-tab { padding: 8px 10px !important; font-size: 10px !important; }
  .cpt-toolbar { flex-direction: column; align-items: stretch; }
  .cpt-toolbar > * { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9) BORDEREAUX-NGE — alignement avec le langage compta
   ───────────────────────────────────────────────────────────────────────────── */
.bnge-wrapper { font-family: var(--cb-mono); }
.bnge-wrapper .bnge-num,
.bnge-wrapper td.num {
  font-family: var(--cb-mono) !important;
  font-variant-numeric: tabular-nums lining-nums;
}