/* =====================================================================
   ONIVAA Admin — Refonte design system (light + dark)
   Chargé APRÈS le thème d'origine : surcouche moderne, non destructive.
   Palette inspirée du tableau de bord ALLO STOP (vert émeraude, cartes
   blanches arrondies, ombres douces, mode sombre complet).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Marque — UNE seule source (--oa-brand), écrasée par la couleur définie
     dans l'admin (settings/global.adminColor / cookie admin_panel_color).
     Les nuances sont dérivées automatiquement via color-mix (repli statique). */
  --oa-brand:        #0f7a4d;

  --oa-brand-600:    #0c6b42;
  --oa-brand-600:    color-mix(in srgb, var(--oa-brand), #000 16%);
  --oa-brand-700:    #0a5836;
  --oa-brand-700:    color-mix(in srgb, var(--oa-brand), #000 30%);
  --oa-brand-50:     #e7f4ee;
  --oa-brand-50:     color-mix(in srgb, var(--oa-brand) 10%, #fff);
  --oa-brand-100:    #d2ebe0;
  --oa-brand-100:    color-mix(in srgb, var(--oa-brand) 18%, #fff);

  /* Surfaces & texte (LIGHT) */
  --oa-bg:           #f5f7f9;
  --oa-surface:      #ffffff;
  --oa-surface-2:    #f8fafc;
  --oa-sidebar:      #ffffff;
  --oa-topbar:       #ffffff;
  --oa-ink:          #0f1b2d;
  --oa-ink-soft:     #334155;
  --oa-muted:        #6b7683;
  --oa-border:       #e7e9ee;
  --oa-border-soft:  #eef1f4;

  /* États */
  --oa-info:         #2563eb;
  --oa-info-50:      #e8f0ff;
  --oa-success:      #10905b;
  --oa-success-50:   #e6f5ee;
  --oa-warn:         #b7791f;
  --oa-warn-50:      #fdf3e2;
  --oa-danger:       #dc2626;
  --oa-danger-50:    #fdecec;

  /* Divers */
  --oa-radius:       14px;
  --oa-radius-sm:    10px;
  --oa-shadow:       0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --oa-shadow-sm:    0 1px 2px rgba(16,24,40,.06);
  --oa-sidebar-w:    250px;
  --oa-font: 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[data-theme="dark"] {
  --oa-bg:           #0b0f14;
  --oa-surface:      #151b23;
  --oa-surface-2:    #1a212b;
  --oa-sidebar:      #0f151c;
  --oa-topbar:       #10161d;
  --oa-ink:          #e8ecf1;
  --oa-ink-soft:     #c3ccd6;
  --oa-muted:        #8a97a6;
  --oa-border:       #232c37;
  --oa-border-soft:  #1c242e;
  /* La marque reste la couleur admin ; seules les nuances claires sont
     recalculées sur fond sombre pour garder le contraste. */
  --oa-brand-50:     #14271f;
  --oa-brand-50:     color-mix(in srgb, var(--oa-brand) 22%, #0b0f14);
  --oa-brand-100:    #163024;
  --oa-brand-100:    color-mix(in srgb, var(--oa-brand) 32%, #0b0f14);
  --oa-info-50:      #16233d;
  --oa-success-50:   #12271d;
  --oa-warn-50:      #2a2213;
  --oa-danger-50:    #2c1717;
  --oa-shadow:       0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  --oa-shadow-sm:    0 1px 2px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
body {
  background: var(--oa-bg) !important;
  color: var(--oa-ink) !important;
  font-family: var(--oa-font) !important;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--oa-brand); }
a:hover, a:focus { color: var(--oa-brand-600); }
h1,h2,h3,h4,h5,h6 { color: var(--oa-ink); }

/* ---------- Topbar ---------- */
.topbar,
.topbar .top-navbar,
.topbar .navbar-header {
  background: var(--oa-topbar) !important;
  box-shadow: none !important;
}
.topbar {
  border-bottom: 1px solid var(--oa-border);
}
.topbar .navbar-header { border-right: 1px solid var(--oa-border); }
.topbar .nav-link { color: var(--oa-muted) !important; }
.topbar .nav-link:hover { color: var(--oa-ink) !important; }
.topbar .profile-pic {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--oa-border);
}
.navbar-brand b img { max-height: 40px; width: auto !important; object-fit: contain; }

/* Logo ONIVAA (image admin) + wordmark de repli */
.oa-navbrand { display: inline-flex; align-items: center; height: 100%; }
.oa-logo-img { max-height: 38px; width: auto !important; object-fit: contain; }
.oa-wordmark {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--oa-font); font-weight: 800; font-size: 22px; letter-spacing: .04em;
  color: var(--oa-brand); line-height: 1;
}
.oa-wordmark::before {
  content: ""; width: 10px; height: 22px; margin-right: 8px; border-radius: 3px;
  background: var(--oa-brand);
  -webkit-mask: none; mask: none;
  box-shadow: 14px 0 0 -3px var(--oa-brand-100);
}

/* Sélecteur de langue (globe + select) — visible en light ET dark */
.topbar .language-list { color: var(--oa-ink-soft) !important; visibility: visible !important; }
.topbar .language-list .language-select,
.topbar .language-select i,
.topbar .language-select i.fa-globe { color: var(--oa-muted) !important; }
.topbar .language-options select.changeLang,
.topbar .language-options select {
  background: var(--oa-surface-2) !important;
  color: var(--oa-ink) !important;
  border: 1px solid var(--oa-border) !important;
  border-radius: 10px !important;
  min-height: 38px; padding: 4px 10px; font-weight: 600;
}
.topbar .language-options select:focus,
.topbar .language-options select:hover {
  color: var(--oa-ink) !important; background: var(--oa-surface-2) !important;
  border-color: var(--oa-brand) !important; box-shadow: 0 0 0 3px var(--oa-brand-50) !important;
}
.topbar .language-options select option { background: var(--oa-surface) !important; color: var(--oa-ink) !important; }

/* Bouton bascule de thème */
.oa-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 6px;
  border-radius: 10px; border: 1px solid var(--oa-border);
  background: var(--oa-surface-2); color: var(--oa-ink-soft);
  cursor: pointer; transition: all .15s ease;
}
.oa-theme-toggle:hover { background: var(--oa-brand-50); color: var(--oa-brand); border-color: var(--oa-brand-100); }
.oa-theme-toggle .oa-ico-sun { display: none; }
html[data-theme="dark"] .oa-theme-toggle .oa-ico-sun  { display: inline; }
html[data-theme="dark"] .oa-theme-toggle .oa-ico-moon { display: none; }

/* ---------- Sidebar ---------- */
.left-sidebar,
.left-sidebar .scroll-sidebar,
.sidebar-nav {
  background: var(--oa-sidebar) !important;
}
.left-sidebar {
  border-right: 1px solid var(--oa-border);
}
.sidebar-nav { padding: 10px 12px 30px; }

/* Libellés de section (PRINCIPAL / OPÉRATIONS…) — titre gras, aéré, sans bordure */
.sidebar-nav .nav-subtitle {
  margin: 24px 0 8px; padding: 0 12px; border: none !important; background: none !important;
}
.sidebar-nav .nav-subtitle:first-child { margin-top: 8px; }
.sidebar-nav .nav-subtitle-span,
.sidebar-nav .nav-subtitle .nav-subtitle-span {
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em;
  text-transform: uppercase; color: var(--oa-muted) !important;
}
/* Un peu plus d'air entre les items (rythme ALLO STOP) */
.sidebar-nav #sidebarnav > li { margin: 3px 0; }

/* Liens de navigation */
.sidebar-nav #sidebarnav > li { margin: 2px 0; }
.sidebar-nav ul li a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px !important;
  border-radius: 10px;
  color: var(--oa-ink-soft) !important;
  font-weight: 500; font-size: 14px;
  border: none !important;
  transition: background .15s ease, color .15s ease;
}
.sidebar-nav ul li a i {
  font-size: 19px; color: var(--oa-muted) !important;
  min-width: 20px; text-align: center; transition: color .15s ease;
}
.sidebar-nav ul li a:hover {
  background: var(--oa-surface-2) !important;
  color: var(--oa-ink) !important;
}
.sidebar-nav ul li a:hover i { color: var(--oa-brand) !important; }

/* Élément actif */
.sidebar-nav > ul > li.active > a,
.sidebar-nav ul li a.active {
  background: var(--oa-brand-50) !important;
  color: var(--oa-brand-600) !important;
  border: none !important;
  font-weight: 600;
}
.sidebar-nav > ul > li.active > a i,
.sidebar-nav ul li a.active i { color: var(--oa-brand) !important; }

/* Sous-menus */
.sidebar-nav ul li ul.collapse { padding-left: 8px; margin: 2px 0; }
.sidebar-nav ul li ul li a {
  padding: 8px 14px 8px 44px !important; font-size: 13px; position: relative;
}
/* Puce d'origine (cercle à left:40px) repositionnée à gauche pour ne plus
   chevaucher le texte ; le 2e point (::after) est retiré. */
.sidebar-nav ul li ul li a::before {
  left: 22px !important; top: 50% !important; transform: translateY(-50%);
  width: 6px !important; height: 6px !important; margin: 0 !important;
  border-color: var(--oa-muted) !important; background: var(--oa-muted);
}
.sidebar-nav ul li ul li a::after { display: none !important; }
.sidebar-nav ul li ul li a:hover,
.sidebar-nav ul li ul li.active > a.active { color: var(--oa-brand) !important; background: var(--oa-surface-2) !important; }
.sidebar-nav ul li ul li a:hover::before,
.sidebar-nav ul li ul li.active > a.active::before { border-color: var(--oa-brand) !important; background: var(--oa-brand); }

/* Flèche des menus déroulants */
.sidebar-nav .has-arrow::after { border-color: var(--oa-muted); }

.web_version { color: var(--oa-muted); font-size: 11px; padding: 12px 16px; }

/* ---------- Contenu ---------- */
.page-wrapper { background: transparent !important; }
main.py-4 { background: var(--oa-bg); }

/* ---------- Cartes ---------- */
.card {
  background: var(--oa-surface) !important;
  border: 1px solid var(--oa-border) !important;
  border-radius: var(--oa-radius) !important;
  box-shadow: var(--oa-shadow) !important;
  color: var(--oa-ink);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--oa-border-soft) !important;
  padding: 18px 20px !important;
  color: var(--oa-ink);
}
.card-header h4, .card-header h5 { color: var(--oa-ink); margin: 0; font-weight: 700; }
.card-body { padding: 20px !important; color: var(--oa-ink-soft); }
.card .text-muted, .text-muted { color: var(--oa-muted) !important; }

/* ---------- KPI tiles (dashboard .card-box) ---------- */
.business-analytics .card-box,
.card-box {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--oa-surface) !important;
  border: 1px solid var(--oa-border) !important;
  border-radius: var(--oa-radius) !important;
  box-shadow: var(--oa-shadow-sm) !important;
  padding: 18px !important;
  min-height: 146px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: oaRise .5s ease both;
}
.business-analytics .card-box:hover,
.card-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--oa-shadow) !important;
  border-color: var(--oa-brand-100) !important;
}
/* Libellé : 2 lignes max, ne passe plus sous l'icône, plus de troncature */
.card-box h5 {
  font-size: 11.5px !important; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--oa-muted) !important;
  margin: 0 0 8px; padding-right: 48px; line-height: 1.35;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  min-height: 2.1em;
}
.card-box h2 {
  font-size: 25px; font-weight: 800; color: var(--oa-ink) !important; margin: 0 0 4px;
  line-height: 1.1;
}
/* Description (bas de carte) */
.oa-kpi-desc {
  margin: auto 0 0 !important; padding-top: 6px;
  font-size: 11px; color: var(--oa-muted); line-height: 1.35;
}
.oa-kpi-desc b { color: var(--oa-brand); font-weight: 700; }
/* Diagramme en bande (ratio réel) */
.oa-kpi-bar {
  height: 6px; border-radius: 6px; background: var(--oa-border-soft);
  overflow: hidden; margin: 6px 0 2px;
}
.oa-kpi-bar > span {
  display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--oa-brand), color-mix(in srgb, var(--oa-brand), #fff 30%));
  transition: width 1.1s cubic-bezier(.2,.7,.2,1);
}
/* Entrée + léger décalage en cascade */
@keyframes oaRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.business-analytics_list > [class*="col-"]:nth-child(1) .card-box { animation-delay: .02s; }
.business-analytics_list > [class*="col-"]:nth-child(2) .card-box { animation-delay: .06s; }
.business-analytics_list > [class*="col-"]:nth-child(3) .card-box { animation-delay: .10s; }
.business-analytics_list > [class*="col-"]:nth-child(4) .card-box { animation-delay: .14s; }
.business-analytics_list > [class*="col-"]:nth-child(n+5) .card-box { animation-delay: .18s; }
/* Pastille d'icône — !important + spécificité pour battre la règle du template
   `.business-analytics .card-box i { background: <couleur admin> }`. */
