/*
 * fiavia.css — Global Professional UI
 * Panel FiaVia — Inovertix
 * ─────────────────────────────────────────────────────────────────────────────
 * Convention : préfixe .fv- pour tous les composants custom FiaVia
 * Compatible avec Sneat Bootstrap 5 + RemixIcons
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette primaire */
  --fv-primary:        #696cff;
  --fv-primary-soft:   #e7e7ff;
  --fv-primary-dark:   #5557e8;

  /* Statut */
  --fv-success:        #71dd37;
  --fv-success-soft:   #e4f8d7;
  --fv-warning:        #ffab00;
  --fv-warning-soft:   #fff4d6;
  --fv-danger:         #ff3e1d;
  --fv-danger-soft:    #ffe0da;
  --fv-info:           #03c3ec;
  --fv-info-soft:      #d0f4fb;

  /* Neutres */
  --fv-surface:        #ffffff;
  --fv-surface-alt:    #f5f5f9;
  --fv-border:         #e7e7e9;
  --fv-text:           #566a7f;
  --fv-text-strong:    #32475c;
  --fv-text-muted:     #a1acb8;

  /* Spacing */
  --fv-radius:         12px;
  --fv-radius-sm:      8px;
  --fv-radius-lg:      16px;

  /* Shadow */
  --fv-shadow-xs:  0 1px 4px rgba(50, 71, 92, .06);
  --fv-shadow-sm:  0 2px 8px rgba(50, 71, 92, .10);
  --fv-shadow-md:  0 4px 20px rgba(50, 71, 92, .12);
  --fv-shadow-lg:  0 8px 32px rgba(50, 71, 92, .14);

  /* Transition */
  --fv-transition: .2s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fv-text-muted);
}

.fv-value {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--fv-text-strong);
  line-height: 1.2;
}

.fv-value-sm {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fv-text-strong);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PAGE HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.fv-page-header h3,
.fv-page-header h4 {
  margin: 0;
  font-weight: 700;
  color: var(--fv-text-strong);
}

.fv-page-header .fv-count-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  border-radius: 100px;
  background: var(--fv-primary-soft);
  color: var(--fv-primary-dark);
  font-size: .8125rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. STAT CARDS (KPI)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grille KPI */
.fv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Carte de base */
.fv-kpi-card {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius);
  padding: 1.375rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: var(--fv-shadow-xs);
  transition: box-shadow var(--fv-transition), transform var(--fv-transition);
  position: relative;
  overflow: hidden;
}

.fv-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fv-primary);
  opacity: 0;
  transition: opacity var(--fv-transition);
}

.fv-kpi-card:hover {
  box-shadow: var(--fv-shadow-md);
  transform: translateY(-2px);
}

.fv-kpi-card:hover::before {
  opacity: 1;
}

/* Icône */
.fv-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--fv-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  flex-shrink: 0;
}

