/* ═══════════════════════════════════════════════════════════════════════
   TECHUB — GLOBAL.CSS
   Tokens, reset, typographie, layout shell, composants partagés
═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* ─── Tokens ─────────────────────────────────────────────────────── */
:root {
  --navy:     #0b1e33;
  --navy-2:   #16304f;
  --teal:     #0f6e56;
  --teal-2:   #0a5a44;
  --teal-lt:  #e6f5f0;
  --teal-mid: #a7f3d0;
  --amber:    #d97706;
  --amber-lt: #fffbeb;
  --amber-bd: #fde68a;
  --blue-lt:  #eff6ff;
  --blue-bd:  #bfdbfe;
  --red:      #dc2626;
  --red-lt:   #fef2f2;
  --red-bd:   #fecaca;
  --bg:       #f0f2f5;
  --surface:  #ffffff;
  --border:   rgba(11,30,51,.09);
  --text:     #0b1e33;
  --muted:    #64748b;
  --r-sm:     8px;
  --r:        12px;
  --r-lg:     16px;
  --r-xl:     20px;
}

/* ─── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; -webkit-text-size-adjust: 100% }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px; line-height: 1.6;
  color: var(--text); background: var(--bg);
}
img { display: block; max-width: 100% }
button { font-family: inherit; cursor: pointer }
a { color: inherit; text-decoration: none }
input, select, textarea { font-family: inherit }

/* ─── Utilitaires ─────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0) }

/* ─── Boutons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px; border-radius: var(--r);
  font-size: 13px; font-weight: 600; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: all .15s; white-space: nowrap;
}
.btn-navy   { background: var(--navy);  color: #fff; border-color: var(--navy) }
.btn-navy:hover   { background: var(--navy-2) }
.btn-teal   { background: var(--teal);  color: #fff; border-color: var(--teal) }
.btn-teal:hover   { background: var(--teal-2) }
.btn-ghost  { background: var(--surface); color: var(--text); border-color: var(--border) }
.btn-ghost:hover  { background: #f1f5f9 }
.btn-danger { background: var(--red-lt); color: var(--red); border-color: var(--red-bd) }
.btn-danger:hover { background: #fee2e2 }
.btn-sm  { height: 34px; padding: 0 14px; font-size: 12px; border-radius: var(--r-sm) }
.btn-lg  { height: 48px; padding: 0 24px; font-size: 15px; border-radius: var(--r-lg) }
.btn-full { width: 100%; justify-content: center }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none }

/* ─── Badges statut ──────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-pending          { background:#f1f5f9; color:#475569; border-color:#e2e8f0 }
.badge-quoted           { background:var(--blue-lt); color:#1d4ed8; border-color:var(--blue-bd) }
.badge-accepted         { background:#f0fdf4; color:#166534; border-color:#bbf7d0 }
.badge-refused          { background:var(--red-lt); color:#991b1b; border-color:var(--red-bd) }
.badge-converted        { background:var(--teal-lt); color:var(--teal); border-color:var(--teal-mid) }
.badge-awaiting_deposit { background:var(--amber-lt); color:var(--amber); border-color:var(--amber-bd) }
.badge-deposit_paid     { background:var(--blue-lt); color:#1d4ed8; border-color:var(--blue-bd) }
.badge-processing       { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe }
.badge-in_transit       { background:#fff7ed; color:#c2410c; border-color:#fed7aa }
.badge-ready            { background:#f0fdf4; color:#166534; border-color:#bbf7d0 }
.badge-active           { background:#f0fdf4; color:#166534; border-color:#bbf7d0 }
.badge-inactive         { background:var(--red-lt); color:#991b1b; border-color:var(--red-bd) }

/* ─── Champs formulaire ──────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px }
.field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted) }
.field input, .field select, .field textarea {
  height: 40px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--border); background: #f8fafc;
  font-size: 13px; color: var(--text); outline: none; font-family: inherit;
  transition: border-color .15s;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.field textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); background: #fff }
.field input[readonly] { background: #f1f5f9; color: var(--muted); cursor: default }
.field-hint { font-size: 11px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0 }

/* Grilles de formulaire */
.form-grid   { display: grid; gap: 12px; min-width: 0 }
.form-2col   { grid-template-columns: minmax(0,1fr) minmax(0,1fr) }
.form-3col   { grid-template-columns: repeat(3, minmax(0,1fr)) }
.form-4col   { grid-template-columns: repeat(4, minmax(0,1fr)) }
.form-3col   { grid-template-columns: 1fr 1fr 1fr }
.form-4col   { grid-template-columns: 1fr 1fr 1fr 1fr }