.business-analytics .card-box i,
.card-box i {
  position: absolute; top: 18px; right: 18px;
  font-size: 20px; color: var(--oa-brand) !important;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--oa-brand-50) !important; border-radius: 10px !important;
}

/* En-tête d'accueil du tableau de bord (façon ALLO STOP) */
.oa-hero .oa-hero-body {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.oa-hero-title { font-size: 22px; font-weight: 800; margin: 0 0 4px; color: var(--oa-ink); }
.oa-hero-date { color: var(--oa-muted); font-size: 14px; text-transform: capitalize; }
.oa-hero-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--oa-brand);
  background: var(--oa-brand-50); padding: 8px 14px; border-radius: 999px;
}
.oa-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--oa-brand);
  box-shadow: 0 0 0 4px var(--oa-brand-50); animation: oaPulse 1.6s infinite;
}
@keyframes oaPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------- Boutons ---------- */
.btn { border-radius: var(--oa-radius-sm) !important; font-weight: 600; padding: 8px 16px; transition: all .15s ease; }
.btn-primary, .btn-warning, .btn-info, .btn-success {
  background: var(--oa-brand) !important; border: 1px solid var(--oa-brand) !important; color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-warning:hover, .btn-info:hover, .btn-success:hover,
.btn-primary:focus, .btn-primary:active {
  background: var(--oa-brand-600) !important; border-color: var(--oa-brand-600) !important; color: #fff !important;
  box-shadow: 0 0 0 3px var(--oa-brand-50) !important;
}
.btn-outline-secondary {
  background: transparent !important; color: var(--oa-ink-soft) !important; border: 1px solid var(--oa-border) !important;
}
.btn-outline-secondary:hover { background: var(--oa-surface-2) !important; color: var(--oa-ink) !important; border-color: var(--oa-brand-100) !important; }
.btn-outline-danger { color: var(--oa-danger) !important; border: 1px solid var(--oa-danger) !important; background: transparent !important; }
.btn-outline-danger:hover { background: var(--oa-danger) !important; color: #fff !important; }
.btn-danger { background: var(--oa-danger) !important; border-color: var(--oa-danger) !important; }

/* ---------- Formulaires ---------- */
.form-control, .custom-select, .select2-container--default .select2-selection--single {
  background: var(--oa-surface) !important;
  border: 1px solid var(--oa-border) !important;
  border-radius: var(--oa-radius-sm) !important;
  color: var(--oa-ink) !important;
  min-height: 42px;
}
.form-control::placeholder { color: var(--oa-muted) !important; }
.form-control:focus, .custom-select:focus {
  border-color: var(--oa-brand) !important;
  box-shadow: 0 0 0 3px var(--oa-brand-50) !important;
  background: var(--oa-surface) !important;
}
label, .control-label { color: var(--oa-ink-soft) !important; font-weight: 600; font-size: 13px; }
.form-text, small.text-muted { color: var(--oa-muted) !important; }

/* ---------- Tables ---------- */
.table { color: var(--oa-ink-soft) !important; }
.table thead th {
  background: var(--oa-surface-2) !important;
  color: var(--oa-muted) !important;
  text-transform: uppercase; font-size: 11px; letter-spacing: .04em; font-weight: 700;
  border-bottom: 1px solid var(--oa-border) !important; border-top: none !important;
  padding: 12px 16px !important;
}
.table td { border-top: 1px solid var(--oa-border-soft) !important; padding: 14px 16px !important; vertical-align: middle; color: var(--oa-ink-soft) !important; }
.table tbody tr:hover { background: var(--oa-surface-2) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { background: var(--oa-surface) !important; color: var(--oa-ink) !important; border: 1px solid var(--oa-border) !important; border-radius: 8px; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--oa-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important; border: 1px solid var(--oa-border) !important; color: var(--oa-ink-soft) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--oa-brand) !important; color: #fff !important; border-color: var(--oa-brand) !important;
}

/* Espace en haut du contenu (les KPIs ne collent plus au header) */
.page-wrapper > .container-fluid { padding-top: 22px; }
main.py-4 { padding-top: 8px; }

/* Fil d'Ariane déplacé dans la topbar → on masque le bloc in-body (doublon centré) */
.page-titles { display: none !important; }

/* En-tête de carte : onglet d'action (« Créer ») poussé en haut à DROITE + style bouton */
.card-header .nav-tabs.card-header-tabs .nav-item:last-child { margin-left: auto; }
.card-header .nav-tabs.card-header-tabs .nav-item:last-child .nav-link {
  background: var(--oa-brand) !important; border-color: var(--oa-brand) !important; color: #fff !important;
}
.card-header .nav-tabs.card-header-tabs .nav-item:first-child .nav-link {
  background: var(--oa-surface) !important; color: var(--oa-ink-soft) !important; border-color: var(--oa-border) !important;
}
.card-header .nav-tabs.card-header-tabs .nav-item:first-child .nav-link.active {
  background: var(--oa-brand-50) !important; color: var(--oa-brand-600) !important; border-color: var(--oa-brand-100) !important;
}

/* ---------- Fil d'Ariane dans la topbar (gauche) ---------- */
.oa-topbar-crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-left: -2px; }
.oa-topbar-crumb a { color: var(--oa-muted) !important; text-decoration: none; }
.oa-topbar-crumb a:hover { color: var(--oa-brand) !important; }
.oa-topbar-crumb .sep { color: var(--oa-muted); }
.oa-topbar-crumb .cur { color: var(--oa-ink); font-weight: 700; }
@media (max-width: 767px) { .oa-topbar-crumb { display: none; } }

/* ---------- Barre d'outils de table (recherche + filtres + action) ---------- */
.oa-table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.oa-tb-left, .oa-tb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oa-search { position: relative; }
.oa-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--oa-muted); font-size: 13px; }
.oa-search input {
  width: 300px; max-width: 100%; height: 42px; padding: 8px 12px 8px 34px;
  border: 1px solid var(--oa-border); border-radius: 10px;
  background: var(--oa-surface); color: var(--oa-ink); font-size: 14px;
}
.oa-search input::placeholder { color: var(--oa-muted); }
.oa-search input:focus { outline: none; border-color: var(--oa-brand); box-shadow: 0 0 0 3px var(--oa-brand-50); }
.oa-filter {
  height: 42px; padding: 8px 12px; border: 1px solid var(--oa-border); border-radius: 10px;
  background: var(--oa-surface); color: var(--oa-ink); font-weight: 600; font-size: 14px; cursor: pointer;
}
.oa-filter:focus { outline: none; border-color: var(--oa-brand); box-shadow: 0 0 0 3px var(--oa-brand-50); }
.oa-count { color: var(--oa-muted); font-size: 13px; font-weight: 600; }
.oa-count b { color: var(--oa-ink); }