.fv-kpi-icon.primary   { background: var(--fv-primary-soft); color: var(--fv-primary); }
.fv-kpi-icon.success   { background: var(--fv-success-soft); color: #3a9a10; }
.fv-kpi-icon.warning   { background: var(--fv-warning-soft); color: #c47e00; }
.fv-kpi-icon.danger    { background: var(--fv-danger-soft);  color: #c92b09; }
.fv-kpi-icon.info      { background: var(--fv-info-soft);    color: #0291b3; }

/* Contenu */
.fv-kpi-body {
  min-width: 0;
  flex: 1;
}

.fv-kpi-body .fv-label { margin-bottom: .25rem; }
.fv-kpi-body .fv-value { margin-bottom: 0; }

/* Variation (optionnel) */
.fv-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .75rem;
  font-weight: 600;
  margin-top: .25rem;
}
.fv-kpi-delta.up   { color: #3a9a10; }
.fv-kpi-delta.down { color: #c92b09; }

/* ── Variante "accent" (fond coloré entier) ── */
.fv-kpi-card.accent-primary { background: linear-gradient(135deg, var(--fv-primary) 0%, #8587ff 100%); border: none; }
.fv-kpi-card.accent-success { background: linear-gradient(135deg, #3ab90d 0%, #71dd37 100%); border: none; }
.fv-kpi-card.accent-warning { background: linear-gradient(135deg, #e09b00 0%, #ffab00 100%); border: none; }
.fv-kpi-card.accent-danger  { background: linear-gradient(135deg, #c92b09 0%, #ff3e1d 100%); border: none; }
.fv-kpi-card.accent-info    { background: linear-gradient(135deg, #0291b3 0%, #03c3ec 100%); border: none; }

.fv-kpi-card[class*="accent-"] .fv-label,
.fv-kpi-card[class*="accent-"] .fv-value,
.fv-kpi-card[class*="accent-"] .fv-kpi-delta { color: rgba(255,255,255,.9); }
.fv-kpi-card[class*="accent-"] .fv-kpi-icon  { background: rgba(255,255,255,.2); color: #fff; }
.fv-kpi-card[class*="accent-"]::before        { display: none; }

/* ── Carte horizontale "inline" (pour dashboards) ── */
.fv-kpi-card.inline {
  padding: 1rem 1.25rem;
}
.fv-kpi-card.inline .fv-kpi-icon {
  width: 40px;
  height: 40px;
  font-size: 1.125rem;
}
.fv-kpi-card.inline .fv-value { font-size: 1.25rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. CARDS GÉNÉRIQUES
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-card {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius);
  box-shadow: var(--fv-shadow-xs);
  overflow: hidden;
}

.fv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--fv-border);
}

.fv-card-header h5,
.fv-card-header h6 {
  margin: 0;
  font-weight: 600;
  color: var(--fv-text-strong);
}

.fv-card-body {
  padding: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. TABLEAUX
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper */
.fv-table-wrapper {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius);
  box-shadow: var(--fv-shadow-xs);
  overflow: hidden;
}

/* Barre d'outils du tableau */
.fv-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1rem 1.375rem;
  border-bottom: 1px solid var(--fv-border);
}

.fv-table-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--fv-text-strong);
  margin: 0;
}

/* Table elle-même */
.fv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.fv-table thead tr {
  background: var(--fv-surface-alt);
}

.fv-table thead th {
  padding: .875rem 1.25rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fv-text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--fv-border);
  text-align: left !important;
}

.fv-table tbody tr {
  border-bottom: 1px solid var(--fv-border);
  transition: background var(--fv-transition);
}

.fv-table tbody tr:last-child {
  border-bottom: none;
}

.fv-table tbody tr:hover {
  background: #f9f9fb;
}

.fv-table tbody td {
  padding: .875rem 1.25rem;
  color: var(--fv-text);
  vertical-align: middle;
  white-space: nowrap;
}

/* Cellule primaire (nom/titre d'une ligne) */
.fv-table .fv-cell-primary {
  font-weight: 600;
  color: var(--fv-text-strong);
}

.fv-table .fv-cell-sub {
  font-size: .75rem;
  color: var(--fv-text-muted);
  margin-top: .15rem;
}

/* Colonne montant */
.fv-table .fv-cell-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fv-text-strong);
}

/* Colonne centre */
.fv-table .text-center td,
.fv-table td.center { text-align: center !important; }

/* ── Intégration DataTables ── */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-sm);
  padding: .4rem .75rem;
  font-size: .875rem;
  color: var(--fv-text-strong);
  outline: none;
  transition: border-color var(--fv-transition);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--fv-primary);
  box-shadow: 0 0 0 3px rgba(105,108,255,.15);
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-sm);
  padding: .35rem .6rem;
  font-size: .875rem;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: .75rem 1.25rem;
  font-size: .8125rem;
  color: var(--fv-text-muted);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--fv-primary) !important;
  border-color: var(--fv-primary) !important;
  color: #fff !important;
  border-radius: var(--fv-radius-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background: var(--fv-primary-soft) !important;
  border-color: var(--fv-primary-soft) !important;
  color: var(--fv-primary) !important;
  border-radius: var(--fv-radius-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. BADGES STATUS
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.fv-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.fv-badge.active,
.fv-badge.success  { background: var(--fv-success-soft); color: #3a9a10; }
.fv-badge.warning,
.fv-badge.pending  { background: var(--fv-warning-soft); color: #c47e00; }
.fv-badge.danger,
.fv-badge.expired  { background: var(--fv-danger-soft);  color: #c92b09; }
.fv-badge.info     { background: var(--fv-info-soft);    color: #0291b3; }
.fv-badge.neutral  { background: #f0f0f2;                color: #6c757d; }
.fv-badge.primary  { background: var(--fv-primary-soft); color: var(--fv-primary-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   8. FORMULAIRES
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-form-group {
  margin-bottom: 1.25rem;
}

.fv-form-group label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--fv-text-strong);
  margin-bottom: .45rem;
}

.fv-form-control {
  width: 100%;
  padding: .6rem 1rem;
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-sm);
  font-size: .875rem;
  color: var(--fv-text-strong);
  background: var(--fv-surface);
  transition: border-color var(--fv-transition), box-shadow var(--fv-transition);
  outline: none;
}

.fv-form-control:focus {
  border-color: var(--fv-primary);
  box-shadow: 0 0 0 3px rgba(105,108,255,.15);
}

.fv-form-control.error {
  border-color: var(--fv-danger);
  box-shadow: 0 0 0 3px rgba(255,62,29,.12);
}

.fv-form-hint {
  font-size: .75rem;
  color: var(--fv-text-muted);
  margin-top: .35rem;
}

.fv-form-error {
  font-size: .75rem;
  color: var(--fv-danger);
  margin-top: .35rem;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. BOUTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.25rem;
  border-radius: var(--fv-radius-sm);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background var(--fv-transition), box-shadow var(--fv-transition), transform var(--fv-transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
}

.fv-btn:active { transform: scale(.98); }

.fv-btn-primary {
  background: var(--fv-primary);
  color: #fff;
}
.fv-btn-primary:hover {
  background: var(--fv-primary-dark);
  box-shadow: 0 4px 12px rgba(105,108,255,.35);
  color: #fff;
}

.fv-btn-outline {
  background: transparent;
  border: 1px solid var(--fv-border);
  color: var(--fv-text);
}
.fv-btn-outline:hover {
  border-color: var(--fv-primary);
  color: var(--fv-primary);
  background: var(--fv-primary-soft);
}

.fv-btn-ghost {
  background: transparent;
  color: var(--fv-text);
}
.fv-btn-ghost:hover {
  background: var(--fv-surface-alt);
  color: var(--fv-text-strong);
}

.fv-btn-danger {
  background: var(--fv-danger);
  color: #fff;
}
.fv-btn-danger:hover {
  background: #c92b09;
  box-shadow: 0 4px 12px rgba(255,62,29,.30);
  color: #fff;
}

/* Tailles */
.fv-btn-sm {
  padding: .35rem .875rem;
  font-size: .8125rem;
}
.fv-btn-lg {
  padding: .75rem 1.75rem;
  font-size: 1rem;
}

.fv-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: var(--fv-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. ALERTES / FLASH MESSAGES
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-alert {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: 1rem 1.25rem;
  border-radius: var(--fv-radius-sm);
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: 1rem;
  border-left: 4px solid transparent;
}

.fv-alert i { font-size: 1.125rem; flex-shrink: 0; margin-top: .05rem; }

.fv-alert.success {
  background: var(--fv-success-soft);
  border-color: var(--fv-success);
  color: #27700a;
}
.fv-alert.warning {
  background: var(--fv-warning-soft);
  border-color: var(--fv-warning);
  color: #7d5300;
}
.fv-alert.danger  {
  background: var(--fv-danger-soft);
  border-color: var(--fv-danger);
  color: #8c1a08;
}
.fv-alert.info    {
  background: var(--fv-info-soft);
  border-color: var(--fv-info);
  color: #035f76;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--fv-text-muted);
}

.fv-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fv-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--fv-text-muted);
  margin-bottom: 1.25rem;
}

.fv-empty h6 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fv-text-strong);
  margin-bottom: .35rem;
}

.fv-empty p {
  font-size: .875rem;
  max-width: 340px;
  margin: 0 auto .875rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. AVATAR / INITIALES
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fv-primary-soft);
  color: var(--fv-primary-dark);
  font-size: .8125rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.fv-avatar.sm { width: 28px; height: 28px; font-size: .6875rem; }
.fv-avatar.lg { width: 48px; height: 48px; font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   13. DIVIDER
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-divider {
  border: none;
  border-top: 1px solid var(--fv-border);
  margin: 1.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. PROGRESS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.fv-progress {
  height: 6px;
  background: var(--fv-border);
  border-radius: 100px;
  overflow: hidden;
}

.fv-progress-bar {
  height: 100%;
  border-radius: 100px;
  background: var(--fv-primary);
  transition: width .6s ease;
}

.fv-progress-bar.success { background: var(--fv-success); }
.fv-progress-bar.warning { background: var(--fv-warning); }
.fv-progress-bar.danger  { background: var(--fv-danger);  }

/* ═══════════════════════════════════════════════════════════════════════════
   15. OVERRIDES GLOBAUX (compatibilité Sneat)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cards Sneat */
.card {
  border-radius: var(--fv-radius) !important;
  box-shadow: var(--fv-shadow-xs) !important;
  border: 1px solid var(--fv-border) !important;
}

/* Table Sneat / DataTables */
.table thead th {
  font-size: .6875rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--fv-text-muted) !important;
  background: var(--fv-surface-alt) !important;
  white-space: nowrap !important;
}

.table-light {
  background: var(--fv-surface-alt) !important;
}

.table tbody tr:hover > * {
  background: #f9f9fb !important;
  transition: background var(--fv-transition);
}

/* Badges Sneat bg-label-* */
.bg-label-primary { background-color: var(--fv-primary-soft) !important; color: var(--fv-primary-dark) !important; }
.bg-label-success { background-color: var(--fv-success-soft) !important; color: #3a9a10 !important; }
.bg-label-warning { background-color: var(--fv-warning-soft) !important; color: #c47e00 !important; }
.bg-label-danger  { background-color: var(--fv-danger-soft)  !important; color: #c92b09 !important; }
.bg-label-info    { background-color: var(--fv-info-soft)    !important; color: #0291b3 !important; }
.bg-label-secondary { background-color: #f0f0f2 !important; color: #6c757d !important; }

/* Buttons */
.btn { text-transform: none !important; }

/* Supprime le padding excessif des cards globales */
.card.p-0 { padding: 0 !important; }
.card.p-4 { padding: 1.5rem !important; }

/* Scrollbar fine & discrète */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fv-border); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: #c5c5d0; }

/* ═══════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
  .fv-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: .875rem;
  }

  .fv-kpi-card {
    padding: 1rem;
    gap: .75rem;
  }

  .fv-kpi-icon {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
  }

  .fv-value { font-size: 1.375rem; }

  .fv-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .fv-table-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 380px) {
  .fv-kpi-grid {
    grid-template-columns: 1fr;
  }
}