/* ══════════════════════════════════════════════════════════════════════════════
   Palette Buyco
   ── Charcoal navbar : #2e2e2e
   ── Vert lime       : #9cc219  (primary)
   ── Bleu marine     : #1d3461  (headings)
   ── Fond page       : #f0f2f5
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Bootstrap primary → vert lime */
  --bs-primary:              #9cc219;
  --bs-primary-rgb:          156, 194, 25;
  --bs-link-color:           #9cc219;
  --bs-link-color-rgb:       156, 194, 25;
  --bs-link-hover-color:     #7d9b14;
  --bs-link-hover-color-rgb: 125, 155, 20;

  /* Couleurs Buyco custom */
  --bc-charcoal:   #2e2e2e;
  --bc-lime:       #9cc219;
  --bc-lime-dark:  #7d9b14;
  --bc-lime-light: #edf4d0;
  --bc-navy:       #1d3461;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
body {
  background-color: #f0f2f5;
  font-size: 0.9rem;
  color: #3a3a3a;
}

.container-fluid {
  max-width: 1400px;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  color: var(--bc-navy);
}

/* ── Navbar ─────────────────────────────────────────────────────────────────── */
.navbar {
  background-color: var(--bc-charcoal) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.navbar-brand {
  font-size: 1rem;
  color: #fff !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,.75);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--bc-lime) !important;
}

.navbar-dark .navbar-nav .dropdown-toggle::after {
  border-top-color: rgba(255,255,255,.75);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:               #9cc219;
  --bs-btn-border-color:     #9cc219;
  --bs-btn-hover-bg:         #7d9b14;
  --bs-btn-hover-border-color: #7d9b14;
  --bs-btn-active-bg:        #6b8512;
  --bs-btn-active-border-color: #6b8512;
  --bs-btn-color:            #fff;
  --bs-btn-hover-color:      #fff;
  --bs-btn-active-color:     #fff;
  --bs-btn-focus-shadow-rgb: 156, 194, 25;
}

.btn-outline-primary {
  --bs-btn-color:            #9cc219;
  --bs-btn-border-color:     #9cc219;
  --bs-btn-hover-bg:         #9cc219;
  --bs-btn-hover-color:      #fff;
  --bs-btn-hover-border-color: #9cc219;
  --bs-btn-active-bg:        #7d9b14;
  --bs-btn-active-border-color: #7d9b14;
  --bs-btn-active-color:     #fff;
}

/* ── Badges / bg-primary ────────────────────────────────────────────────────── */
.bg-primary {
  background-color: var(--bc-lime) !important;
}

.text-bg-primary {
  background-color: var(--bc-lime) !important;
  color: #fff !important;
}

.text-primary {
  color: var(--bc-lime) !important;
}

.border-primary {
  border-color: var(--bc-lime) !important;
}

/* Fond lime très clair (bg-primary bg-opacity-10) */
.bg-primary.bg-opacity-10 {
  background-color: var(--bc-lime-light) !important;
}

/* ── Links ──────────────────────────────────────────────────────────────────── */
a {
  color: var(--bc-lime);
}
a:hover {
  color: var(--bc-lime-dark);
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.card-header {
  border-radius: 10px 10px 0 0 !important;
  background-color: #f8f9fa;
  font-size: 0.875rem;
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ── Facture row selected ───────────────────────────────────────────────────── */
.facture-row.selected {
  background-color: var(--bc-lime-light) !important;
  outline: 2px solid var(--bc-lime);
}

/* ── Score badge ────────────────────────────────────────────────────────────── */
.score-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #dc3545, #ffc107, #198754);
  position: relative;
}

/* ── Drop zone ──────────────────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed #ced4da;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: border-color 0.2s, background-color 0.2s;
  background-color: #fafbfc;
}

.drop-zone.dragover {
  border-color: var(--bc-lime);
  background-color: var(--bc-lime-light);
}

/* ── Cursor ─────────────────────────────────────────────────────────────────── */
.cursor-pointer {
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Navigation chevrons — page Rapprochement
   ══════════════════════════════════════════════════════════════════════════════ */

.matching-nav-wrapper {
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  overflow-x: auto;
}

/* ── Chevron steps (cycle factures) ─────────────────────────────────────────── */
.chevron-nav {
  display: flex;
  align-items: stretch;
}

.chevron-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 22px 7px 30px;
  background: #edf0f4;
  color: #6c757d;
  border: none;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  margin-left: -10px;
  z-index: 1;
}

/* Premier chevron : pas d'encoche à gauche */
.chevron-nav .chevron-step:first-child {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  margin-left: 0;
  padding-left: 16px;
}

.chevron-step:hover {
  background: #dde2e8;
  color: #333;
  z-index: 2;
}

.chevron-step.active {
  background: var(--bc-lime);
  color: #fff;
  z-index: 3;
}

.chevron-step.active:hover {
  background: var(--bc-lime-dark);
}

/* ── Pill steps (commandes, avoirs) ─────────────────────────────────────────── */
.pill-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #fff;
  color: #6c757d;
  border: 1.5px solid #dee2e6;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}

.pill-step:hover {
  border-color: var(--bc-lime);
  color: var(--bc-lime);
}

.pill-step.active {
  background: var(--bc-lime);
  border-color: var(--bc-lime);
  color: #fff;
}

/* ── Badges intégrés aux steps ──────────────────────────────────────────────── */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0,0,0,.15);
  color: inherit;
  line-height: 1;
}

.chevron-step.active .step-badge {
  background: rgba(255,255,255,.3);
  color: #fff;
}

.step-badge-success  { background: #198754 !important; color: #fff !important; }
.step-badge-warning  { background: #ffc107 !important; color: #333 !important; }
.step-badge-danger   { background: #dc3545 !important; color: #fff !important; }
.step-badge-primary  { background: #0d6efd !important; color: #fff !important; }

.chevron-step.active .step-badge-success,
.chevron-step.active .step-badge-warning,
.chevron-step.active .step-badge-danger,
.chevron-step.active .step-badge-primary  { opacity: 1; }

/* ── Sticky table header ────────────────────────────────────────────────────── */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ── Form focus ─────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--bc-lime);
  box-shadow: 0 0 0 0.2rem rgba(156, 194, 25, 0.25);
}

/* ── Pagination / page active ───────────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: var(--bc-lime);
  border-color: var(--bc-lime);
  color: #fff;
}

.page-link {
  color: var(--bc-lime);
}

.page-link:hover {
  color: var(--bc-lime-dark);
}