/* Table arrondie + propre */
.card .table-responsive {
  border: 1px solid var(--oa-border); border-radius: 12px; overflow: hidden;
}
.card .table-responsive > table, .card .table-responsive .dataTables_wrapper table { margin-bottom: 0 !important; }
.table-bordered, .table-bordered td, .table-bordered th { border: none !important; }
.oa-tfoot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 14px; background: var(--oa-surface); }
.oa-tfoot .dataTables_info { padding: 0; }
.oa-tfoot .dataTables_paginate { margin: 0; }

/* ---------- Cartes de stats en haut des listes (façon ALLO STOP) ---------- */
.oa-stats-row { margin-bottom: 6px; }
.oa-stat {
  background: var(--oa-surface); border: 1px solid var(--oa-border);
  border-radius: var(--oa-radius); padding: 18px 20px; height: 100%;
  box-shadow: var(--oa-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: oaRise .5s ease both;
}
.oa-stat:hover { transform: translateY(-3px); box-shadow: var(--oa-shadow); border-color: var(--oa-brand-100); }
.oa-stat.is-highlight { border-color: var(--oa-brand); box-shadow: 0 0 0 3px var(--oa-brand-50); }
.oa-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.oa-stat-label { font-size: 13px; font-weight: 600; color: var(--oa-ink-soft); }
.oa-stat-ico {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--oa-brand-50); color: var(--oa-brand);
}
.oa-stat-ico.is-green { background: var(--oa-success-50); color: var(--oa-success); }
.oa-stat-ico.is-red   { background: var(--oa-danger-50);  color: var(--oa-danger); }
.oa-stat-ico.is-info  { background: var(--oa-info-50);    color: var(--oa-info); }
.oa-stat-ico.is-warn  { background: var(--oa-warn-50);    color: var(--oa-warn); }
.oa-stat-value { font-size: 30px; font-weight: 800; color: var(--oa-ink); line-height: 1; }