/* ─── Workflow stepper ────────────────────────────────────────────── */
.stepper {
  display: flex; align-items: flex-start; gap: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 18px 20px;
  overflow-x: auto; margin-bottom: 20px;
}
.step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 1; min-width: 90px; text-align: center; font-size: 12px;
  font-weight: 600; color: var(--muted); position: relative;
}
.step + .step::before {
  content: ''; position: absolute; top: 14px; right: 50%; left: -50%;
  height: 2px; background: var(--border); z-index: 0;
}
.step-dot {
  width: 28px; height: 28px; border-radius: 999px;
  border: 2px solid #e2e8f0; background: #f1f5f9;
  flex-shrink: 0; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
/* done */
.step-done .step-dot {
  background: var(--teal); border-color: var(--teal);
}
.step-done .step-dot::after {
  content: ''; display: block; width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.step-done + .step-done::before,
.step-done + .step-current::before { background: var(--teal) }
.step-done { color: var(--teal) }
/* current */
.step-current .step-dot {
  background: var(--navy); border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(11,30,51,.12);
}
.step-current { color: var(--navy); font-weight: 700 }
/* refused */
.step-refused .step-dot { background: var(--red); border-color: var(--red) }
.step-refused { color: var(--red) }

/* ─── Flash messages ─────────────────────────────────────────────── */
.flash-wrap { padding: 0 0 14px }
.flash { padding: 12px 16px; border-radius: var(--r); font-size: 13px; font-weight: 600; border: 1px solid transparent }
.flash-success { background: var(--teal-lt); color: var(--teal-2); border-color: var(--teal-mid) }
.flash-error   { background: var(--red-lt);  color: #991b1b;       border-color: var(--red-bd) }

/* ─── Pill simple ─────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #f1f5f9; color: var(--muted); border: 1px solid var(--border) }
.pill-teal  { background: var(--teal-lt); color: var(--teal); border-color: var(--teal-mid) }
.pill-amber { background: var(--amber-lt); color: var(--amber); border-color: var(--amber-bd) }

/* ─── Sections / cards génériques ────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 2px 8px rgba(11,30,51,.04);
}
.card-body { padding: 20px }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.card-title { font-size: 15px; font-weight: 700; color: var(--text) }
.card-sub   { font-size: 13px; color: var(--muted); margin-top: 2px }

/* ─── Grille financière ───────────────────────────────────────────── */
.fin-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.fin-cell { background: var(--surface); padding: 14px 18px }
.fin-cell-accent { background: var(--teal-lt) }
.fin-cell-total  { background: #f8fafc }
.fin-cell span  { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px }
.fin-cell strong { display: block; font-size: 22px; font-weight: 700; color: var(--text) }
.fin-cell-accent strong, .fin-cell-total strong { color: var(--teal) }
.fin-cell small  { font-size: 11px; color: var(--muted); margin-top: 2px; display: block }

/* ─── Empty states ───────────────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 24px; gap: 10px }
.empty-icon { font-size: 32px; opacity: .4 }
.empty strong { font-size: 15px; font-weight: 700 }
.empty p { font-size: 13px; color: var(--muted); max-width: 300px }

/* ─── Alertes ─────────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-radius: var(--r-lg); border: 1px solid transparent; text-decoration: none;
  transition: opacity .15s;
}
.alert:hover { opacity: .88 }
.alert-warning { background: var(--amber-lt); border-color: var(--amber-bd); color: #92400e }
.alert-info    { background: var(--blue-lt);  border-color: var(--blue-bd);  color: #1e40af }
.alert-success { background: var(--teal-lt);  border-color: var(--teal-mid); color: var(--teal-2) }
.alert-danger  { background: var(--red-lt);   border-color: var(--red-bd);   color: #991b1b }
.alert-icon { font-size: 20px; flex-shrink: 0 }
.alert-body { flex: 1; min-width: 0 }
.alert-body strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px }
.alert-body span   { font-size: 13px; opacity: .8 }
.alert-cta  { font-size: 13px; font-weight: 700; opacity: .7; flex-shrink: 0 }

/* ─── Filtres ─────────────────────────────────────────────────────── */
.filters {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 18px; margin-bottom: 16px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
}
.filter-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 130px }
.filter-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted) }
.filter-field input, .filter-field select { height: 36px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: #f8fafc; font-size: 13px; color: var(--text); outline: none }
.filter-field input:focus, .filter-field select:focus { border-color: var(--teal); background: #fff }
.filter-actions { display: flex; gap: 8px; align-items: flex-end }

/* ─── KPI pills ───────────────────────────────────────────────────── */
.kpi-row  { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px }
.kpi-pill { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); font-size: 13px; color: var(--muted); font-weight: 500 }
.kpi-pill strong { font-size: 18px; font-weight: 700; color: var(--text) }
.kpi-pill.alert  { border-color: var(--amber-bd); background: var(--amber-lt); color: #92400e }
.kpi-pill.alert strong { color: #92400e }
.kpi-pill.success{ border-color: var(--teal-mid); background: var(--teal-lt); color: var(--teal) }
.kpi-pill.success strong { color: var(--teal) }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) { .fin-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 640px) {
  .fin-grid { grid-template-columns: 1fr }
  .form-2col, .form-3col, .form-4col { grid-template-columns: 1fr }
  .stepper { gap: 4px }
}

/* ─── Pagination ──────────────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 16px 0 4px; justify-content: space-between;
}
.pager-info { font-size: 12px; color: var(--muted); font-weight: 500 }
.pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px;
  border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface); font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none; transition: all .15s;
}
.pager-btn:hover { background: #f1f5f9; border-color: #cbd5e1 }
.pager-btn-active {
  background: var(--navy); color: #fff; border-color: var(--navy);
}