/* Cellule utilisateur : avatar + nom + sous-texte */
.oa-user-cell { display: flex; align-items: center; gap: 12px; }
.oa-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff; text-transform: uppercase;
  background: linear-gradient(135deg, var(--oa-brand), color-mix(in srgb, var(--oa-brand), #000 22%));
}
.oa-user-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.oa-user-name { font-weight: 600; color: var(--oa-ink) !important; }
.oa-user-sub { font-size: 12px; color: var(--oa-muted); overflow: hidden; text-overflow: ellipsis; }

/* Toggle « actif » moderne */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--oa-border); border-radius: 999px; transition: .2s; }
.switch .slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + .slider { background: var(--oa-brand); }
.switch input:checked + .slider:before { transform: translateX(18px); }

/* Badge de rôle / statut */
.oa-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.oa-badge.role  { background: var(--oa-brand-50);   color: var(--oa-brand); }
.oa-badge.ok    { background: var(--oa-success-50);  color: var(--oa-success); }
.oa-badge.off   { background: var(--oa-danger-50);   color: var(--oa-danger); }

/* ---------- Pages « liste » (en-tête, onglets, actions) ---------- */
.page-titles {
  padding: 2px 2px 16px; margin: 0 0 4px; border: none !important; background: transparent !important;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.page-titles .text-themecolor, .page-titles h3 {
  color: var(--oa-ink) !important; font-size: 22px; font-weight: 800; margin: 0;
}
.page-titles .breadcrumb { background: transparent !important; padding: 0; margin: 0; }
.page-titles .breadcrumb-item, .page-titles .breadcrumb-item a { color: var(--oa-muted) !important; font-size: 13px; }
.page-titles .breadcrumb-item.active { color: var(--oa-brand) !important; }

/* Onglets d'en-tête de carte (Liste / Créer) → pilules propres */
.card-header .nav-tabs.card-header-tabs {
  border: none !important; background: transparent !important; gap: 6px; margin: 0;
}
.card-header .nav-tabs.card-header-tabs .nav-link {
  border: 1px solid var(--oa-border) !important; border-radius: 10px !important;
  color: var(--oa-ink-soft) !important; background: var(--oa-surface) !important;
  padding: 8px 14px !important; font-weight: 600; font-size: 13px;
}
.card-header .nav-tabs.card-header-tabs .nav-link.active,
.card-header .nav-tabs.card-header-tabs .nav-link:hover {
  background: var(--oa-brand) !important; border-color: var(--oa-brand) !important; color: #fff !important;
}
.card-header .nav-tabs.card-header-tabs .nav-link.active .badge-success { background: rgba(255,255,255,.25) !important; color:#fff !important; }

/* Boutons d'action (icônes) */
.action-btn a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; margin: 0 2px;
  color: var(--oa-muted) !important; border: 1px solid var(--oa-border);
  transition: all .15s ease; text-decoration: none;
}
.action-btn a:hover { background: var(--oa-brand-50); color: var(--oa-brand) !important; border-color: var(--oa-brand-100); }
.action-btn a.delete-btn:hover { background: var(--oa-danger-50); color: var(--oa-danger) !important; border-color: var(--oa-danger); }

/* Puce « rôle » */
.oa-role-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--oa-ink) !important; text-decoration: none; }
.oa-role-chip i { color: var(--oa-brand); }
.oa-role-chip:hover { color: var(--oa-brand) !important; }

/* ---------- Réglages globaux : page en cartes de sections ---------- */
.oa-settings-host, .oa-settings-host > .card-body,
.oa-settings-host .restaurant_payout_create,
.oa-settings-host .restaurant_payout_create-inner {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important;
}
.oa-settings-header { margin: 0 0 16px; }
.oa-settings-header h2 { font-size: 24px; font-weight: 800; color: var(--oa-ink); margin: 0 0 4px; }
.oa-settings-header p { color: var(--oa-muted); margin: 0; font-size: 14px; }
.oa-settings-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.oa-settings-chips a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--oa-border); background: var(--oa-surface); color: var(--oa-ink-soft) !important;
  font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s;
}
.oa-settings-chips a:hover { background: var(--oa-brand-50); color: var(--oa-brand) !important; border-color: var(--oa-brand-100); }
.oa-settings-chips a i { color: var(--oa-brand); }

.oa-scard { margin-bottom: 20px; scroll-margin-top: 90px; }
.oa-scard-head {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 700; color: var(--oa-ink) !important;
  border-bottom: 1px solid var(--oa-border-soft) !important;
}
.oa-scard-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--oa-brand-50); color: var(--oa-brand);
}
.oa-scard-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; padding: 22px !important;
  align-items: start;
}
@media (max-width: 768px) { .oa-scard-body { grid-template-columns: 1fr; } }
/* Variante pleine largeur (éditeurs riches : templates, confidentialité, CGU) */
.oa-scard-body.oa-scard-plain { display: block !important; }
.oa-scard-body.oa-scard-plain .note-editor, .oa-scard-body.oa-scard-plain textarea { width: 100% !important; }

/* Cases à cocher dans les cartes de réglages : case native + label en ligne
   (neutralise la pastille ::before du template qui chevauchait le texte) */
.oa-scard-body .form-check { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; }
.oa-scard-body .form-check input[type="checkbox"] {
  position: static !important; opacity: 1 !important; width: 17px !important; height: 17px !important;
  margin: 0 !important; -webkit-appearance: auto !important; appearance: auto !important; accent-color: var(--oa-brand);
}
.oa-scard-body .form-check label {
  display: inline !important; width: auto !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important; font-weight: 600; cursor: pointer;
}
.oa-scard-body .form-check label::before, .oa-scard-body .form-check label::after { display: none !important; content: none !important; }

/* Pages de réglages SANS container-fluid (ex. Bannières) : la carte ne colle plus à la sidebar */
.page-wrapper > .oa-settings-host { margin-left: 16px !important; margin-right: 16px !important; }
/* Chaque groupe = 1 cellule ; les champs pleine largeur occupent les 2 colonnes.
   On force l'affichage en BLOC (label au-dessus) pour neutraliser la grille
   Bootstrap (.row/.col-*) qui faisait déborder les champs hors de la carte. */
.oa-scard-body > .form-group,
.oa-scard-body > div {
  min-width: 0; width: 100% !important; max-width: 100% !important; margin: 0 !important; float: none !important;
}
.oa-scard-body > .form-group.width-100,
.oa-scard-body > .width-100 { grid-column: 1 / -1; }
.oa-scard-body .form-group,
.oa-scard-body .form-group.row { display: block !important; margin: 0 !important; }
.oa-scard-body .control-label,
.oa-scard-body [class*="col-"] {
  display: block !important; width: 100% !important; max-width: 100% !important;
  flex: 0 0 auto !important; float: none !important; padding: 0 !important; margin: 0 !important;
}
.oa-scard-body .control-label { padding-bottom: 7px !important; font-weight: 600; }
.oa-scard-body .form-control,
.oa-scard-body input[type="text"], .oa-scard-body input[type="number"],
.oa-scard-body input[type="email"], .oa-scard-body input[type="password"],
.oa-scard-body input[type="file"], .oa-scard-body select, .oa-scard-body textarea {
  width: 100% !important; max-width: 100% !important;
}
.oa-scard-body .form-text, .oa-scard-body .placeholder_img_thumb { margin-top: 7px; }
.oa-scard-body .placeholder_img_thumb img { max-height: 64px; border-radius: 8px; border: 1px solid var(--oa-border); }

/* ---------- Formulaires / pages de création ---------- */
/* card-body « orpheline » (pages création sans .card : document, rôle) → look carte.
   On cible les faibles profondeurs pour ne PAS toucher les card-body des listes. */
.page-wrapper > .card-body,
.page-wrapper > div > .card-body,
.page-wrapper > .container-fluid > .card-body,
.page-wrapper > .container-fluid > div > .card-body {
  background: var(--oa-surface); border: 1px solid var(--oa-border);
  border-radius: var(--oa-radius); box-shadow: var(--oa-shadow); margin-top: 6px;
}
fieldset { border: none; padding: 0; margin: 0; }
fieldset legend {
  display: inline-block; width: auto; float: none;
  font-size: 13px; font-weight: 700; color: #fff !important; background: var(--oa-brand);
  padding: 8px 16px; border-radius: 10px; margin-bottom: 18px; border: none;
}
.required-field { color: var(--oa-danger); }
.btm-btn, .form-group.btm-btn.text-center { text-align: right !important; padding-top: 6px; }
.btn-default {
  background: var(--oa-surface-2) !important; color: var(--oa-ink-soft) !important;
  border: 1px solid var(--oa-border) !important;
}
.error_top p { color: var(--oa-danger); margin: 0; }
.success_top p { color: var(--oa-success); margin: 0; }
/* Table des permissions (création de rôle) */
.role-table td, .role-table th { padding: 8px 12px !important; vertical-align: middle; }
.role-table thead th { background: var(--oa-surface-2) !important; }

/* ---------- Badges ---------- */
.badge { border-radius: 999px; padding: 5px 10px; font-weight: 600; font-size: 11.5px; }
.badge-success, .badge.bg-success { background: var(--oa-success-50) !important; color: var(--oa-success) !important; }
.badge-info, .badge.bg-info { background: var(--oa-info-50) !important; color: var(--oa-info) !important; }
.badge-warning, .badge.bg-warning { background: var(--oa-warn-50) !important; color: var(--oa-warn) !important; }
.badge-danger, .badge.bg-danger { background: var(--oa-danger-50) !important; color: var(--oa-danger) !important; }
.badge-secondary { background: var(--oa-surface-2) !important; color: var(--oa-muted) !important; }

/* ---------- Modales ---------- */
.modal-content {
  background: var(--oa-surface) !important; color: var(--oa-ink) !important;
  border: 1px solid var(--oa-border) !important; border-radius: var(--oa-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
}
.modal-header, .modal-footer { border-color: var(--oa-border-soft) !important; }
.modal-title { color: var(--oa-ink) !important; font-weight: 700; }
.close, .modal .close { color: var(--oa-muted) !important; text-shadow: none; opacity: 1; }

/* ---------- Alertes ---------- */
.alert { border-radius: var(--oa-radius-sm); border: 1px solid transparent; }
.alert-warning { background: var(--oa-warn-50) !important; color: var(--oa-warn) !important; border-color: var(--oa-warn) !important; }
.alert-danger  { background: var(--oa-danger-50) !important; color: var(--oa-danger) !important; border-color: var(--oa-danger) !important; }
.alert-success { background: var(--oa-success-50) !important; color: var(--oa-success) !important; border-color: var(--oa-success) !important; }
.alert-info    { background: var(--oa-info-50) !important; color: var(--oa-info) !important; border-color: var(--oa-info) !important; }

/* ---------- Divers ---------- */
hr { border-color: var(--oa-border) !important; }
.dropdown-menu {
  background: var(--oa-surface) !important; border: 1px solid var(--oa-border) !important;
  border-radius: 12px !important; box-shadow: var(--oa-shadow) !important;
}
.dropdown-menu a, .dropdown-user li a { color: var(--oa-ink-soft) !important; }
.dropdown-menu a:hover, .dropdown-user li a:hover { background: var(--oa-surface-2) !important; color: var(--oa-brand) !important; }
.dropdown-user .u-text h4 { color: var(--oa-ink) !important; }
.divider { border-color: var(--oa-border-soft) !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--oa-border); border-radius: 8px; border: 2px solid var(--oa-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--oa-muted); }

/* Overlay de chargement */
#overlay { background: rgba(0,0,0,.35); }

/* ---------- Footer (thème clair/sombre) ---------- */
.footer {
  background: var(--oa-surface) !important;
  color: var(--oa-muted) !important;
  border-top: 1px solid var(--oa-border) !important;
  padding: 14px 24px !important;
}
.footer span, .footer a { color: var(--oa-muted) !important; }

/* Cartes en enfant direct de page-wrapper (pages sans container-fluid :
   pages colis, bannières…) → marge pour ne pas coller à la sidebar + air en haut */
.page-wrapper > .card { margin: 20px 16px 16px !important; }

/* ===== Détails du document (KYC) — v22 ===== */
.oa-doc-card .card-body { padding: 22px 22px 26px; }
.oa-doc-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.oa-doc-ico {
  width:46px; height:46px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--oa-brand) 14%, transparent);
  color: var(--oa-brand); font-size:22px;
}
.oa-doc-title { margin:0; font-size:17px; font-weight:700; color: var(--oa-text); }
.oa-doc-sub { margin:2px 0 0; font-size:13px; color: var(--oa-muted); }
.oa-reject-reason {
  margin-top:7px; font-size:12.5px; line-height:1.4;
  color: var(--oa-danger, #e53935);
  display:flex; align-items:flex-start; gap:5px; max-width:340px;
}
.oa-reject-reason .mdi { margin-top:1px; }
#rejectModal .modal-title { font-weight:700; }

/* Colonne Action : boutons Approuver / Rejeter lisibles et espacés (v23) */
#taxTable td.action-btn { white-space: nowrap; min-width: 220px; }
#taxTable td.action-btn > a {
  display: inline-block;
  vertical-align: middle;
  margin: 3px 4px;
}
#taxTable td.action-btn a.btn {
  color: #fff !important;
  white-space: nowrap;
  padding: 6px 14px !important;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
  width: auto !important;
  min-width: 92px;
  text-align: center;
}
#taxTable td.action-btn a.btn.btn-success { background: var(--oa-success, #1e9e5a); border-color: var(--oa-success, #1e9e5a); }
#taxTable td.action-btn a.btn.btn-danger { background: var(--oa-danger, #e53935); border-color: var(--oa-danger, #e53935); }
/* Icône crayon (édition) — pastille alignée */
#taxTable td.action-btn a > i.fa-edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: color-mix(in srgb, var(--oa-brand) 14%, transparent);
  color: var(--oa-brand);
}

/* Colonne Motif du rejet (KYC) — v24 : lecture claire, texte qui s'enroule */
#taxTable td.oa-motif-col { white-space: normal !important; max-width: 360px; vertical-align: middle; }
.oa-motif-cell {
  display: flex; align-items: flex-start; gap: 6px;
  color: var(--oa-danger, #e53935);
  font-size: 12.5px; line-height: 1.45; white-space: normal;
  word-break: break-word;
}
.oa-motif-cell .mdi { margin-top: 1px; flex: 0 0 auto; }
.oa-motif-empty { color: var(--oa-muted); }