/* ============================================================
   CLICKSOFT — WINDOW THEME OVERRIDES
   Re-skin de la sidebar (.swv-*) et du header (#swv-header)
   pour matcher la signature visuelle du theme Window :
   - Sidebar  : fond #0a0e14, items actifs en bleu plein #3b82f6
   - Header   : fond #0a0e14, top-nav avec dot bleus
   - Active   : pastille bleue à gauche + texte blanc
   - Hover    : fond translucide subtle
   - Submenu  : bullet point bleu sous chaque item
   - Logo     : conserve le marquage Clicksoft
   ============================================================ */

/* ====== Variables Window (maquette exacte) ====== */
:root {
  --w-bg:           #0d1117;          /* fond sidebar — légèrement plus sombre que #0a0e14 */
  --w-bg-soft:      #161b27;          /* hover bg */
  --w-bg-soft-2:    #1e2535;
  --w-text:         #9ca3af;          /* texte items repos — gris moyen */
  --w-text-strong:  #e5e7eb;          /* texte au survol */
  --w-text-muted:   #4b5563;          /* section labels */
  --w-brand:        #3b82f6;          /* bleu Window */
  --w-brand-hover:  #2563eb;          /* bleu foncé hover — évite le survol blanc */
  --w-brand-soft:   rgba(59,130,246,.10); /* fond bleu très léger */
  --w-brand-dim:    rgba(59,130,246,.14);
  --w-border:       rgba(255,255,255,.06);
  --w-radius:       8px;
}

/* ============================================================
   1) SIDEBAR — Maquette Window exacte
   ============================================================ */

/* Shell */
.swv-sidebar {
  background: var(--w-bg) !important;
  width: 256px !important;
  min-width: 256px !important;
  border-right: 1px solid var(--w-border) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  box-shadow: none !important;
}

/* Logo header */
.swv-sidebar__logo {
  background: var(--w-bg) !important;
  border-bottom: none !important;
  height: 72px !important;
  padding: 0 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
.swv-sidebar__logo::after {
  display: none !important;
}
.swv-sidebar__logo:hover {
  background: var(--w-bg-soft) !important;
}
.swv-sidebar__logo-icon {
  background: rgba(255,255,255,.06) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}
.swv-sidebar__logo-icon > svg {
  color: #38bdf8 !important;
  filter: none !important;
  width: 18px !important;
  height: 18px !important;
}
.swv-sidebar__logo-icon > img {
  width: calc(100% - 6px) !important;
  height: calc(100% - 6px) !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border-radius: 6px !important;
  margin: 3px !important;
  padding: 0 !important;
}
.swv-sidebar__logo-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -.01em !important;
}
.swv-sidebar__logo-sub {
  font-size: 10px !important;
  color: var(--w-text-muted) !important;
  letter-spacing: .06em !important;
}

/* ── Section labels (NAVIGATION, WEBAPPS, UI PAGES) ── */
.swv-nav__section,
.swv-sidebar .swv-nav__section {
  color: var(--w-text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  padding: 20px 20px 6px !important;
  background: transparent !important;
  border: none !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}
/* Supprimer la ligne ::after du section label */
.swv-sidebar .swv-nav__section::after {
  display: none !important;
}

/* ── Items de nav (liens + dropdown parent) ── */
.swv-sidebar .swv-nav__link,
.swv-sidebar .swv-nav__dropdown-toggle {
  color: #9ca3af !important;            /* gris moyen — maquette exacte */
  background: transparent !important;
  padding: 11px 14px 11px 20px !important;
  margin: 2px 8px !important;
  border-radius: var(--w-radius) !important;
  font-size: 14px !important;           /* 14px — taille maquette */
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: -.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  transition: background .15s ease, color .15s ease !important;
  text-decoration: none !important;
  border: none !important;
  position: relative !important;
  min-height: 44px !important;
  line-height: 1.3 !important;
}

/* Hover */
.swv-sidebar .swv-nav__link:not(.active):hover,
.swv-sidebar .swv-nav__dropdown-toggle:not(.has-active):hover {
  background: #161b27 !important;      /* bg-soft discret */
  color: #e5e7eb !important;           /* texte presque blanc au hover */
  transform: none !important;
}

/* Active — fond bleu plein + texte blanc + icône blanche (currentColor) */
.swv-sidebar .swv-nav__link.active,
.swv-sidebar .swv-nav__dropdown-toggle.has-active,
.swv-sidebar .swv-nav__dropdown-toggle.open.has-active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(59,130,246,.35) !important;
}
/* Icône active : suit la couleur du texte = blanc */
.swv-sidebar .swv-nav__link.active svg,
.swv-sidebar .swv-nav__link.active i,
.swv-sidebar .swv-nav__dropdown-toggle.has-active svg,
.swv-sidebar .swv-nav__dropdown-toggle.has-active i {
  color: currentColor !important;    /* = #fff puisque le texte est blanc */
  opacity: 1 !important;
}

/* Dropdown ouvert mais pas actif */
.swv-sidebar .swv-nav__dropdown-toggle.open:not(.has-active) {
  background: var(--w-bg-soft) !important;
  color: var(--w-text-strong) !important;
}

/* ── Icônes repos / hover ── */
.swv-sidebar .swv-nav__link svg,
.swv-sidebar .swv-nav__dropdown-toggle > svg:not(.swv-nav__chevron),
.swv-sidebar .swv-nav__link svg.icon,
.swv-sidebar .swv-nav__dropdown-toggle svg.icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  color: #9ca3af !important;           /* même couleur que le texte repos */
  transition: color .15s ease !important;
}
.swv-sidebar .swv-nav__link:not(.active):hover svg,
.swv-sidebar .swv-nav__dropdown-toggle:not(.has-active):hover svg {
  color: #e5e7eb !important;           /* suit le texte hover */
}
/* Active : icône = currentColor (blanc) */
.swv-sidebar .swv-nav__link.active svg,
.swv-sidebar .swv-nav__dropdown-toggle.has-active svg {
  color: currentColor !important;
  opacity: 1 !important;
}

/* ── Barre active ::before — pas de barre externe, le fond bleu suffit ── */
.swv-sidebar .swv-nav__link.active::before,
.swv-sidebar .swv-nav__dropdown-toggle.has-active::before {
  display: none !important;
}

/* ── Chevron ── */
.swv-sidebar .swv-nav__chevron {
  width: 14px !important;
  height: 14px !important;
  margin-left: auto !important;
  opacity: .5 !important;
  color: var(--w-text) !important;
  transition: transform .2s ease, opacity .15s !important;
}
.swv-sidebar .swv-nav__dropdown-toggle.open .swv-nav__chevron {
  transform: rotate(180deg) !important;
  opacity: .85 !important;
}
.swv-sidebar .swv-nav__dropdown-toggle.has-active .swv-nav__chevron {
  color: #fff !important;
  opacity: .8 !important;
}

/* ── Sous-menu (submenu) — style maquette Window ── */
.swv-sidebar .swv-nav__submenu {
  background: transparent !important;
  margin: 2px 0 4px 0 !important;
  padding: 0 0 0 20px !important;
  border-left: none !important;
  margin-left: 0 !important;
  list-style: none !important;
  position: relative !important;
}

/* Sublinks */
.swv-sidebar .swv-nav__sublink {
  color: #9ca3af !important;           /* même gris que items parents */
  background: transparent !important;
  padding: 7px 12px 7px 22px !important;
  margin: 0 8px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;        /* légèrement sous les parents */
  font-weight: 400 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: -.005em !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color .15s ease, background .15s ease !important;
  min-height: 34px !important;
}

/* Bullet • Window style */
.swv-sidebar .swv-nav__sublink::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--w-text-muted) !important;
  flex-shrink: 0 !important;
  transition: background .15s, width .15s, height .15s !important;
}

/* Sublink hover */
.swv-sidebar .swv-nav__sublink:hover {
  background: var(--w-bg-soft) !important;
  color: var(--w-text-strong) !important;
  transform: none !important;
}
.swv-sidebar .swv-nav__sublink:hover::before {
  background: var(--w-text-strong) !important;
}

/* Sublink actif — texte bleu brand (comme "Facture" en bleu dans capture 2) */
.swv-sidebar .swv-nav__sublink.active {
  color: #3b82f6 !important;           /* bleu brand — identique à la maquette */
  background: transparent !important;
  font-weight: 600 !important;
}
.swv-sidebar .swv-nav__sublink.active::before {
  background: #3b82f6 !important;      /* bullet bleu */
  width: 6px !important;
  height: 6px !important;
  transform: translateY(-50%) scale(1) !important;
}

/* ── Scrollbar : invisible au repos, visible au survol/scroll ── */
.swv-sidebar__scroll {
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
  transition: scrollbar-color .3s !important;
}
.swv-sidebar__scroll:hover {
  scrollbar-color: rgba(148,163,184,.25) transparent !important;
}
/* Webkit : masquée par défaut */
.swv-sidebar__scroll::-webkit-scrollbar {
  width: 4px !important;
}
.swv-sidebar__scroll::-webkit-scrollbar-track {
  background: transparent !important;
}
.swv-sidebar__scroll::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 999px !important;
  transition: background .3s ease !important;
}
/* Visible au survol du sidebar */
.swv-sidebar:hover .swv-sidebar__scroll::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.22) !important;
}
.swv-sidebar:hover .swv-sidebar__scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,.45) !important;
}

/* ── Collapsed sidebar ── */
body.sidebar-collapse .swv-sidebar {
  width: 70px !important;
  min-width: 70px !important;
}
body.sidebar-collapse .swv-sidebar .swv-nav__link span,
body.sidebar-collapse .swv-sidebar .swv-nav__dropdown-toggle span,
body.sidebar-collapse .swv-sidebar .swv-nav__chevron,
body.sidebar-collapse .swv-sidebar .swv-nav__section,
body.sidebar-collapse .swv-sidebar .swv-sidebar__logo-text,
body.sidebar-collapse .swv-sidebar .swv-nav__submenu {
  display: none !important;
}
body.sidebar-collapse .swv-sidebar .swv-nav__link,
body.sidebar-collapse .swv-sidebar .swv-nav__dropdown-toggle {
  justify-content: center !important;
  padding: 12px 0 !important;
  margin: 2px 8px !important;
  min-height: 44px !important;
}

/* ── Suppression des micro-animations conflictuelles ── */
.swv-sidebar .swv-nav__link:hover svg,
.swv-sidebar .swv-nav__dropdown-toggle:hover > svg:not(.swv-nav__chevron) {
  transform: none !important;
}
.swv-sidebar .swv-nav__link:not(.active):hover,
.swv-sidebar .swv-nav__dropdown-toggle:not(.has-active):hover {
  transform: none !important;
}
.swv-sidebar .swv-nav__sublink:hover {
  transform: none !important;
}

/* ── Section separators ── */
.swv-sidebar .swv-nav__section + .swv-nav__section,
.swv-sidebar .swv-nav__link + .swv-nav__section,
.swv-sidebar .swv-nav__dropdown + .swv-nav__section {
  margin-top: 4px !important;
  border-top: none !important;
  padding-top: 20px !important;
}

/* ── Logo dot : masqué (supprimé dans HTML) ── */
.swv-sidebar__logo-dot { display: none !important; }

/* ── Mobile : scrollbar toujours invisible ── */
@media (max-width: 1023px) {
  .swv-sidebar__scroll {
    scrollbar-width: none !important;
  }
  .swv-sidebar__scroll::-webkit-scrollbar {
    display: none !important;
  }
}

/* ============================================================
   2) HEADER  (#swv-header et descendants)
   ============================================================ */
#swv-header {
  background: var(--w-bg) !important;
  border-bottom: 1px solid var(--w-border) !important;
  height: 64px !important;
  padding: 0 20px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Toggle sidebar btn */
#swv-header .swv-toggle-btn {
  background: transparent !important;
  color: var(--w-text) !important;
  border-radius: var(--w-radius) !important;
}
#swv-header .swv-toggle-btn:hover {
  background: var(--w-bg-soft) !important;
  color: var(--w-text-strong) !important;
}

/* Vertical separator */
#swv-header .swv-vsep {
  background: var(--w-border) !important;
  height: 28px !important;
}

/* Boutons d'action header */
#swv-header .swv-hbtn,
#swv-header .swv-hbtn-lbl {
  background: transparent !important;
  color: var(--w-text) !important;
  border-radius: var(--w-radius) !important;
  border: none !important;
  height: 38px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
#swv-header .swv-hbtn:hover,
#swv-header .swv-hbtn-lbl:hover {
  background: var(--w-bg-soft) !important;
  color: var(--w-text-strong) !important;
}
#swv-header .swv-hbtn svg,
#swv-header .swv-hbtn-lbl svg {
  color: currentColor !important;
}

/* Spécial : conserver l'effet rouge pour "Données démo" */
#swv-header .swv-hbtn-lbl[style*="rgba(239,68,68"] {
  background: rgba(239,68,68,.12) !important;
  color: #f87171 !important;
}
#swv-header .swv-hbtn-lbl[style*="rgba(239,68,68"]:hover {
  background: rgba(239,68,68,.2) !important;
}

/* Dropdowns du header */
#swv-header .swv-dd-panel {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
  border-radius: var(--w-radius) !important;
  overflow: hidden !important;
}
#swv-header .swv-dd-hd {
  background: #f9fafb !important;
  color: #111827 !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
#swv-header .swv-dd-item {
  color: #374151 !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
#swv-header .swv-dd-item:hover {
  background: var(--w-brand-soft) !important;
  color: var(--w-brand-hover) !important;
}
#swv-header .swv-dd-item svg { color: currentColor !important; opacity: .7 !important; }
#swv-header .swv-dd-item:hover svg { opacity: 1 !important; }
#swv-header .swv-dd-sep {
  height: 1px !important;
  background: #e5e7eb !important;
  margin: 4px 0 !important;
}

/* User info dans dropdown */
#swv-header .swv-user-info {
  background: linear-gradient(135deg, var(--w-brand) 0%, #2563eb 100%) !important;
  color: #fff !important;
  padding: 14px !important;
}
#swv-header .swv-user-info-label {
  color: rgba(255,255,255,.75) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
#swv-header .swv-user-info-name {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-top: 2px !important;
}

/* Date/heure dans le header */
#swv-header .swv-date {
  color: var(--w-text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Back btn (signed-in-as-user) */
#swv-header .swv-back-btn {
  background: rgba(245,158,11,.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245,158,11,.3) !important;
  border-radius: var(--w-radius) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ============================================================
   3) Insertions Window UI (theme toggle + flag) dans le header
   ============================================================ */
.swv-window-toggle {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--w-radius);
  background: transparent;
  border: none;
  color: var(--w-text);
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.swv-window-toggle:hover {
  background: var(--w-bg-soft);
  color: var(--w-text-strong);
}
.swv-window-toggle .icon-sun  { display: none; }
.swv-window-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .swv-window-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .swv-window-toggle .icon-moon { display: none; }

.swv-window-flag {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--w-radius);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
  padding: 0;
}
.swv-window-flag:hover { background: var(--w-bg-soft); }
.swv-window-flag svg {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1);
}

/* Notif badge (dot) */
.swv-window-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--w-bg);
}

/* ============================================================
   4) Contenu principal — light tweaks pour cohérence Window
   ============================================================ */

/* Wrapper main scrollable */
#scrollable-container {
  background: #f3f4f6;
}

/* Cards Bootstrap → look Window */
.box,
.card {
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.box .box-header,
.card .card-header {
  border-bottom: 1px solid #e5e7eb !important;
  background: #fff !important;
  padding: 14px 18px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}
.box .box-title,
.card .card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin: 0 !important;
}

/* Boutons primaires Bootstrap → bleu Window */
.btn-primary,
.btn-info {
  background-color: var(--w-brand) !important;
  border-color: var(--w-brand) !important;
}
.btn-primary:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-info:focus {
  background-color: var(--w-brand-hover) !important;
  border-color: var(--w-brand-hover) !important;
}

.btn-outline-primary {
  color: var(--w-brand) !important;
  border-color: var(--w-brand) !important;
}
.btn-outline-primary:hover {
  background-color: var(--w-brand) !important;
  color: #fff !important;
}

/* Liens accents */
a { color: var(--w-brand); }
a:hover { color: var(--w-brand-hover); }

/* Tables — légèrement plus modernes */
.table thead th {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: none !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: none !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}
.table tbody td {
  padding: 14px 16px !important;
  border-top: 1px solid #f3f4f6 !important;
  vertical-align: middle !important;
}
.table tbody tr:hover {
  background: #f9fafb !important;
}

/* Form controls — focus bleu Window */
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--w-brand) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}

/* ============================================================
   5) Mode sombre global (data-theme="dark")
   ============================================================ */
:root[data-theme="dark"] body.tw-bg-gray-100,
:root[data-theme="dark"] body {
  background: #0a0e14 !important;
  color: #d1d5db !important;
}
:root[data-theme="dark"] #scrollable-container,
:root[data-theme="dark"] main.tw-bg-gray-100 {
  background: #0a0e14 !important;
}
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .card {
  background: #131822 !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #d1d5db !important;
}
:root[data-theme="dark"] .box .box-header,
:root[data-theme="dark"] .card .card-header {
  background: #131822 !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #fff !important;
}
:root[data-theme="dark"] .table thead th {
  background: #1a2030 !important;
  color: #9ca3af !important;
  border-color: rgba(255,255,255,.06) !important;
}
:root[data-theme="dark"] .table tbody td {
  border-color: rgba(255,255,255,.04) !important;
  color: #d1d5db !important;
}
:root[data-theme="dark"] .table tbody tr:hover {
  background: rgba(59,130,246,.06) !important;
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .select2-selection {
  background: #1a2030 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #d1d5db !important;
}
:root[data-theme="dark"] .form-control::placeholder {
  color: #6b7280 !important;
}

/* ============================================================
   5b) DataTables — wrapper, processing, filter, info, pagination
   Styles alignés sur datatables-theme.css
   Raffinement UI : conteneur arrondi, ombre légère, bordures unifiées
   ============================================================ */

/* Wrapper — fond blanc, coins arrondis + ombre légère.
   NOTE : on garde overflow: visible pour ne pas couper les dropdowns ;
   le border-radius visuel est obtenu via les éléments internes
   (toolbar + footer + coins des cellules thead/tbody). */
.dataTables_wrapper {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  overflow: visible !important;        /* CRITIQUE : pas hidden sinon dropdown coupé */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important;
}
.dataTables_wrapper table.dataTable {
  width: 100% !important;
  background: transparent !important;
  border-collapse: collapse !important;
  border: none !important;
}

/* ── Table : en-têtes, lignes, cellules — spec raffinée ── */
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
  background: #f8f9fa !important;
  color: #6c757d !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.75rem 1rem !important;
  border-top: none !important;
  border-bottom: 1px solid #e9ecef !important;
  border-left: none !important;
  border-right: none !important;
}

.dataTables_wrapper table.dataTable tbody td {
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  color: #1e293b !important;
  border-top: none !important;
  border-bottom: 1px solid #e9ecef !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: middle !important;
}
.dataTables_wrapper table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* ── Alternance subtile des lignes ── */
.dataTables_wrapper table.dataTable tbody tr,
.dataTables_wrapper table.dataTable.display tbody tr.even,
.dataTables_wrapper table.dataTable.stripe tbody tr.even {
  background: #ffffff !important;
  transition: background 0.15s ease !important;
}
.dataTables_wrapper table.dataTable tbody tr:nth-child(even),
.dataTables_wrapper table.dataTable.display tbody tr.odd,
.dataTables_wrapper table.dataTable.stripe tbody tr.odd {
  background: #fafafa !important;
}
.dataTables_wrapper table.dataTable.display tbody tr.even td,
.dataTables_wrapper table.dataTable.stripe tbody tr.even td {
  background: transparent !important;
}
.dataTables_wrapper table.dataTable.display tbody tr.odd td,
.dataTables_wrapper table.dataTable.stripe tbody tr.odd td {
  background: transparent !important;
}

/* ── Hover ── */
.dataTables_wrapper table.dataTable tbody tr:hover,
.dataTables_wrapper table.dataTable.hover tbody tr:hover,
.dataTables_wrapper table.dataTable.display tbody tr.odd:hover,
.dataTables_wrapper table.dataTable.display tbody tr.even:hover {
  background: #f0f4ff !important;
}
.dataTables_wrapper table.dataTable tbody tr:hover td,
.dataTables_wrapper table.dataTable.hover tbody tr:hover td {
  background: transparent !important;
}

/* ── Fix Bootstrap col-sm : empêche le wrap des boutons export ──
   Bootstrap 3 applique width:66.66% sur .col-sm-8 ce qui contraint
   la zone boutons et pousse le PDF sur une 2ème ligne.
   On écrase avec width:auto + float:none + flex approprié.          */
.dataTables_wrapper .row.margin-bottom-20 {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  overflow: visible !important;
}
.dataTables_wrapper .row.margin-bottom-20 > [class*="col-"] {
  width: auto !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  flex: none !important;
}
.dataTables_wrapper .row.margin-bottom-20 .col-sm-8 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.dataTables_wrapper .row.margin-bottom-20 .col-sm-3 {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Processing overlay */
.dataTables_processing {
  background: rgba(255,255,255,.95) !important;
  color: #64748b !important;
  border: 1px solid #e8ecf0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04) !important;
  padding: 12px 22px !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  z-index: 10 !important;
  backdrop-filter: blur(4px) !important;
}

/* Search & length */
.dataTables_filter label,
.dataTables_length label {
  color: #64748b;
  font-weight: 400;
  font-size: 12.5px;
  margin: 0;
}
.dataTables_filter input,
.dataTables_length select {
  height: 33px !important;
  border: 1px solid #dde3ea !important;
  border-radius: 6px !important;
  padding: 0 10px 0 34px !important;
  background: #ffffff !important;
  color: #1e293b !important;
  font-size: 12.5px !important;
  font-family: inherit !important;
  margin-left: 6px !important;
  transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.dataTables_length select {
  padding: 0 26px 0 10px !important;
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}

/* Info */
.dataTables_info {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-family: inherit !important;
}

/* ============================================================
   PAGINATION ERP — design pro, refonte définitive
   --------------------------------------------------------------
   APPROCHE : dom DataTables reste 'tip' (info + pagination sont
   des SIBLINGS du wrapper, pas dans un .row). Le layout côte-à-côte
   est obtenu via display:inline-block + widths CSS.
   Cette approche évite TOUTE modification de structure JS qui
   pourrait perturber l'event delegation DataTables.
   --------------------------------------------------------------
   - Info "Affiche X à Y sur Z entrées" → GAUCHE 50%
   - Pagination → DROITE 50%
   - Tous les boutons (numéros + chevrons) : 32×32 px uniforme
   - Chevrons via Font Awesome (cf. common.js paginate config)
   ============================================================ */

/* Wrapper reçoit un padding pour le footer */
.dataTables_wrapper > .dataTables_info,
.dataTables_wrapper > .dataTables_paginate {
  display: inline-block !important;
  width: 49.5% !important;
  vertical-align: middle !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  border-top: 1px solid #e9ecef !important;
}

/* Info à gauche */
.dataTables_wrapper > .dataTables_info {
  text-align: left !important;
  padding-right: 8px !important;
}

/* Pagination à droite */
.dataTables_wrapper > .dataTables_paginate {
  text-align: right !important;
  padding-left: 8px !important;
  white-space: nowrap !important;
}

/* Info "Affiche X à Y sur Z entrées" — couleur muted */
.dataTables_info {
  font-size: 13px !important;
  color: #6b7280 !important;
  font-family: inherit !important;
  line-height: 32px !important;
}

/* Conteneur pagination interne : items inline, AUCUNE bordure */
.dataTables_paginate,
.dt-paging .dataTables_paginate,
.pagination,
ul.pagination,
.dataTables_wrapper .pagination {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  list-style: none !important;
  width: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Bootstrap <li> : aucune bordure ni background */
.pagination .page-item,
.pagination li.page-item,
.dataTables_paginate li.paginate_button,
.dataTables_wrapper .pagination .page-item {
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Wrapper <span> DataTables (regroupe les numéros) */
.dataTables_paginate > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   TOUS LES BOUTONS : MÊME TAILLE 32×32, sans bordure, fond transparent.
   IMPORTANT — ce projet utilise Bootstrap 3, donc la structure rendue
   par DataTables est :
     <ul class="pagination">
       <li class="paginate_button"><a>1</a></li>
       <li class="paginate_button active"><span>2</span></li>
       <li class="paginate_button"><a>3</a></li>
     </ul>
   Les sélecteurs vendor.css `.pagination > li > a` (spécificité 0,0,3)
   battent un simple `.pagination .page-link` (0,0,2). On les bat ici
   avec une spécificité strictement supérieure.
   ══════════════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span,
.dataTables_wrapper .dataTables_paginate ul.pagination > li > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li > span,
.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span,
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span,
.pagination > li > a,
.pagination > li > span,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a.paginate_button,
.dataTables_wrapper .dataTables_paginate li.paginate_button,
.dataTables_wrapper .pagination .page-item .page-link,
.dataTables_wrapper .pagination li .page-link,
.dataTables_wrapper .pagination .page-link,
.dataTables_paginate .paginate_button,
.pagination .page-item .page-link,
.pagination .page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  max-height: 32px !important;
  border: 0 none !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #495057 !important;
  border-radius: 6px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  text-align: center !important;
  float: none !important;
}

/* Hover : fond gris doux — Bootstrap 3 + 4/5 */
.dataTables_wrapper .dataTables_paginate .pagination > li:not(.active):not(.disabled) > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li:not(.active):not(.disabled) > span:hover,
.dataTables_wrapper .pagination > li:not(.active):not(.disabled) > a:hover,
.dataTables_wrapper .pagination > li:not(.active):not(.disabled) > span:hover,
.pagination > li:not(.active):not(.disabled) > a:hover,
.pagination > li:not(.active):not(.disabled) > span:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.current):not(.active):hover,
.dataTables_wrapper .pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.dataTables_wrapper .pagination .page-link:hover {
  background: #e9ecef !important;
  background-color: #e9ecef !important;
  color: #212529 !important;
  border: 0 none !important;
  box-shadow: none !important;
}

/* Page active : fond bleu, texte blanc — Bootstrap 3 + 4/5 */
.dataTables_wrapper .dataTables_paginate .pagination > li.active > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > span,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > span:hover,
.dataTables_wrapper .pagination > li.active > a,
.dataTables_wrapper .pagination > li.active > span,
.pagination > li.active > a,
.pagination > li.active > span,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate li.paginate_button.active > a,
.dataTables_wrapper .dataTables_paginate li.paginate_button.active > span,
.dataTables_wrapper .pagination .page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link:hover,
.dataTables_wrapper .pagination li.active > .page-link {
  background: #0d6efd !important;
  background-color: #0d6efd !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: 0 none !important;
  box-shadow: none !important;
}

/* État désactivé : grisé léger — Bootstrap 3 + 4/5 */
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > span,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > span:hover,
.dataTables_wrapper .pagination > li.disabled > a,
.dataTables_wrapper .pagination > li.disabled > span,
.pagination > li.disabled > a,
.pagination > li.disabled > span,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate li.paginate_button.disabled > a,
.dataTables_wrapper .dataTables_paginate li.paginate_button.disabled > span,
.dataTables_wrapper .pagination .page-item.disabled .page-link,
.dataTables_wrapper .pagination .page-item.disabled .page-link:hover,
.dataTables_wrapper .pagination li.disabled > .page-link {
  background: transparent !important;
  background-color: transparent !important;
  color: #cbd5e1 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  border: 0 none !important;
  box-shadow: none !important;
}

/* Ellipsis (…) — non cliquable, gris clair */
.dataTables_wrapper .dataTables_paginate .paginate_button.ellipsis,
.dataTables_wrapper .dataTables_paginate span.ellipsis,
.dataTables_wrapper .pagination .ellipsis,
.dataTables_wrapper .pagination > li > .ellipsis,
.dataTables_paginate .paginate_button.ellipsis,
.dataTables_paginate span.ellipsis,
.pagination .ellipsis {
  color: #adb5bd !important;
  background: transparent !important;
  cursor: default !important;
  pointer-events: none !important;
  border: 0 none !important;
  box-shadow: none !important;
}

/* Chevrons Font Awesome dans pagination : taille uniforme avec les chiffres */
.dataTables_wrapper .dataTables_paginate .pagination > li.previous > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.previous > span,
.dataTables_wrapper .dataTables_paginate .pagination > li.next > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.next > span,
.dataTables_wrapper .dataTables_paginate .pagination > li.first > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.first > span,
.dataTables_wrapper .dataTables_paginate .pagination > li.last > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.last > span,
.dataTables_wrapper .pagination > li.previous > a,
.dataTables_wrapper .pagination > li.previous > span,
.dataTables_wrapper .pagination > li.next > a,
.dataTables_wrapper .pagination > li.next > span,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.first,
.dataTables_wrapper .dataTables_paginate .paginate_button.last,
.dataTables_wrapper .pagination .page-item.previous .page-link,
.dataTables_wrapper .pagination .page-item.next .page-link,
.dataTables_wrapper .pagination .page-item.first .page-link,
.dataTables_wrapper .pagination .page-item.last .page-link {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}

/* Icônes Font Awesome injectées dans pagination — assure que le clic
   bubble correctement vers le <a> parent (pointer-events: none aurait
   bloqué le click handler DataTables) et que la taille est uniforme. */
.dataTables_wrapper .dataTables_paginate .pagination > li > a > i,
.dataTables_wrapper .dataTables_paginate .pagination > li > span > i,
.dataTables_wrapper .pagination > li > a > i,
.dataTables_wrapper .pagination > li > span > i,
.dataTables_wrapper .pagination .page-link > i,
.dataTables_paginate .paginate_button > i {
  font-size: 0.875rem !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  color: inherit !important;
  pointer-events: none !important;  /* le clic doit bubble vers <a> */
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* ============================================================
   5c) Filtres / wells / panels (Bootstrap legacy)
   ============================================================ */
.well, .filter-card, .filter-section, .panel {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

/* Form labels */
.form-group label,
.control-label,
.filter-section label,
.col-form-label {
  color: #374151 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* ============================================================
   5d) DaisyUI / Tailwind boutons outline → plus visibles
   ============================================================ */

/* outline buttons : ajouter un fond léger pour mieux marquer la zone cliquable */
.tw-dw-btn-outline.tw-dw-btn-error {
  background: rgba(239,68,68,.08) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
.tw-dw-btn-outline.tw-dw-btn-error:hover {
  background: #ef4444 !important;
  color: #fff !important;
}
.tw-dw-btn-outline.tw-dw-btn-warning {
  background: rgba(245,158,11,.10) !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}
.tw-dw-btn-outline.tw-dw-btn-warning:hover {
  background: #f59e0b !important;
  color: #fff !important;
}
.tw-dw-btn-outline.tw-dw-btn-accent {
  background: rgba(20,184,166,.08) !important;
  border-color: #14b8a6 !important;
  color: #0f766e !important;
}
.tw-dw-btn-outline.tw-dw-btn-accent:hover {
  background: #14b8a6 !important;
  color: #fff !important;
}
.tw-dw-btn-outline.tw-dw-btn-neutral {
  background: rgba(55,65,81,.06) !important;
  border-color: #374151 !important;
  color: #1f2937 !important;
}
.tw-dw-btn-outline.tw-dw-btn-neutral:hover {
  background: #374151 !important;
  color: #fff !important;
}
.tw-dw-btn-outline.tw-dw-btn-primary {
  background: rgba(59,130,246,.08) !important;
  border-color: var(--w-brand) !important;
  color: var(--w-brand) !important;
}
.tw-dw-btn-outline.tw-dw-btn-primary:hover {
  background: var(--w-brand) !important;
  color: #fff !important;
}

/* ============================================================
   5e) DARK MODE — surcharge complète (data-theme="dark")
   ============================================================ */

/* Wrappers + page */
:root[data-theme="dark"] #scrollable-container,
:root[data-theme="dark"] main.tw-bg-gray-100,
:root[data-theme="dark"] .content-wrapper,
:root[data-theme="dark"] .content {
  background: #0a0e14 !important;
  color: #d1d5db !important;
}

/* Filter / Wells / Panels — fond sombre */
:root[data-theme="dark"] .well,
:root[data-theme="dark"] .filter-card,
:root[data-theme="dark"] .filter-section,
:root[data-theme="dark"] .panel {
  background: #131822 !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #d1d5db !important;
}

/* Labels & textes */
:root[data-theme="dark"] .form-group label,
:root[data-theme="dark"] .control-label,
:root[data-theme="dark"] .col-form-label,
:root[data-theme="dark"] label {
  color: #d1d5db !important;
}

/* Page titles & section h1/h2/h3 */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .section-header,
:root[data-theme="dark"] .content-header h1,
:root[data-theme="dark"] .page-title {
  color: #f3f4f6 !important;
}

/* Card-headers en dark */
:root[data-theme="dark"] .box-title,
:root[data-theme="dark"] .card-title {
  color: #f3f4f6 !important;
}

/* Tabs */
:root[data-theme="dark"] .nav-tabs {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .nav-tabs > li > a {
  color: #9ca3af !important;
  background: transparent !important;
}
:root[data-theme="dark"] .nav-tabs > li.active > a,
:root[data-theme="dark"] .nav-tabs > li > a.active {
  background: #131822 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.08) rgba(255,255,255,.08) transparent !important;
}

/* Form inputs en dark */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] input.form-control,
:root[data-theme="dark"] textarea.form-control,
:root[data-theme="dark"] select.form-control,
:root[data-theme="dark"] .select2-selection,
:root[data-theme="dark"] .select2-selection--single,
:root[data-theme="dark"] .select2-selection--multiple {
  background: #1a2030 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f3f4f6 !important;
}
:root[data-theme="dark"] .select2-selection__rendered,
:root[data-theme="dark"] .select2-selection__placeholder,
:root[data-theme="dark"] .select2-selection__choice {
  color: #f3f4f6 !important;
}
:root[data-theme="dark"] .select2-selection__choice {
  background: #2a3140 !important;
  border-color: rgba(255,255,255,.1) !important;
}
:root[data-theme="dark"] .select2-dropdown {
  background: #131822 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #f3f4f6 !important;
}
:root[data-theme="dark"] .select2-results__option {
  color: #f3f4f6 !important;
  background: transparent !important;
}
:root[data-theme="dark"] .select2-results__option--highlighted {
  background: var(--w-brand) !important;
  color: #fff !important;
}
:root[data-theme="dark"] .select2-search__field {
  background: #1a2030 !important;
  color: #f3f4f6 !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* Header dropdown panels en dark */
:root[data-theme="dark"] #swv-header .swv-dd-panel {
  background: #131822 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #d1d5db !important;
}
:root[data-theme="dark"] #swv-header .swv-dd-hd {
  background: #1a2030 !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #f3f4f6 !important;
}
:root[data-theme="dark"] #swv-header .swv-dd-item {
  color: #d1d5db !important;
}
:root[data-theme="dark"] #swv-header .swv-dd-item:hover {
  background: rgba(59,130,246,.15) !important;
  color: #93c5fd !important;
}
:root[data-theme="dark"] #swv-header .swv-dd-sep {
  background: rgba(255,255,255,.06) !important;
}

/* DataTables wrapper en dark */
:root[data-theme="dark"] .dataTables_wrapper,
:root[data-theme="dark"] .dataTables_processing {
  color: #d1d5db !important;
}
:root[data-theme="dark"] .dataTables_processing {
  background: #131822 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f3f4f6 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
:root[data-theme="dark"] .dataTables_filter label,
:root[data-theme="dark"] .dataTables_length label,
:root[data-theme="dark"] .dataTables_info {
  color: #d1d5db !important;
}
:root[data-theme="dark"] .dataTables_filter input,
:root[data-theme="dark"] .dataTables_length select {
  background: #1a2030 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #f3f4f6 !important;
}
:root[data-theme="dark"] .dataTables_paginate .paginate_button {
  color: #d1d5db !important;
}
:root[data-theme="dark"] .dataTables_paginate .paginate_button:hover {
  background: #1a2030 !important;
  color: #93c5fd !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* Modals en dark */
:root[data-theme="dark"] .modal-content {
  background: #131822 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #d1d5db !important;
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
  border-color: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .modal-title { color: #f3f4f6 !important; }

/* Boutons outline en dark — couleurs pastel */
:root[data-theme="dark"] .tw-dw-btn-outline.tw-dw-btn-error {
  background: rgba(239,68,68,.15) !important;
  color: #fca5a5 !important;
}
:root[data-theme="dark"] .tw-dw-btn-outline.tw-dw-btn-warning {
  background: rgba(245,158,11,.18) !important;
  color: #fcd34d !important;
}
:root[data-theme="dark"] .tw-dw-btn-outline.tw-dw-btn-accent {
  background: rgba(20,184,166,.15) !important;
  color: #5eead4 !important;
}
:root[data-theme="dark"] .tw-dw-btn-outline.tw-dw-btn-neutral {
  background: rgba(255,255,255,.06) !important;
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,.2) !important;
}
:root[data-theme="dark"] .tw-dw-btn-outline.tw-dw-btn-primary {
  background: rgba(59,130,246,.15) !important;
  color: #93c5fd !important;
}

/* Tailwind utility bg-white → fond sombre en dark */
:root[data-theme="dark"] .tw-bg-white {
  background-color: #131822 !important;
  color: #d1d5db !important;
}
:root[data-theme="dark"] .tw-bg-gray-50,
:root[data-theme="dark"] .tw-bg-gray-100,
:root[data-theme="dark"] .tw-bg-gray-200 {
  background-color: #0a0e14 !important;
  color: #d1d5db !important;
}
:root[data-theme="dark"] .tw-text-gray-900,
:root[data-theme="dark"] .tw-text-black {
  color: #f3f4f6 !important;
}
:root[data-theme="dark"] .tw-text-gray-700,
:root[data-theme="dark"] .tw-text-gray-800 {
  color: #d1d5db !important;
}
:root[data-theme="dark"] .tw-text-gray-500,
:root[data-theme="dark"] .tw-text-gray-600 {
  color: #9ca3af !important;
}
:root[data-theme="dark"] .tw-border-gray-100,
:root[data-theme="dark"] .tw-border-gray-200,
:root[data-theme="dark"] .tw-border-gray-300 {
  border-color: rgba(255,255,255,.08) !important;
}

/* TinyMCE / éditeurs en dark */
:root[data-theme="dark"] .tox.tox-tinymce {
  background: #131822 !important;
  border-color: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .tox .tox-toolbar,
:root[data-theme="dark"] .tox .tox-toolbar__overflow,
:root[data-theme="dark"] .tox .tox-toolbar__primary,
:root[data-theme="dark"] .tox .tox-menubar,
:root[data-theme="dark"] .tox .tox-edit-area__iframe {
  background-color: #1a2030 !important;
}
:root[data-theme="dark"] .tox .tox-mbtn,
:root[data-theme="dark"] .tox .tox-tbtn { color: #d1d5db !important; }

/* Page Footer */
:root[data-theme="dark"] .main-footer,
:root[data-theme="dark"] footer {
  background: #0a0e14 !important;
  color: #6b7280 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* Tooltips & popovers */
:root[data-theme="dark"] .tooltip-inner {
  background: #1a2030 !important;
  color: #f3f4f6 !important;
}

/* Logo: en dark, on garde le fond blanc du badge avec un ring discret */
:root[data-theme="dark"] .swv-sidebar__logo-icon > img {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* ============================================================
   5f) VALIDATION (jQuery Validate / Bootstrap) — toujours visible
   ============================================================ */

/* Erreurs de validation (jquery.validate) */
label.error,
.error-message,
span.help-block.error,
.help-block.error,
.invalid-feedback,
.text-danger,
.has-error .help-block {
  display: block !important;
  color: #ef4444 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Champs en erreur : bordure rouge */
.has-error .form-control,
.form-control.error,
input.error,
select.error,
textarea.error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.12) !important;
}

/* Étoile rouge des champs requis (asterix) bien visible */
.required, .text-danger, .asterix {
  color: #ef4444 !important;
}

/* Astérisque ajouté par .form-group label[for] */
.form-group label .text-danger,
.form-group label .required {
  font-weight: 700 !important;
}

/* ============================================================
   5g) BOUTONS DE SOUMISSION PRINCIPAUX — bien marqués
   (DaisyUI primary, ladda, submit_product_form)
   ============================================================ */

.tw-dw-btn-primary {
  background-color: var(--w-brand) !important;
  border-color: var(--w-brand) !important;
  color: #fff !important;
}
.tw-dw-btn-primary:hover {
  background-color: var(--w-brand-hover) !important;
  border-color: var(--w-brand-hover) !important;
  color: #fff !important;
}

/* Garantir que les <button type="submit"> et <a class="btn"> restent cliquables */
button:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
a.btn,
a.tw-dw-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Disabled : grisé mais visiblement inactif (et non confondu avec un outline) */
button:disabled,
.tw-dw-btn[disabled],
.tw-dw-btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Empêcher tout dataTables_processing « fantôme » d'intercepter les clics
   après que DataTables ait fini.  Quand visible, position absolue centrée. */
.dataTables_processing {
  display: block;
}
.dataTables_processing[style*="display: none"],
.dataTables_processing[style*="display:none"] {
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Header insertions Window : garantir type=button comportement */
.swv-window-toggle,
.swv-window-flag {
  /* type="button" déjà dans le HTML, ceci est défensif */
  -webkit-appearance: none;
  appearance: none;
}

/* ============================================================
   5h) DROPDOWN MENUS — style capture (icônes bleues, hover bleu)
   ============================================================ */

/* Conteneur — carte blanche épurée */
.dropdown-menu {
  min-width: 210px !important;
  padding: 6px !important;
  margin: 5px 0 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.13),
              0 4px 10px rgba(15,23,42,.07) !important;
  font-size: 13.5px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  list-style: none !important;
  z-index: 1050 !important;
}

/* Reset li */
.dropdown-menu > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Item lien — espacement généreux */
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 9px 12px !important;
  color: #1e293b !important;
  background: transparent !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background .12s ease, color .12s ease, border-color .12s ease !important;
  cursor: pointer !important;
}

/* Icônes — grandes et bleues au repos (comme la capture) */
.dropdown-menu > li > a > i,
.dropdown-menu > li > a > svg,
.dropdown-menu .dropdown-item > i,
.dropdown-menu .dropdown-item > svg {
  width: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  font-size: 16px !important;
  text-align: center !important;
  color: #3b82f6 !important;       /* bleu au repos — comme la capture */
  transition: color .12s ease !important;
  line-height: 1 !important;
}

/* Hover — fond bleu-100, texte bleu foncé, icône bleu foncé */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: #dbeafe !important;   /* blue-100 — comme la capture */
  color: #1d4ed8 !important;        /* blue-700 — lisible et contrasté */
  border-color: transparent !important;
  text-decoration: none !important;
}
.dropdown-menu > li > a:hover > i,
.dropdown-menu > li > a:focus > i,
.dropdown-menu > li > a:hover > svg,
.dropdown-menu > li > a:focus > svg,
.dropdown-menu .dropdown-item:hover > i,
.dropdown-menu .dropdown-item:focus > i {
  color: #1d4ed8 !important;
}

/* Premier item — état actif/sélectionné avec bordure bleue (comme la capture) */
.dropdown-menu > li:first-child > a,
.dropdown-menu > li.active > a,
.dropdown-menu .dropdown-item.active {
  background: #eff6ff !important;   /* blue-50 */
  color: #2563eb !important;
  border-color: #bfdbfe !important; /* blue-200 */
}
.dropdown-menu > li:first-child > a > i,
.dropdown-menu > li.active > a > i,
.dropdown-menu > li:first-child > a > svg,
.dropdown-menu .dropdown-item.active > i {
  color: #2563eb !important;
}
.dropdown-menu > li:first-child > a:hover,
.dropdown-menu > li.active > a:hover {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
}

/* Items destructifs — rouge */
.dropdown-menu > li > a.delete-product,
.dropdown-menu > li > a.text-danger,
.dropdown-menu .dropdown-item.text-danger {
  color: #dc2626 !important;
}
.dropdown-menu > li > a.delete-product > i,
.dropdown-menu > li > a.text-danger > i,
.dropdown-menu .dropdown-item.text-danger > i,
.dropdown-menu > li > a.delete-product > svg,
.dropdown-menu > li > a.text-danger > svg {
  color: #ef4444 !important;
}
.dropdown-menu > li > a.delete-product:hover,
.dropdown-menu > li > a.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}
.dropdown-menu > li > a.delete-product:hover > i,
.dropdown-menu > li > a.text-danger:hover > i {
  color: #dc2626 !important;
}

/* Divider fin */
.dropdown-menu > li.divider,
.dropdown-menu .divider,
.dropdown-menu .dropdown-divider {
  height: 1px !important;
  margin: 5px 4px !important;
  background: #f1f5f9 !important;
  border: none !important;
  list-style: none !important;
  padding: 0 !important;
}

/* Header de section */
.dropdown-menu > li.dropdown-header,
.dropdown-menu .dropdown-header {
  padding: 8px 12px 4px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  background: transparent !important;
}

/* Items disabled */
.dropdown-menu > li.disabled > a,
.dropdown-menu .dropdown-item:disabled,
.dropdown-menu .dropdown-item.disabled {
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: .55 !important;
  pointer-events: none !important;
}
.dropdown-menu > li.disabled > a > i { color: #cbd5e1 !important; }

/* Animation d'entrée */
.dropdown-menu.show,
.open > .dropdown-menu,
.btn-group.open > .dropdown-menu {
  animation: woDropIn .16s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes woDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bouton dropdown-toggle (le déclencheur "Actions") */
.btn-group > .dropdown-toggle,
button.dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.btn-group > .dropdown-toggle .caret,
button.dropdown-toggle .caret {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  border-top: 4px solid currentColor !important;
  border-right: 4px solid transparent !important;
  border-left:  4px solid transparent !important;
  opacity: .7 !important;
}

/* Bouton "Actions" — pill élégant, hover bleu lisible */
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle {
  background: #ffffff !important;
  border: 1.5px solid #c7d2e0 !important;
  color: #374151 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  padding: 0 10px 0 13px !important;
  border-radius: 20px !important;          /* pill */
  height: 28px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  letter-spacing: .025em !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.8) !important;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease !important;
}
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:focus {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
  box-shadow: 0 2px 6px rgba(59,130,246,.16), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transform: translateY(-1px) !important;
}
.btn-group.open .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  border-color: #60a5fa !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15), inset 0 1px 0 rgba(255,255,255,.6) !important;
  transform: translateY(0) !important;
}

/* Dropdown alignement à droite */
.dropdown-menu-right {
  right: 0 !important;
  left: auto !important;
}
.dropdown-menu-left {
  left: 0 !important;
  right: auto !important;
}

/* ============================================================
   5h-bis) BOUTONS EXPORT — icône seule, carré 36×36 (style capture)
   ============================================================ */

/* ── Base commune : carré, fond blanc, texte masqué ── */
.buttons-csv, .buttons-excel, .buttons-print,
.buttons-pdf, .buttons-colvis, .buttons-copy, .dt-export-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 0 !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  outline: none !important;
  letter-spacing: 0 !important;
  user-select: none !important;
  overflow: visible !important;        /* CRITIQUE : ne pas couper l'icône */
  flex-shrink: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.08) !important;
}

/* <span> généré par DataTables : visible mais sans texte —
   l'icône <i> qu'il contient doit rester visible */
.buttons-csv span, .buttons-excel span, .buttons-print span,
.buttons-pdf span, .buttons-colvis span, .buttons-copy span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  color: transparent !important;
  width: 100% !important;
  height: 100% !important;
}

/* Icônes dans le span : taille uniforme */
.buttons-csv span > i, .buttons-csv span > svg, .buttons-csv > i, .buttons-csv > svg,
.buttons-excel span > i, .buttons-excel span > svg, .buttons-excel > i, .buttons-excel > svg,
.buttons-print span > i, .buttons-print span > svg, .buttons-print > i, .buttons-print > svg,
.buttons-pdf span > i, .buttons-pdf span > svg, .buttons-pdf > i, .buttons-pdf > svg,
.buttons-colvis span > i, .buttons-colvis span > svg, .buttons-colvis > i, .buttons-colvis > svg,
.buttons-copy span > i, .buttons-copy span > svg, .buttons-copy > i, .buttons-copy > svg {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
  transition: transform 120ms ease !important;
}

/* Hover/active commun */
.buttons-csv:hover, .buttons-excel:hover, .buttons-print:hover,
.buttons-pdf:hover, .buttons-colvis:hover, .buttons-copy:hover { transform: translateY(-1px) !important; }
.buttons-csv:active, .buttons-excel:active, .buttons-print:active,
.buttons-pdf:active, .buttons-colvis:active, .buttons-copy:active { transform: translateY(0) !important; }
.buttons-csv:hover i, .buttons-csv:hover svg,
.buttons-excel:hover i, .buttons-excel:hover svg,
.buttons-print:hover i, .buttons-print:hover svg,
.buttons-pdf:hover i, .buttons-pdf:hover svg,
.buttons-colvis:hover i, .buttons-colvis:hover svg,
.buttons-copy:hover i, .buttons-copy:hover svg { transform: scale(1.12) !important; }

/* CSV — teal */
.buttons-csv { border-color: #d1fae5 !important; box-shadow: 0 1px 3px rgba(16,185,129,.10) !important; }
.buttons-csv i, .buttons-csv span > i, .buttons-csv svg, .buttons-csv span > svg { color: #10b981 !important; }
.buttons-csv:hover { background: #f0fdf4 !important; border-color: rgba(16,185,129,.4) !important; box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important; }
.buttons-csv:hover i, .buttons-csv:hover span > i, .buttons-csv:hover svg, .buttons-csv:hover span > svg { color: #059669 !important; }

/* Excel — vert */
.buttons-excel { border-color: #bbf7d0 !important; box-shadow: 0 1px 3px rgba(5,150,105,.10) !important; }
.buttons-excel i, .buttons-excel span > i, .buttons-excel svg, .buttons-excel span > svg { color: #059669 !important; }
.buttons-excel:hover { background: #f0fdf4 !important; border-color: rgba(5,150,105,.4) !important; box-shadow: 0 0 0 3px rgba(5,150,105,.12) !important; }
.buttons-excel:hover i, .buttons-excel:hover span > i, .buttons-excel:hover svg, .buttons-excel:hover span > svg { color: #047857 !important; }

/* Print — gris-bleu */
.buttons-print { border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(100,116,139,.10) !important; }
.buttons-print i, .buttons-print span > i, .buttons-print svg, .buttons-print span > svg { color: #64748b !important; }
.buttons-print:hover { background: #f8fafc !important; border-color: rgba(100,116,139,.4) !important; box-shadow: 0 0 0 3px rgba(100,116,139,.10) !important; }
.buttons-print:hover i, .buttons-print:hover span > i, .buttons-print:hover svg, .buttons-print:hover span > svg { color: #475569 !important; }

/* PDF — rouge */
.buttons-pdf { border-color: #fecaca !important; box-shadow: 0 1px 3px rgba(239,68,68,.10) !important; }
.buttons-pdf i, .buttons-pdf span > i, .buttons-pdf svg, .buttons-pdf span > svg { color: #ef4444 !important; }
.buttons-pdf:hover { background: #fef2f2 !important; border-color: rgba(239,68,68,.4) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }
.buttons-pdf:hover i, .buttons-pdf:hover span > i, .buttons-pdf:hover svg, .buttons-pdf:hover span > svg { color: #dc2626 !important; }

/* ColVis — ambre */
.buttons-colvis { border-color: #fde68a !important; box-shadow: 0 1px 3px rgba(245,158,11,.10) !important; }
.buttons-colvis i, .buttons-colvis span > i, .buttons-colvis svg, .buttons-colvis span > svg { color: #f59e0b !important; }
.buttons-colvis:hover, .buttons-colvis.active, .dt-button-active { background: #fffbeb !important; border-color: rgba(245,158,11,.4) !important; box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important; }
.buttons-colvis:hover i, .buttons-colvis:hover span > i, .buttons-colvis:hover svg, .buttons-colvis:hover span > svg, .buttons-colvis.active i { color: #d97706 !important; }

/* Copy — ambre */
.buttons-copy { border-color: #fde68a !important; box-shadow: 0 1px 3px rgba(245,158,11,.10) !important; }
.buttons-copy i, .buttons-copy span > i, .buttons-copy svg, .buttons-copy span > svg { color: #f59e0b !important; }
.buttons-copy:hover { background: #fffbeb !important; border-color: rgba(245,158,11,.4) !important; box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important; }
.buttons-copy:hover i, .buttons-copy:hover span > i, .buttons-copy:hover svg, .buttons-copy:hover span > svg { color: #d97706 !important; }

/* ============================================================
   5i) DROPDOWN — DARK MODE
   ============================================================ */
:root[data-theme="dark"] .dropdown-menu {
  background: #131822 !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.55),
              0 4px 10px rgba(0,0,0,.35) !important;
}
:root[data-theme="dark"] .dropdown-menu > li > a,
:root[data-theme="dark"] .dropdown-menu .dropdown-item {
  color: #e2e8f0 !important;
}
:root[data-theme="dark"] .dropdown-menu > li > a > i,
:root[data-theme="dark"] .dropdown-menu > li > a > svg,
:root[data-theme="dark"] .dropdown-menu .dropdown-item > i {
  color: #60a5fa !important;   /* blue-400 — bleu clair sur fond sombre */
}
:root[data-theme="dark"] .dropdown-menu > li > a:hover,
:root[data-theme="dark"] .dropdown-menu > li > a:focus,
:root[data-theme="dark"] .dropdown-menu .dropdown-item:hover {
  background: rgba(59,130,246,.18) !important;
  color: #93c5fd !important;
}
:root[data-theme="dark"] .dropdown-menu > li > a:hover > i,
:root[data-theme="dark"] .dropdown-menu .dropdown-item:hover > i {
  color: #93c5fd !important;
}
:root[data-theme="dark"] .dropdown-menu > li:first-child > a,
:root[data-theme="dark"] .dropdown-menu > li.active > a,
:root[data-theme="dark"] .dropdown-menu .dropdown-item.active {
  background: rgba(59,130,246,.15) !important;
  color: #93c5fd !important;
  border-color: rgba(59,130,246,.35) !important;
}
:root[data-theme="dark"] .dropdown-menu > li > a.delete-product,
:root[data-theme="dark"] .dropdown-menu > li > a.text-danger {
  color: #fca5a5 !important;
}
:root[data-theme="dark"] .dropdown-menu > li > a.delete-product > i,
:root[data-theme="dark"] .dropdown-menu > li > a.text-danger > i {
  color: #f87171 !important;
}
:root[data-theme="dark"] .dropdown-menu > li > a.delete-product:hover,
:root[data-theme="dark"] .dropdown-menu > li > a.text-danger:hover {
  background: rgba(239,68,68,.18) !important;
  color: #fecaca !important;
}
:root[data-theme="dark"] .dropdown-menu > li.divider,
:root[data-theme="dark"] .dropdown-menu .divider,
:root[data-theme="dark"] .dropdown-menu .dropdown-divider {
  background: rgba(255,255,255,.07) !important;
}
:root[data-theme="dark"] .dropdown-menu > li.dropdown-header,
:root[data-theme="dark"] .dropdown-menu .dropdown-header {
  color: #4b5563 !important;
}
:root[data-theme="dark"] .dropdown-menu > li.disabled > a {
  color: #374151 !important;
}

/* ============================================================
   5j) BOUTONS "AJOUTER / EXCEL / SUCCESS" — STYLE WINDOW
   Pattern legacy : tw-dw-btn tw-bg-gradient-to-r tw-from-X tw-to-Y
                    tw-font-bold tw-text-white tw-border-none tw-rounded-full
   Cible Window : solide, radius 8px, ombre douce, hover slide-up.
   ============================================================ */

/* ── Add primaire (indigo→blue) ──────────────────────────── */
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500 {
  background: var(--w-brand) !important;
  background-image: none !important;
  border: 1px solid var(--w-brand) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  padding: 8px 18px !important;
  height: auto !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, .25),
              0 1px 2px  rgba(15, 23, 42, .06) !important;
  transition: background-color .18s ease,
              box-shadow .18s ease,
              transform .12s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: none !important;
}
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover,
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:focus {
  background: var(--w-brand-hover) !important;
  background-image: none !important;
  border-color: var(--w-brand-hover) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, .35),
              0 1px 2px  rgba(15, 23, 42, .08) !important;
  transform: translateY(-1px) !important;
}
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, .2) !important;
}
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500 svg,
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500 i {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
}

/* Annuler le pill complet (rounded-full) — on garde 8px Window */
.tw-dw-btn.tw-bg-gradient-to-r.tw-rounded-full {
  border-radius: 8px !important;
}

/* ── Excel / Success (emerald→green) ─────────────────────── */
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-emerald-600.tw-to-green-500 {
  background: #10b981 !important;
  background-image: none !important;
  border: 1px solid #10b981 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  height: auto !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, .25),
              0 1px 2px  rgba(15, 23, 42, .06) !important;
  transition: background-color .18s ease,
              box-shadow .18s ease,
              transform .12s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: none !important;
}
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-emerald-600.tw-to-green-500:hover,
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-emerald-600.tw-to-green-500:focus {
  background: #059669 !important;
  background-image: none !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, .35) !important;
  transform: translateY(-1px) !important;
}
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-emerald-600.tw-to-green-500 svg,
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-emerald-600.tw-to-green-500 i {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
}

/* ── Famille DaisyUI tw-dw-btn-{color} : style Window propre ── */
.tw-dw-btn.tw-dw-btn-primary {
  background: var(--w-brand) !important;
  border-color: var(--w-brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  min-height: 38px !important;
  text-transform: none !important;
  box-shadow: 0 2px 6px rgba(59,130,246,.18) !important;
  transition: background-color .18s, box-shadow .18s, transform .12s !important;
}
.tw-dw-btn.tw-dw-btn-primary:hover {
  background: var(--w-brand-hover) !important;
  border-color: var(--w-brand-hover) !important;
  box-shadow: 0 4px 12px rgba(59,130,246,.30) !important;
  transform: translateY(-1px) !important;
}

.tw-dw-btn.tw-dw-btn-secondary {
  background: #475569 !important;
  border-color: #475569 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  text-transform: none !important;
}
.tw-dw-btn.tw-dw-btn-secondary:hover {
  background: #334155 !important;
  border-color: #334155 !important;
  transform: translateY(-1px) !important;
}

.tw-dw-btn.tw-dw-btn-success {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  text-transform: none !important;
}
.tw-dw-btn.tw-dw-btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  transform: translateY(-1px) !important;
}

.tw-dw-btn.tw-dw-btn-info:not(.dropdown-toggle) {
  background: #06b6d4 !important;
  border-color: #06b6d4 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  text-transform: none !important;
}
.tw-dw-btn.tw-dw-btn-info:not(.dropdown-toggle):hover {
  background: #0891b2 !important;
  border-color: #0891b2 !important;
  transform: translateY(-1px) !important;
}

.tw-dw-btn.tw-dw-btn-warning:not(.tw-dw-btn-outline) {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  text-transform: none !important;
}
.tw-dw-btn.tw-dw-btn-warning:not(.tw-dw-btn-outline):hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  transform: translateY(-1px) !important;
}

.tw-dw-btn.tw-dw-btn-error:not(.tw-dw-btn-outline),
.tw-dw-btn.tw-dw-btn-danger:not(.tw-dw-btn-outline) {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  text-transform: none !important;
}
.tw-dw-btn.tw-dw-btn-error:not(.tw-dw-btn-outline):hover,
.tw-dw-btn.tw-dw-btn-danger:not(.tw-dw-btn-outline):hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px) !important;
}

/* ── DARK MODE pour ces boutons ──────────────────────────── */
:root[data-theme="dark"] .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500 {
  box-shadow: 0 4px 12px rgba(59, 130, 246, .35),
              0 0 0 1px rgba(255,255,255,.04) !important;
}
:root[data-theme="dark"] .tw-dw-btn.tw-bg-gradient-to-r.tw-from-emerald-600.tw-to-green-500 {
  box-shadow: 0 4px 12px rgba(16, 185, 129, .35),
              0 0 0 1px rgba(255,255,255,.04) !important;
}

/* ============================================================
   5k) ONGLETS / TABS — Style Window (capture 1)
   Pattern : .nav-tabs-custom > .nav.nav-tabs > li.active > a
   Cible : tab actif = pill bleu plein, tabs inactifs = texte avec icône
   ============================================================ */

.nav-tabs-custom {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 16px !important;
}

.nav-tabs-custom > .nav-tabs,
.nav.nav-tabs {
  background: transparent !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.nav-tabs-custom > .nav-tabs > li,
.nav.nav-tabs > li {
  margin: 0 !important;
  border: none !important;
  list-style: none !important;
  background: transparent !important;
  float: none !important;
}

.nav-tabs-custom > .nav-tabs > li > a,
.nav.nav-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  text-decoration: none !important;
  position: relative !important;
  transition: background .15s, color .15s !important;
}

.nav-tabs-custom > .nav-tabs > li > a > i,
.nav.nav-tabs > li > a > i,
.nav-tabs-custom > .nav-tabs > li > a > svg,
.nav.nav-tabs > li > a > svg {
  font-size: 14px !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: currentColor !important;
}

/* Hover (inactif) */
.nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
.nav.nav-tabs > li:not(.active) > a:hover {
  background: rgba(59,130,246,.08) !important;
  color: var(--w-brand) !important;
}

/* Tab actif — pill bleu plein */
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover,
.nav-tabs-custom > .nav-tabs > li.active > a:focus,
.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li.active > a:hover,
.nav.nav-tabs > li.active > a:focus,
.nav.nav-tabs > li > a.active {
  background: var(--w-brand) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(59, 130, 246, .25) !important;
  border-radius: 8px !important;
}

/* Tab disabled */
.nav.nav-tabs > li.disabled > a {
  color: #9ca3af !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: .55 !important;
}

/* Contenu des tabs (.tab-content) */
.nav-tabs-custom > .tab-content,
.tab-content {
  background: transparent !important;
  padding: 8px 0 !important;
  border: none !important;
}

/* Boutons d'action dans nav-tabs (cas Restaurant/POS) */
.nav-tabs-custom > .nav-tabs > li.pull-right {
  margin-left: auto !important;
}

/* Dark mode tabs */
:root[data-theme="dark"] .nav-tabs-custom > .nav-tabs,
:root[data-theme="dark"] .nav.nav-tabs {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a,
:root[data-theme="dark"] .nav.nav-tabs > li > a {
  color: #9ca3af !important;
}
:root[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
:root[data-theme="dark"] .nav.nav-tabs > li:not(.active) > a:hover {
  background: rgba(59,130,246,.15) !important;
  color: #93c5fd !important;
}

/* ----------------------------------------------------------------
   5k-bis) ONGLETS JUSTIFIÉS — fix design cassé (contact/show, user/show)
   Pattern : .nav.nav-tabs.nav-justified (Bootstrap 3 attendait display:table)
   Problème : le flex hérité de 5k laissait les onglets serrés à gauche.
   Cible  : largeur égale, centrage, lisibilité, pill bleu actif respecté.
   ---------------------------------------------------------------- */
.nav-tabs-custom > .nav-tabs.nav-justified,
.nav.nav-tabs.nav-justified {
  display: flex !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: stretch !important;
  margin: 0 0 14px 0 !important;
  padding: 4px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 10px 10px 0 0 !important;
}

.nav-tabs-custom > .nav-tabs.nav-justified > li,
.nav.nav-tabs.nav-justified > li {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  width: auto !important;
  margin: 0 !important;
  text-align: center !important;
}

.nav-tabs-custom > .nav-tabs.nav-justified > li > a,
.nav.nav-tabs.nav-justified > li > a {
  width: 100% !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #4b5563 !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background .15s, color .15s, box-shadow .2s !important;
}

.nav-tabs-custom > .nav-tabs.nav-justified > li > a > i,
.nav.nav-tabs.nav-justified > li > a > i {
  margin-right: 6px !important;
  font-size: 14px !important;
}

/* Onglet actif justifié — pill bleu plein, ombré */
.nav-tabs-custom > .nav-tabs.nav-justified > li.active > a,
.nav-tabs-custom > .nav-tabs.nav-justified > li.active > a:hover,
.nav-tabs-custom > .nav-tabs.nav-justified > li.active > a:focus,
.nav.nav-tabs.nav-justified > li.active > a,
.nav.nav-tabs.nav-justified > li.active > a:hover,
.nav.nav-tabs.nav-justified > li.active > a:focus {
  background: var(--w-brand) !important;
  color: #ffffff !important;
  border: 1px solid var(--w-brand) !important;
  box-shadow: 0 4px 10px rgba(59, 130, 246, .25) !important;
  border-radius: 8px !important;
}

/* Hover non-actif justifié */
.nav-tabs-custom > .nav-tabs.nav-justified > li:not(.active) > a:hover,
.nav.nav-tabs.nav-justified > li:not(.active) > a:hover {
  background: #ffffff !important;
  color: var(--w-brand) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

/* Tab-content pour conteneurs justifiés - padding & background propre */
.nav-tabs-custom:has(> .nav-tabs.nav-justified) > .tab-content {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  padding: 18px !important;
}

/* Dark mode — onglets justifiés */
:root[data-theme="dark"] .nav-tabs-custom > .nav-tabs.nav-justified,
:root[data-theme="dark"] .nav.nav-tabs.nav-justified {
  background: rgba(255,255,255,.03) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .nav-tabs-custom > .nav-tabs.nav-justified > li > a,
:root[data-theme="dark"] .nav.nav-tabs.nav-justified > li > a {
  color: #cbd5e1 !important;
}
:root[data-theme="dark"] .nav-tabs-custom > .nav-tabs.nav-justified > li:not(.active) > a:hover,
:root[data-theme="dark"] .nav.nav-tabs.nav-justified > li:not(.active) > a:hover {
  background: rgba(255,255,255,.05) !important;
  color: #93c5fd !important;
  border-color: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .nav-tabs-custom:has(> .nav-tabs.nav-justified) > .tab-content {
  background: #0f172a !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Responsive — sur petit écran on passe en colonnes empilables */
@media (max-width: 768px) {
  .nav-tabs-custom > .nav-tabs.nav-justified,
  .nav.nav-tabs.nav-justified {
    flex-direction: column !important;
  }
  .nav-tabs-custom > .nav-tabs.nav-justified > li,
  .nav.nav-tabs.nav-justified > li {
    flex: 0 0 auto !important;
  }
}

/* ============================================================
   5l) BOUTONS D'EXPORTATION — DataTables Buttons (REFONTE v2)
   Pattern : .dt-buttons > .dt-button (CSV, Excel, PDF, Print, Visibility)
   Style icône seule, carré 36×36, conteneur centré.
   ============================================================ */

.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;            /* centrage des boutons */
  align-items: center;
  gap: 8px;
  margin: 0 0 1rem 0;
  padding: 0;
  background: transparent;
  min-width: 0;
  overflow: visible;
}
.dt-buttons.btn-group { display: inline-flex; }

/* Séparateur visuel optionnel entre groupes (export vs visibility) */
.dt-buttons > .dt-button.buttons-collection {
  margin-left: var(--sp-1, 4px);
  position: relative;
}
.dt-buttons > .dt-button.buttons-collection::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-2, 8px) / 2 - 0.5px);
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--c-border-strong, #e5e7eb);
}

/* Chaque bouton d'export — icône seule, carré 36×36 */
.dt-buttons .dt-button,
.dt-buttons .btn,
.dt-buttons > .dt-button.btn,
.dt-buttons > a.dt-button,
.dt-buttons > button.dt-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  gap: 0 !important;
  margin: 0;

  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;

  color: transparent !important;            /* masque le texte nu */
  font-size: 0 !important;                  /* masque le texte nu */
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-shadow: none !important;
  text-transform: none;
  white-space: nowrap;
  overflow: visible !important;             /* CRITIQUE : ne pas couper l'icône */
  flex-shrink: 0 !important;

  box-shadow: 0 1px 3px rgba(15,23,42,.08) !important;
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* <span> généré par DataTables : visible mais sans texte —
   l'icône <i> qu'il contient doit rester visible */
.dt-buttons .dt-button > span,
.dt-buttons .btn > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;                  /* cache le texte du span */
  color: transparent !important;            /* cache le texte du span */
  width: 100% !important;
  height: 100% !important;
}

/* Icônes dans le span : taille, couleur, visibilité restaurées */
.dt-buttons .dt-button > span > i,
.dt-buttons .dt-button > span > svg,
.dt-buttons .dt-button > i,
.dt-buttons .dt-button > svg,
.dt-buttons .btn > span > i,
.dt-buttons .btn > i {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
  color: inherit !important;                /* sera surchargé par classe spécifique */
  transition: color 120ms ease, transform 120ms ease;
}

/* Hover */
.dt-buttons .dt-button:hover,
.dt-buttons .btn:hover,
.dt-buttons > a.dt-button:hover,
.dt-buttons > button.dt-button:hover {
  transform: translateY(-1px) !important;
}
.dt-buttons .dt-button:hover > i,
.dt-buttons .dt-button:hover > svg,
.dt-buttons .btn:hover > i {
  transform: scale(1.12) !important;
}

/* Focus visible (keyboard) */
.dt-buttons .dt-button:focus-visible,
.dt-buttons .btn:focus-visible {
  border-color: var(--c-brand-500, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}

/* Active / pressed */
.dt-buttons .dt-button.active,
.dt-buttons .dt-button:active,
.dt-buttons .btn.active,
.dt-buttons .btn:active {
  transform: translateY(0) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.10) !important;
}

/* Disabled */
.dt-buttons .dt-button.disabled,
.dt-buttons .dt-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive : déjà icon-only, rien de supplémentaire nécessaire */
@media (max-width: 640px) {
  .dt-buttons .dt-button {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Bouton "Visibilité de la colonne" (collection) */
.dt-buttons .buttons-collection {
  /* hérite du style ci-dessus */
}
.dt-button-collection {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12) !important;
  padding: 6px !important;
  min-width: 220px !important;
}
.dt-button-collection .dt-button {
  display: flex !important;
  width: 100% !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  text-align: left !important;
  box-shadow: none !important;
}
.dt-button-collection .dt-button:hover {
  background: var(--w-brand-soft) !important;
  border-color: transparent !important;
  color: var(--w-brand-hover) !important;
  transform: none !important;
}
.dt-button-collection .dt-button.active {
  background: var(--w-brand-soft) !important;
  color: var(--w-brand) !important;
  border-color: transparent !important;
}

/* Dark mode dt-buttons — icône seule */
:root[data-theme="dark"] .dt-buttons .dt-button,
:root[data-theme="dark"] .dt-buttons .btn {
  background: #1e293b !important;
  border-color: #2d3748 !important;
  color: transparent !important;          /* texte toujours masqué */
  font-size: 0 !important;
}
:root[data-theme="dark"] .dt-buttons .dt-button > span,
:root[data-theme="dark"] .dt-buttons .btn > span { display: none !important; }

/* Icônes dark : conservent leur couleur spécifique par type */
:root[data-theme="dark"] .dt-buttons .buttons-csv > i,
:root[data-theme="dark"] .dt-buttons .buttons-csv > svg { color: #10b981 !important; }
:root[data-theme="dark"] .dt-buttons .buttons-excel > i,
:root[data-theme="dark"] .dt-buttons .buttons-excel > svg { color: #059669 !important; }
:root[data-theme="dark"] .dt-buttons .buttons-print > i,
:root[data-theme="dark"] .dt-buttons .buttons-print > svg { color: #94a3b8 !important; }
:root[data-theme="dark"] .dt-buttons .buttons-pdf > i,
:root[data-theme="dark"] .dt-buttons .buttons-pdf > svg { color: #f87171 !important; }
:root[data-theme="dark"] .dt-buttons .buttons-colvis > i,
:root[data-theme="dark"] .dt-buttons .buttons-colvis > svg { color: #fbbf24 !important; }
:root[data-theme="dark"] .dt-buttons .buttons-copy > i,
:root[data-theme="dark"] .dt-buttons .buttons-copy > svg { color: #fbbf24 !important; }

:root[data-theme="dark"] .dt-buttons .dt-button:hover,
:root[data-theme="dark"] .dt-buttons .btn:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.15) !important;
}
:root[data-theme="dark"] .dt-button-collection {
  background: #131822 !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
}
:root[data-theme="dark"] .dt-button-collection .dt-button {
  color: #d1d5db !important;
}
:root[data-theme="dark"] .dt-button-collection .dt-button:hover {
  background: rgba(59,130,246,.15) !important;
  color: #93c5fd !important;
}

/* ============================================================
   5l-bis) BOUTONS SOFT WINDOW (cs-soft variants)
   Appliqués par dt-buttons-init.js et utilisables ailleurs.
   Pattern Window "withIconSoft" : pastel + icône colorée.
   ============================================================ */

/* Container injecté par dt-buttons-init.js si la table n'a pas
   son propre placement de boutons. */
.cs-dt-buttons-host {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 12px 0 !important;
}
.cs-dt-buttons {
  display: inline-flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Base commune des boutons soft (override la pill outline si présente) */
.dt-buttons .btn.cs-soft,
.dt-buttons .dt-button.cs-soft,
.cs-dt-buttons .btn.cs-soft,
.cs-dt-buttons .dt-button.cs-soft,
.btn.cs-soft {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  cursor: pointer !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
  outline: none !important;
}

.btn.cs-soft > i,
.dt-buttons .btn.cs-soft > i,
.cs-dt-buttons .btn.cs-soft > i,
.btn.cs-soft > svg,
.btn.cs-soft > span > i {
  font-size: 13px !important;
  width: 14px !important;
  flex-shrink: 0 !important;
  transition: color .18s ease, transform .12s ease !important;
}

/* --- Variantes (palette Window) --- */

/* Primary (bleu) — CSV */
.btn.cs-soft.cs-soft-primary {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}
.btn.cs-soft.cs-soft-primary > i { color: #2563eb !important; }
.btn.cs-soft.cs-soft-primary:hover {
  background: #bfdbfe !important;
  color: #1e40af !important;
  box-shadow: 0 4px 12px rgba(59,130,246,.2) !important;
  transform: translateY(-1px) !important;
}

/* Secondary (gris) — Visibilité */
.btn.cs-soft.cs-soft-secondary {
  background: #e5e7eb !important;
  color: #374151 !important;
}
.btn.cs-soft.cs-soft-secondary > i { color: #6b7280 !important; }
.btn.cs-soft.cs-soft-secondary:hover {
  background: #d1d5db !important;
  color: #111827 !important;
  box-shadow: 0 4px 12px rgba(75,85,99,.18) !important;
  transform: translateY(-1px) !important;
}

/* Success (vert) — Excel */
.btn.cs-soft.cs-soft-success {
  background: #d1fae5 !important;
  color: #047857 !important;
}
.btn.cs-soft.cs-soft-success > i { color: #10b981 !important; }
.btn.cs-soft.cs-soft-success:hover {
  background: #a7f3d0 !important;
  color: #065f46 !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.2) !important;
  transform: translateY(-1px) !important;
}

/* Danger (rouge) — PDF */
.btn.cs-soft.cs-soft-danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}
.btn.cs-soft.cs-soft-danger > i { color: #ef4444 !important; }
.btn.cs-soft.cs-soft-danger:hover {
  background: #fecaca !important;
  color: #991b1b !important;
  box-shadow: 0 4px 12px rgba(239,68,68,.2) !important;
  transform: translateY(-1px) !important;
}

/* Warning (orange) — Imprimer */
.btn.cs-soft.cs-soft-warning {
  background: #fef3c7 !important;
  color: #b45309 !important;
}
.btn.cs-soft.cs-soft-warning > i { color: #f59e0b !important; }
.btn.cs-soft.cs-soft-warning:hover {
  background: #fde68a !important;
  color: #92400e !important;
  box-shadow: 0 4px 12px rgba(245,158,11,.2) !important;
  transform: translateY(-1px) !important;
}

/* Info (cyan) */
.btn.cs-soft.cs-soft-info {
  background: #cffafe !important;
  color: #0e7490 !important;
}
.btn.cs-soft.cs-soft-info > i { color: #06b6d4 !important; }
.btn.cs-soft.cs-soft-info:hover {
  background: #a5f3fc !important;
  color: #155e75 !important;
  box-shadow: 0 4px 12px rgba(6,182,212,.2) !important;
  transform: translateY(-1px) !important;
}

/* Dark (gris très foncé) */
.btn.cs-soft.cs-soft-dark {
  background: #e5e7eb !important;
  color: #111827 !important;
}
.btn.cs-soft.cs-soft-dark > i { color: #374151 !important; }
.btn.cs-soft.cs-soft-dark:hover {
  background: #d1d5db !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(17,24,39,.2) !important;
  transform: translateY(-1px) !important;
}

/* Active state pour tous les variants */
.btn.cs-soft.active,
.btn.cs-soft:active {
  transform: translateY(0) !important;
  filter: brightness(.96) !important;
}

/* Dark mode pour les boutons soft */
:root[data-theme="dark"] .btn.cs-soft.cs-soft-primary {
  background: rgba(59,130,246,.18) !important;
  color: #93c5fd !important;
}
:root[data-theme="dark"] .btn.cs-soft.cs-soft-primary > i { color: #60a5fa !important; }
:root[data-theme="dark"] .btn.cs-soft.cs-soft-secondary {
  background: rgba(255,255,255,.06) !important;
  color: #d1d5db !important;
}
:root[data-theme="dark"] .btn.cs-soft.cs-soft-secondary > i { color: #9ca3af !important; }
:root[data-theme="dark"] .btn.cs-soft.cs-soft-success {
  background: rgba(16,185,129,.18) !important;
  color: #6ee7b7 !important;
}
:root[data-theme="dark"] .btn.cs-soft.cs-soft-success > i { color: #34d399 !important; }
:root[data-theme="dark"] .btn.cs-soft.cs-soft-danger {
  background: rgba(239,68,68,.18) !important;
  color: #fca5a5 !important;
}
:root[data-theme="dark"] .btn.cs-soft.cs-soft-danger > i { color: #f87171 !important; }
:root[data-theme="dark"] .btn.cs-soft.cs-soft-warning {
  background: rgba(245,158,11,.18) !important;
  color: #fcd34d !important;
}
:root[data-theme="dark"] .btn.cs-soft.cs-soft-warning > i { color: #fbbf24 !important; }
:root[data-theme="dark"] .btn.cs-soft.cs-soft-info {
  background: rgba(6,182,212,.18) !important;
  color: #67e8f9 !important;
}
:root[data-theme="dark"] .btn.cs-soft.cs-soft-info > i { color: #22d3ee !important; }
:root[data-theme="dark"] .btn.cs-soft.cs-soft-dark {
  background: rgba(255,255,255,.06) !important;
  color: #f3f4f6 !important;
}

/* ============================================================
   5m) ACCORDÉONS sell/create + sell/edit (capture 3)
   Cibles : #toggle-global-discount, #toggle-global-shipping,
            #toggle-global-payment + leurs blocs slideToggle
   Pattern : .box.box-solid > .box-header (fait le rôle de header)
   ============================================================ */

/* Conteneur accordéon = .box.box-solid avec un toggle anchor à l'intérieur
   Capture 1 : pas de bordure visible, simple drop-shadow soft, radius 12px,
   intérieur aéré (24px+) pour respiration. */
.box.box-solid:has(#toggle-global-discount),
.box.box-solid:has(#toggle-global-shipping),
.box.box-solid:has(#toggle-global-payment) {
  background: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease !important;
}
.box.box-solid:has(#toggle-global-discount):hover,
.box.box-solid:has(#toggle-global-shipping):hover,
.box.box-solid:has(#toggle-global-payment):hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04) !important;
}

/* En-tête épuré : pas de séparateur, fond uni, padding plus généreux */
.box.box-solid:has(#toggle-global-discount) .box-header,
.box.box-solid:has(#toggle-global-shipping) .box-header,
.box.box-solid:has(#toggle-global-payment) .box-header {
  background: #ffffff !important;
  padding: 18px 24px !important;
  border-bottom: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  user-select: none !important;
}

/* Titre : typographie soft, hiérarchie claire */
.box.box-solid:has(#toggle-global-discount) .box-title,
.box.box-solid:has(#toggle-global-shipping) .box-title,
.box.box-solid:has(#toggle-global-payment) .box-title {
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Toggle anchor : pastille discrète, chevron minimaliste */
#toggle-global-discount,
#toggle-global-shipping,
#toggle-global-payment {
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f3f4f6 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
  margin: 0 !important;
}
#toggle-global-discount:hover,
#toggle-global-shipping:hover,
#toggle-global-payment:hover {
  background: var(--w-brand-soft) !important;
  color: var(--w-brand) !important;
}

/* Icônes des toggles : les filled squares (fa-plus-square) sont remplacés
   par des chevrons line à l'utilisation, mais on couvre les deux familles. */
#toggle-global-discount-icon,
#toggle-global-shipping-icon,
#toggle-global-payment-icon {
  font-size: 12px !important;
  font-weight: 900 !important;
  transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
}

/* Animation chevron : rotation lors de l'ouverture */
.fa-chevron-up#toggle-global-discount-icon,
.fa-chevron-up#toggle-global-shipping-icon,
.fa-chevron-up#toggle-global-payment-icon { color: var(--w-brand) !important; }

.fa-plus-square#toggle-global-discount-icon::before,
.fa-plus-square#toggle-global-shipping-icon::before,
.fa-plus-square#toggle-global-payment-icon::before { content: '\f067' !important; }
.fa-minus-square#toggle-global-discount-icon::before,
.fa-minus-square#toggle-global-shipping-icon::before,
.fa-minus-square#toggle-global-payment-icon::before { content: '\f068' !important; color: var(--w-brand) !important; }

/* Bloc déroulant : padding interne respiration (capture 1) */
#global_discount_block,
#global_shipping_block,
#global_payment_block {
  padding: 6px 24px 22px 24px !important;
  margin-top: 0 !important;
}

/* Champs à l'intérieur des blocs : un peu plus de padding pour respiration */
#global_discount_block .form-control,
#global_shipping_block .form-control,
#global_payment_block .form-control,
#global_discount_block .select2-selection,
#global_shipping_block .select2-selection,
#global_payment_block .select2-selection {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  min-height: 38px !important;
}

/* Dark mode accordéons */
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-discount),
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-shipping),
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-payment) {
  background: #131822 !important;
  border-color: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-discount) .box-header,
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-shipping) .box-header,
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-payment) .box-header {
  background: #131822 !important;
}
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-discount) .box-title,
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-shipping) .box-title,
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-payment) .box-title {
  color: #f3f4f6 !important;
}

/* ============================================================
   5n) AMÉLIORATIONS PRO — sidebar & header
   ============================================================ */

/* Sidebar : padding et espacements affinés */
.swv-sidebar__scroll {
  padding: 8px 0 16px !important;
}
.swv-sidebar .swv-nav__section:not(:first-child) {
  margin-top: 14px !important;
}
.swv-sidebar .swv-nav__section {
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  color: #4b5563 !important;
  opacity: .85 !important;
}

/* Sidebar : indicateur left bar pour item actif (style Window pro) */
.swv-sidebar .swv-nav__link.active::before,
.swv-sidebar .swv-nav__dropdown-toggle.has-active::before {
  content: '' !important;
  position: absolute !important;
  left: -9px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  background: #ffffff !important;
  border-radius: 0 3px 3px 0 !important;
  opacity: .7 !important;
}

/* Sidebar logo : mise en avant subtile */
.swv-sidebar__logo {
  position: relative !important;
}
.swv-sidebar__logo::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 16px !important;
  right: 16px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.1) 50%, transparent 100%) !important;
}

/* Header : ombre fine sous header */
#swv-header {
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.18) !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Header search input style (si présent) */
#swv-header input[type="text"],
#swv-header input[type="search"] {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  color: var(--w-text-strong) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  transition: background .15s, border-color .15s !important;
}
#swv-header input[type="text"]::placeholder,
#swv-header input[type="search"]::placeholder {
  color: var(--w-text-muted) !important;
}
#swv-header input[type="text"]:focus,
#swv-header input[type="search"]:focus {
  background: rgba(255,255,255,.10) !important;
  border-color: var(--w-brand) !important;
  outline: none !important;
}

/* Toggle btn (sandwich) — micro ajustement */
#swv-header .swv-toggle-btn {
  width: 38px !important;
  height: 38px !important;
}

/* Avatar utilisateur : ring discret */
#swv-header .swv-user-trigger img,
#swv-header .swv-avatar {
  box-shadow: 0 0 0 2px rgba(59,130,246,.2) !important;
  transition: box-shadow .15s !important;
}
#swv-header .swv-user-trigger:hover img,
#swv-header .swv-user-trigger:hover .swv-avatar {
  box-shadow: 0 0 0 3px rgba(59,130,246,.35) !important;
}

/* ============================================================
   5o) SIDEBAR — largeur élargie + bullet sous-menu repositionné
       (correction visuelle "le point du sous-menu est mal placé"
       + agrandissement pour mieux afficher les libellés FR longs)
   ============================================================ */
.swv-sidebar,
#swv-sidebar {
  width: 280px !important;
  min-width: 280px !important;
}

/* Le sous-menu avec barre verticale plus marquée + plus de padding interne */
.swv-sidebar .swv-nav__submenu {
  padding: 6px 0 8px 22px !important;
  margin-left: 28px !important;
  margin-right: 6px !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
  position: relative !important;
}

/* Sublink : bullet positionné absolument à GAUCHE */
.swv-sidebar .swv-nav__sublink {
  padding: 8px 14px 8px 22px !important;
  position: relative !important;
  gap: 0 !important;
  display: block !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.swv-sidebar .swv-nav__sublink::before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important;
  transition: background .15s, transform .15s, box-shadow .15s !important;
}

.swv-sidebar .swv-nav__sublink:hover::before {
  background: var(--w-brand) !important;
  transform: translateY(-50%) scale(1.3) !important;
}

/* ✅ ACTIF : UNIQUEMENT texte bleu, PAS de fond */
.swv-sidebar .swv-nav__sublink.active {
  background: transparent !important;
  color: var(--w-brand) !important;
  font-weight: 600 !important;
}
.swv-sidebar .swv-nav__sublink.active::before {
  background: var(--w-brand) !important;
  transform: translateY(-50%) scale(1.4) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,.25) !important;
}

/* Body content shift quand sidebar = 280 */
body.swv-modern .swv-content,
body.swv-modern .swv-main,
body.swv-modern #content-wrapper {
  margin-left: 280px !important;
  transition: margin-left .25s ease !important;
}
body.sidebar-collapse.swv-modern .swv-content,
body.sidebar-collapse.swv-modern .swv-main,
body.sidebar-collapse.swv-modern #content-wrapper {
  margin-left: 70px !important;
}

/* ============================================================
   5p) HEADER LOGO — affichage amélioré (carte blanche, ombre, taille)
   ============================================================ */
.swv-sidebar__logo {
  height: 72px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.swv-sidebar__logo-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.08) inset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.swv-sidebar__logo-icon > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 8px !important;
  padding: 4px !important;
}
.swv-sidebar__logo-icon > svg {
  width: 26px !important;
  height: 26px !important;
  color: var(--w-brand) !important;
  filter: none !important;
}

.swv-sidebar__logo-name {
  font-size: 17px !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.2) !important;
}
.swv-sidebar__logo-sub {
  font-size: 10.5px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  opacity: .8 !important;
}
.swv-sidebar__logo-dot {
  width: 8px !important;
  height: 8px !important;
}

/* Header top-bar : on harmonise hauteur avec le logo sidebar (72px) */
#swv-header {
  height: 72px !important;
}

/* ============================================================
   5q) ACCORDION BAR — barre titre + icône bloc + bouton +/-
       (utilisé en sell/edit pour la version dynamique JS,
       et stylise le toggle anchor en sell/create)
   ============================================================ */

/* Barre titre des accordéons (créée dynamiquement en édition) */
.cs-accordion-bar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 48px 12px 4px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.cs-accordion-title {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #1f2937 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cs-block-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: var(--w-brand-soft) !important;
  color: var(--w-brand) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
}

/* Toggle button +/- en haut à droite (commun create + edit) */
.cs-accordion-toggle,
#toggle-global-discount.cs-accordion-toggle,
#toggle-global-shipping.cs-accordion-toggle,
#toggle-global-payment.cs-accordion-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--w-brand-soft) !important;
  border: 1px solid rgba(59,130,246,.18) !important;
  border-radius: 8px !important;
  color: var(--w-brand) !important;
  text-decoration: none !important;
  font-size: 18px !important;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s !important;
  cursor: pointer !important;
  z-index: 5 !important;
}
.cs-accordion-toggle:hover {
  background: var(--w-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(59,130,246,.30) !important;
}
.cs-accordion-toggle:active {
  transform: translateY(-50%) scale(.95) !important;
}

/* Pour create.blade.php (le toggle est dans .col-md-12 sans cs-accordion-bar) */
.box.box-solid:has(.cs-accordion-toggle) > div > div > .col-md-12,
.box.box-solid:has(.cs-accordion-toggle) > div > div > div > .col-md-12 {
  position: relative !important;
}

/* Icônes par bloc en sell/create — injecté via :has() + ::before sur box-title */
.box.box-solid:has(#toggle-global-discount) .box-title::before {
  content: "\f295" !important; /* fa-percent */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: var(--w-brand-soft) !important;
  color: var(--w-brand) !important;
  margin-right: 8px !important;
  font-size: 12px !important;
  vertical-align: middle !important;
}
.box.box-solid:has(#toggle-global-shipping) .box-title::before {
  content: "\f0d1" !important; /* fa-truck */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: var(--w-brand-soft) !important;
  color: var(--w-brand) !important;
  margin-right: 8px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
.box.box-solid:has(#toggle-global-payment) .box-title::before {
  content: "\f0d6" !important; /* fa-money-bill */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: var(--w-brand-soft) !important;
  color: var(--w-brand) !important;
  margin-right: 8px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

/* Dark mode — barre accordéon */
:root[data-theme="dark"] .cs-accordion-bar {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .cs-accordion-title {
  color: #f3f4f6 !important;
}
:root[data-theme="dark"] .cs-block-icon,
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-discount) .box-title::before,
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-shipping) .box-title::before,
:root[data-theme="dark"] .box.box-solid:has(#toggle-global-payment) .box-title::before {
  background: rgba(59,130,246,.14) !important;
  color: #60a5fa !important;
}
:root[data-theme="dark"] .cs-accordion-toggle {
  background: rgba(59,130,246,.14) !important;
  border-color: rgba(59,130,246,.25) !important;
  color: #60a5fa !important;
}
:root[data-theme="dark"] .cs-accordion-toggle:hover {
  background: var(--w-brand) !important;
  color: #fff !important;
}

/* ============================================================
   5r) DATATABLES EXPORT BUTTONS — icône seule colorée (final)
       Style "capture 1" : icône carrée 36×36 avec accent couleur :
       CSV teal · Excel vert · Print gris · Colvis ambre · PDF rouge.
       Cette section est en fin de cascade — elle a la priorité.
   ============================================================ */

/* Base : icône seule, carré 36×36, fond blanc, ombre douce */
.dt-buttons .dt-button,
.dt-buttons .dt-button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: transparent !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.08) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease !important;
  filter: none !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.dt-buttons .dt-button:hover,
.dt-buttons .dt-button.btn:hover {
  transform: translateY(-1px) !important;
  filter: none !important;
}
.dt-buttons .dt-button:active,
.dt-buttons .dt-button.btn:active {
  transform: translateY(0) !important;
}

/* Span interne : visible mais texte masqué */
.dt-buttons .dt-button > span,
.dt-buttons .dt-button.btn > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  color: transparent !important;
  width: 100% !important;
  height: 100% !important;
}

/* Icônes : 16px, couleur héritée du type (surchargée par variantes) */
.dt-buttons .dt-button > i,
.dt-buttons .dt-button > svg,
.dt-buttons .dt-button > span > i,
.dt-buttons .dt-button > span > svg {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
  color: inherit !important;
  transition: color 120ms ease, transform 120ms ease !important;
}
.dt-buttons .dt-button:hover > i,
.dt-buttons .dt-button:hover > svg,
.dt-buttons .dt-button:hover > span > i,
.dt-buttons .dt-button:hover > span > svg { transform: scale(1.12) !important; }

/* CSV — teal */
.dt-buttons .dt-button.buttons-csv,
.dt-buttons .dt-button[class*="csv"],
.buttons-csv {
  background: #ffffff !important;
  border-color: #d1fae5 !important;
  color: #10b981 !important;
  box-shadow: 0 1px 3px rgba(16,185,129,.10) !important;
}
.dt-buttons .dt-button.buttons-csv > i,
.dt-buttons .dt-button.buttons-csv > svg,
.dt-buttons .dt-button.buttons-csv > span > i,
.dt-buttons .dt-button.buttons-csv > span > svg,
.buttons-csv > i, .buttons-csv > svg { color: #10b981 !important; }
.dt-buttons .dt-button.buttons-csv:hover, .buttons-csv:hover {
  background: #f0fdf4 !important;
  border-color: rgba(16,185,129,.40) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
}
.dt-buttons .dt-button.buttons-csv:hover > i,
.dt-buttons .dt-button.buttons-csv:hover > svg,
.buttons-csv:hover > i, .buttons-csv:hover > svg { color: #059669 !important; }

/* Excel — vert */
.dt-buttons .dt-button.buttons-excel,
.dt-buttons .dt-button[class*="excel"],
.buttons-excel {
  background: #ffffff !important;
  border-color: #bbf7d0 !important;
  color: #059669 !important;
  box-shadow: 0 1px 3px rgba(5,150,105,.10) !important;
}
.dt-buttons .dt-button.buttons-excel > i,
.dt-buttons .dt-button.buttons-excel > svg,
.dt-buttons .dt-button.buttons-excel > span > i,
.dt-buttons .dt-button.buttons-excel > span > svg,
.buttons-excel > i, .buttons-excel > svg { color: #059669 !important; }
.dt-buttons .dt-button.buttons-excel:hover, .buttons-excel:hover {
  background: #f0fdf4 !important;
  border-color: rgba(5,150,105,.40) !important;
  box-shadow: 0 0 0 3px rgba(5,150,105,.12) !important;
}
.dt-buttons .dt-button.buttons-excel:hover > i,
.dt-buttons .dt-button.buttons-excel:hover > svg,
.buttons-excel:hover > i, .buttons-excel:hover > svg { color: #047857 !important; }

/* Print — gris-bleu */
.dt-buttons .dt-button.buttons-print,
.dt-buttons .dt-button[class*="print"],
.buttons-print {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: 0 1px 3px rgba(100,116,139,.10) !important;
}
.dt-buttons .dt-button.buttons-print > i,
.dt-buttons .dt-button.buttons-print > svg,
.dt-buttons .dt-button.buttons-print > span > i,
.dt-buttons .dt-button.buttons-print > span > svg,
.buttons-print > i, .buttons-print > svg { color: #64748b !important; }
.dt-buttons .dt-button.buttons-print:hover, .buttons-print:hover {
  background: #f8fafc !important;
  border-color: rgba(100,116,139,.40) !important;
  box-shadow: 0 0 0 3px rgba(100,116,139,.10) !important;
}
.dt-buttons .dt-button.buttons-print:hover > i,
.dt-buttons .dt-button.buttons-print:hover > svg,
.buttons-print:hover > i, .buttons-print:hover > svg { color: #475569 !important; }

/* PDF — rouge */
.dt-buttons .dt-button.buttons-pdf,
.dt-buttons .dt-button[class*="pdf"],
.buttons-pdf {
  background: #ffffff !important;
  border-color: #fecaca !important;
  color: #ef4444 !important;
  box-shadow: 0 1px 3px rgba(239,68,68,.10) !important;
}
.dt-buttons .dt-button.buttons-pdf > i,
.dt-buttons .dt-button.buttons-pdf > svg,
.dt-buttons .dt-button.buttons-pdf > span > i,
.dt-buttons .dt-button.buttons-pdf > span > svg,
.buttons-pdf > i, .buttons-pdf > svg { color: #ef4444 !important; }
.dt-buttons .dt-button.buttons-pdf:hover, .buttons-pdf:hover {
  background: #fef2f2 !important;
  border-color: rgba(239,68,68,.40) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.dt-buttons .dt-button.buttons-pdf:hover > i,
.dt-buttons .dt-button.buttons-pdf:hover > svg,
.buttons-pdf:hover > i, .buttons-pdf:hover > svg { color: #dc2626 !important; }

/* Colvis — ambre */
.dt-buttons .dt-button.buttons-colvis,
.dt-buttons .dt-button.buttons-collection,
.dt-buttons .dt-button[class*="colvis"],
.dt-buttons .dt-button[class*="collection"],
.buttons-colvis {
  background: #ffffff !important;
  border-color: #fde68a !important;
  color: #f59e0b !important;
  box-shadow: 0 1px 3px rgba(245,158,11,.10) !important;
}
.dt-buttons .dt-button.buttons-colvis > i,
.dt-buttons .dt-button.buttons-colvis > svg,
.dt-buttons .dt-button.buttons-colvis > span > i,
.dt-buttons .dt-button.buttons-colvis > span > svg,
.buttons-colvis > i, .buttons-colvis > svg { color: #f59e0b !important; }
.dt-buttons .dt-button.buttons-colvis:hover,
.dt-buttons .dt-button.buttons-collection:hover,
.buttons-colvis:hover,
.buttons-colvis.active, .dt-button-active {
  background: #fffbeb !important;
  border-color: rgba(245,158,11,.40) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important;
}
.dt-buttons .dt-button.buttons-colvis:hover > i,
.dt-buttons .dt-button.buttons-colvis:hover > svg,
.buttons-colvis:hover > i, .buttons-colvis:hover > svg,
.buttons-colvis.active > i { color: #d97706 !important; }

/* Copy — ambre */
.dt-buttons .dt-button.buttons-copy,
.dt-buttons .dt-button[class*="copy"],
.buttons-copy {
  background: #ffffff !important;
  border-color: #fde68a !important;
  color: #f59e0b !important;
  box-shadow: 0 1px 3px rgba(245,158,11,.10) !important;
}
.dt-buttons .dt-button.buttons-copy > i,
.dt-buttons .dt-button.buttons-copy > svg,
.dt-buttons .dt-button.buttons-copy > span > i,
.dt-buttons .dt-button.buttons-copy > span > svg,
.buttons-copy > i, .buttons-copy > svg { color: #f59e0b !important; }
.dt-buttons .dt-button.buttons-copy:hover, .buttons-copy:hover {
  background: #fffbeb !important;
  border-color: rgba(245,158,11,.40) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important;
}
.dt-buttons .dt-button.buttons-copy:hover > i,
.dt-buttons .dt-button.buttons-copy:hover > svg,
.buttons-copy:hover > i, .buttons-copy:hover > svg { color: #d97706 !important; }

/* Supprimer icônes FA injectées automatiquement (dupliquées) */
.dt-buttons .dt-button.buttons-csv::before,
.dt-buttons .dt-button.buttons-excel::before,
.dt-buttons .dt-button.buttons-pdf::before,
.dt-buttons .dt-button.buttons-print::before,
.dt-buttons .dt-button.buttons-colvis::before,
.dt-buttons .dt-button.buttons-collection::before { content: none !important; }

/* ── TOOLTIPS personnalisés au survol (positionnés EN DESSOUS du bouton) ──
   Affichés sous le bouton pour éviter le masquage par le conteneur supérieur
   (toolbar / row-margin-bottom-20) qui clip parfois le tooltip placé au-dessus. */
.dt-buttons .dt-button[data-tip]::after,
.buttons-csv[data-tip]::after,
.buttons-excel[data-tip]::after,
.buttons-print[data-tip]::after,
.buttons-pdf[data-tip]::after,
.buttons-colvis[data-tip]::after,
.buttons-copy[data-tip]::after {
  content: attr(data-tip) !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;            /* sous le bouton */
  left: 50% !important;
  transform: translateX(-50%) translateY(-4px);
  background: #1e293b !important;
  color: #ffffff !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  white-space: nowrap !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  text-transform: none !important;
  opacity: 0;
  pointer-events: none !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.20) !important;
  transition: opacity 150ms ease 120ms, transform 150ms ease 120ms;
  width: auto !important;
  height: auto !important;
  display: block !important;
  border: none !important;
}
/* Petite flèche AU-DESSUS du tooltip (pointant vers le bouton) */
.dt-buttons .dt-button[data-tip]::before,
.buttons-csv[data-tip]::before,
.buttons-excel[data-tip]::before,
.buttons-print[data-tip]::before,
.buttons-pdf[data-tip]::before,
.buttons-colvis[data-tip]::before,
.buttons-copy[data-tip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 3px);                       /* juste sous le bouton */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 5px solid transparent;
  border-bottom-color: #1e293b;                /* pointe vers le haut */
  border-top: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 150ms ease 120ms, transform 150ms ease 120ms;
}
.dt-buttons .dt-button[data-tip]:hover::after,
.dt-buttons .dt-button[data-tip]:hover::before,
.buttons-csv[data-tip]:hover::after, .buttons-csv[data-tip]:hover::before,
.buttons-excel[data-tip]:hover::after, .buttons-excel[data-tip]:hover::before,
.buttons-print[data-tip]:hover::after, .buttons-print[data-tip]:hover::before,
.buttons-pdf[data-tip]:hover::after, .buttons-pdf[data-tip]:hover::before,
.buttons-colvis[data-tip]:hover::after, .buttons-colvis[data-tip]:hover::before,
.buttons-copy[data-tip]:hover::after, .buttons-copy[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Dark mode — icône seule colorée */
:root[data-theme="dark"] .dt-buttons .dt-button {
  background: #1a2030 !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
}
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-csv > i,
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-csv > svg { color: #34d399 !important; }
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-excel > i,
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-excel > svg { color: #10b981 !important; }
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-print > i,
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-print > svg { color: #94a3b8 !important; }
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-pdf > i,
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-pdf > svg { color: #f87171 !important; }
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-colvis > i,
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-colvis > svg { color: #fbbf24 !important; }
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-copy > i,
:root[data-theme="dark"] .dt-buttons .dt-button.buttons-copy > svg { color: #fbbf24 !important; }
:root[data-theme="dark"] .dt-buttons .dt-button:hover {
  border-color: rgba(255,255,255,.18) !important;
}

/* ============================================================
   6) Responsive
   ============================================================ */
@media (max-width: 992px) {
  .swv-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform .25s ease !important;
    z-index: 1100 !important;
  }
  body.sidebar-open .swv-sidebar {
    transform: translateX(0) !important;
  }
  body.swv-modern .swv-content,
  body.swv-modern .swv-main,
  body.swv-modern #content-wrapper {
    margin-left: 0 !important;
  }
}

/* ============================================================
   7) (Section AUDIT THÈME GLOBAL retirée à la demande de Wajdi
       — l'harmonisation radius/modals/cards cassait des layouts
       existants. Aucune règle globale de radius/modal n'est
       appliquée ici. Les ajustements ciblés restent dans les
       sections précédentes (boutons, accordions, dt-buttons, etc.)
   ============================================================ */

/* Soft chevron animation pour les accordions
   (utilisé si on remplace plus tard fa-plus-square par fa-chevron) */
.cs-accordion-toggle .fa-chevron-down,
.cs-accordion-toggle .fa-chevron-up {
  transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
}
.cs-accordion-toggle.is-open .fa-chevron-down {
  transform: rotate(180deg) !important;
}

/* ================================================================
   DASHBOARD — Refonte visuelle inspirée Window CRM (capture 2)
   Cible : home/index.blade.php — sans toucher au markup,
   on retravaille les cartes KPI, charts, tables, badges, etc.
   ================================================================ */

/* Body root du dashboard — fond neutre clair */
body.skin-dark .content-wrapper:has(.total_sell),
.content-wrapper:has(.total_sell) {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

/* Titre principal "Welcome ..." — typographie raffinée */
.content-wrapper:has(.total_sell) h1.tw-text-2xl,
.content-wrapper:has(.total_sell) h1.tw-text-4xl {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -.02em !important;
}

/* ----------------------------------------------------------------
   KPI Cards — Style Window (rounded XL, soft shadow, accent gauche)
   ---------------------------------------------------------------- */
.content-wrapper:has(.total_sell) .tw-bg-white.tw-shadow-sm.tw-rounded-xl {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(226, 232, 240, .8) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 4px 12px rgba(15, 23, 42, .04) !important;
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1) !important;
  background: #ffffff !important;
}

.content-wrapper:has(.total_sell) .tw-bg-white.tw-shadow-sm.tw-rounded-xl::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--w-brand, #3b82f6), #6366f1);
  opacity: 0;
  transition: opacity .25s ease;
}

.content-wrapper:has(.total_sell) .tw-bg-white.tw-shadow-sm.tw-rounded-xl:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 4px 6px rgba(15, 23, 42, .04),
    0 12px 24px rgba(15, 23, 42, .08) !important;
}
.content-wrapper:has(.total_sell) .tw-bg-white.tw-shadow-sm.tw-rounded-xl:hover::before {
  opacity: 1;
}

/* Cercles d'icônes des KPI — léger ombrage interne + fond doux */
.content-wrapper:has(.total_sell) .tw-rounded-full.tw-bg-sky-100,
.content-wrapper:has(.total_sell) .tw-rounded-full.tw-bg-green-100,
.content-wrapper:has(.total_sell) .tw-rounded-full.tw-bg-yellow-100,
.content-wrapper:has(.total_sell) .tw-rounded-full.tw-bg-red-100,
.content-wrapper:has(.total_sell) .tw-rounded-full.tw-bg-indigo-100,
.content-wrapper:has(.total_sell) .tw-rounded-full.tw-bg-pink-100,
.content-wrapper:has(.total_sell) .tw-rounded-full.tw-bg-purple-100,
.content-wrapper:has(.total_sell) .tw-rounded-full.tw-bg-orange-100,
.content-wrapper:has(.total_sell) .tw-rounded-full.tw-bg-blue-100 {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4),
              0 2px 6px rgba(15, 23, 42, .06) !important;
  position: relative !important;
}

/* Valeurs numériques — typographie plus large et serrée */
.content-wrapper:has(.total_sell) .tw-text-xl.tw-font-semibold,
.content-wrapper:has(.total_sell) .tw-text-xl.tw-truncate.tw-font-semibold {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: #0f172a !important;
}

/* Petite barre de progression sous chaque KPI (effet "Awaiting payment 37/50") */
.content-wrapper:has(.total_sell) .tw-bg-white.tw-shadow-sm.tw-rounded-xl .tw-flex-1.tw-min-w-0 {
  position: relative;
}
.content-wrapper:has(.total_sell) .tw-bg-white.tw-shadow-sm.tw-rounded-xl .tw-flex-1.tw-min-w-0::after {
  content: '';
  display: block;
  height: 3px;
  width: 100%;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(59,130,246,.85) 0%,
    rgba(59,130,246,.85) 65%,
    rgba(59,130,246,.15) 65%,
    rgba(59,130,246,.15) 100%);
  opacity: .85;
}

/* ----------------------------------------------------------------
   CHARTS — Conteneurs de graphiques (sells_chart_1, sells_chart_2)
   ---------------------------------------------------------------- */
.content-wrapper:has(.total_sell) [class*="apexcharts-canvas"],
.content-wrapper:has(.total_sell) .chart-container,
.content-wrapper:has(.total_sell) .canvas-wrapper canvas {
  border-radius: 12px !important;
}

/* Titres de section dans les widgets dashboard */
.content-wrapper:has(.total_sell) h2,
.content-wrapper:has(.total_sell) h3 {
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: #0f172a !important;
}

/* Sous-textes muted */
.content-wrapper:has(.total_sell) .tw-text-gray-500,
.content-wrapper:has(.total_sell) .tw-text-gray-600 {
  color: #64748b !important;
}

/* ----------------------------------------------------------------
   TABLES dans le dashboard (Latest leads, Sales orders, etc.)
   ---------------------------------------------------------------- */
.content-wrapper:has(.total_sell) table.dataTable thead tr th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.content-wrapper:has(.total_sell) table.dataTable tbody tr {
  transition: background .15s ease !important;
}
.content-wrapper:has(.total_sell) table.dataTable tbody tr:hover {
  background: #f1f5f9 !important;
}

/* ----------------------------------------------------------------
   BADGES de statut (paid / due / partial / overdue)
   Pill colorées avec puces
   ---------------------------------------------------------------- */
.content-wrapper:has(.total_sell) .label.bg-green,
.content-wrapper:has(.total_sell) .label.bg-success {
  background: rgba(16, 185, 129, .12) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, .25) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}
.content-wrapper:has(.total_sell) .label.bg-yellow,
.content-wrapper:has(.total_sell) .label.bg-warning {
  background: rgba(245, 158, 11, .12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(245, 158, 11, .25) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}
.content-wrapper:has(.total_sell) .label.bg-red,
.content-wrapper:has(.total_sell) .label.bg-danger {
  background: rgba(239, 68, 68, .12) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(239, 68, 68, .25) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}
.content-wrapper:has(.total_sell) .label.bg-blue,
.content-wrapper:has(.total_sell) .label.bg-info {
  background: rgba(59, 130, 246, .12) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(59, 130, 246, .25) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* ----------------------------------------------------------------
   GRID DENSITY — espacements ajustés pour effet "compact + lisible"
   Ressemble au dispatching de capture 2 (3 + 1 colonnes)
   ---------------------------------------------------------------- */
.content-wrapper:has(.total_sell) .tw-grid.xl\:tw-grid-cols-4 {
  gap: 1.25rem !important;
}
.content-wrapper:has(.total_sell) .tw-px-5.tw-py-6 {
  padding-top: 0 !important;
  padding-bottom: 1rem !important;
}

/* Section header (titre "Welcome") — espacement plus aéré */
.content-wrapper:has(.total_sell) > .tw-pb-6 > .tw-px-5.tw-pt-5 {
  padding-top: 28px !important;
}

/* ----------------------------------------------------------------
   ANIMATION d'entrée — fade + slide-up échelonné sur les KPI cards
   ---------------------------------------------------------------- */
@keyframes cs-dashboard-fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.content-wrapper:has(.total_sell) .tw-grid.xl\:tw-grid-cols-4 > div {
  animation: cs-dashboard-fade-in .45s ease-out both;
}
.content-wrapper:has(.total_sell) .tw-grid.xl\:tw-grid-cols-4 > div:nth-child(1) { animation-delay: 0s;   }
.content-wrapper:has(.total_sell) .tw-grid.xl\:tw-grid-cols-4 > div:nth-child(2) { animation-delay: .06s; }
.content-wrapper:has(.total_sell) .tw-grid.xl\:tw-grid-cols-4 > div:nth-child(3) { animation-delay: .12s; }
.content-wrapper:has(.total_sell) .tw-grid.xl\:tw-grid-cols-4 > div:nth-child(4) { animation-delay: .18s; }

/* Dark mode */
:root[data-theme="dark"] .content-wrapper:has(.total_sell) {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}
:root[data-theme="dark"] .content-wrapper:has(.total_sell) .tw-bg-white.tw-shadow-sm.tw-rounded-xl {
  background: #1e293b !important;
  border-color: rgba(255,255,255,.06) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .3),
    0 4px 12px rgba(0, 0, 0, .25) !important;
}
:root[data-theme="dark"] .content-wrapper:has(.total_sell) .tw-text-xl.tw-font-semibold,
:root[data-theme="dark"] .content-wrapper:has(.total_sell) .tw-text-xl.tw-truncate.tw-font-semibold {
  color: #f1f5f9 !important;
}
:root[data-theme="dark"] .content-wrapper:has(.total_sell) h1.tw-text-2xl,
:root[data-theme="dark"] .content-wrapper:has(.total_sell) h1.tw-text-4xl {
  background: linear-gradient(135deg, #f1f5f9 0%, #93c5fd 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
:root[data-theme="dark"] .content-wrapper:has(.total_sell) table.dataTable thead tr th {
  background: rgba(255,255,255,.04) !important;
  color: #cbd5e1 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .content-wrapper:has(.total_sell) table.dataTable tbody tr:hover {
  background: rgba(255,255,255,.04) !important;
}

/* ============================================================
   5s) BOUTONS PRODUITS — Style inverse (bleu → blanc au hover)
   Classe dédiée : .cs-product-btn-primary
   ============================================================ */

.cs-product-btn-primary {
  background: #ffffff !important;
  border: 1px solid var(--w-brand) !important;
  color: var(--w-brand) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* ── SURVOL : fond bleu, texte blanc ──────────────────────── */
.cs-product-btn-primary:hover,
.cs-product-btn-primary:focus {
  background: var(--w-brand) !important;
  border-color: var(--w-brand) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* ── Icônes : bleues par défaut, blanches au survol ──────── */
.cs-product-btn-primary svg,
.cs-product-btn-primary i {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: var(--w-brand) !important;
  transition: color 0.2s ease-in-out !important;
}

.cs-product-btn-primary:hover svg,
.cs-product-btn-primary:hover i,
.cs-product-btn-primary:focus svg,
.cs-product-btn-primary:focus i {
  color: #ffffff !important;
}

/* ── DARK MODE ────────────────────────────────────────────── */
:root[data-theme="dark"] .cs-product-btn-primary {
  background: transparent !important;
  border-color: var(--w-brand) !important;
  color: var(--w-brand) !important;
}

:root[data-theme="dark"] .cs-product-btn-primary:hover {
  background: var(--w-brand) !important;
  border-color: var(--w-brand) !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .cs-product-btn-primary:hover svg {
  color: #ffffff !important;
}

/* ============================================================
   6) DATATABLES RESPONSIVE FIX — Boutons d'export, recherche,
      sélecteur d'entrées & pagination (Bloc PNF & autres pages)
   ------------------------------------------------------------
   PORTÉE :
     - sell, sale_pos, sales_order, sell_return,
       stock_adjustment, stock_transfer, purchase_return,
       purchase_requisition, purchase_order, purchase, expense,
       account/cash_flow, account_reports/*
     - Toute page utilisant le dom DataTables global défini dans
       public/js/common.js (`<"row margin-bottom-20"<"col-sm-1"l>
       <"col-sm-8"B><"col-sm-3"f> r>tip`).

   PROBLÈMES CORRIGÉS :
     1. Boutons d'export qui s'empilent verticalement à largeur
        moyenne (col-sm-8 trop étroit pour 5 boutons en ligne).
     2. Mauvais alignement length / buttons / search sur tablette.
     3. Pagination débordante & illisible sur mobile (1000+ entrées).
     4. Champ recherche qui se rétrécit ou déborde.

   APPROCHE :
     - Surcharge ciblée `.dataTables_wrapper` — n'impacte que
       les pages avec DataTables.
     - Placée en fin de cascade pour garantir la priorité sans
       supprimer / réécrire les règles existantes du thème.
     - 4 breakpoints : ≥992px / 768–991px / ≤640px / ≤480px.
   ============================================================ */

/* -----------------------------------------------------------
 * 6.1 Conteneur boutons d'export — flex stable
 * Empêche le wrap colonne en forçant flex-direction:row.
 * --------------------------------------------------------- */
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dt-buttons.btn-group,
.dataTables_wrapper .cs-dt-buttons {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  vertical-align: middle !important;
  float: none !important;
}

/* Chaque bouton garde sa largeur fixe — pas de "stretch" sur 100%. */
.dataTables_wrapper .dt-buttons > .dt-button,
.dataTables_wrapper .dt-buttons > .btn,
.dataTables_wrapper .dt-buttons > a.dt-button,
.dataTables_wrapper .dt-buttons > button.dt-button,
.dataTables_wrapper .cs-dt-buttons > .dt-button,
.dataTables_wrapper .cs-dt-buttons > .btn {
  flex: 0 0 auto !important;
  float: none !important;
}

/* -----------------------------------------------------------
 * 6.2 Toolbar row (length | buttons | search) — alignement
 * stable sur grand écran.
 * --------------------------------------------------------- */
.dataTables_wrapper .row.margin-bottom-20 {
  flex-wrap: wrap !important;           /* autorise le wrap propre */
  overflow: visible !important;
  row-gap: 10px !important;
}

.dataTables_wrapper .row.margin-bottom-20 .col-sm-1,
.dataTables_wrapper .row.margin-bottom-20 .col-sm-2,
.dataTables_wrapper .row.margin-bottom-20 .col-sm-4 {
  order: 1;
}
.dataTables_wrapper .row.margin-bottom-20 .col-sm-8 {
  order: 2;
  justify-content: center !important;
}
.dataTables_wrapper .row.margin-bottom-20 .col-sm-3 {
  order: 3;
}

/* Recherche : largeur raisonnable, ne dépasse jamais son parent. */
.dataTables_wrapper .dataTables_filter input {
  max-width: 100% !important;
}

/* -----------------------------------------------------------
 * 6.3 Pagination — empêche le débordement horizontal
 * --------------------------------------------------------- */
.dataTables_wrapper > .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
}
.dataTables_wrapper > .dataTables_paginate::-webkit-scrollbar,
.dataTables_wrapper .dataTables_paginate::-webkit-scrollbar {
  height: 4px;
}
.dataTables_wrapper .dataTables_paginate .pagination,
.dataTables_wrapper .dataTables_paginate > span {
  flex-wrap: nowrap !important;        /* tous les boutons sur une ligne */
  white-space: nowrap !important;
}

/* -----------------------------------------------------------
 * 6.4 BREAKPOINT TABLETTE ≤ 991px
 * Length & search restent en haut côte à côte ; les boutons
 * d'export passent sur une ligne dédiée en dessous.
 * --------------------------------------------------------- */
@media (max-width: 991px) {
  .dataTables_wrapper .row.margin-bottom-20 {
    padding: 8px 12px !important;
    row-gap: 8px !important;
  }
  .dataTables_wrapper .row.margin-bottom-20 .col-sm-1,
  .dataTables_wrapper .row.margin-bottom-20 .col-sm-2,
  .dataTables_wrapper .row.margin-bottom-20 .col-sm-4 {
    flex: 0 0 auto !important;
    order: 1;
  }
  .dataTables_wrapper .row.margin-bottom-20 .col-sm-3 {
    flex: 1 1 auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    order: 2;
  }
  .dataTables_wrapper .row.margin-bottom-20 .col-sm-8 {
    flex: 1 1 100% !important;
    width: 100% !important;
    order: 3;
    justify-content: center !important;
    padding-top: 6px !important;
    margin-top: 4px !important;
    border-top: 1px dashed #eef2f7 !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 220px !important;
  }
}

/* -----------------------------------------------------------
 * 6.5 BREAKPOINT MOBILE ≤ 640px
 * Empilement complet, recherche pleine largeur, boutons à
 * gauche pour une meilleure ergonomie tactile.
 * --------------------------------------------------------- */
@media (max-width: 640px) {
  .dataTables_wrapper .row.margin-bottom-20 {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 10px !important;
    row-gap: 6px !important;
  }
  .dataTables_wrapper .row.margin-bottom-20 > [class*="col-"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    order: initial !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .dataTables_wrapper .row.margin-bottom-20 .col-sm-8 {
    justify-content: flex-start !important;
  }

  /* Recherche : pleine largeur */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_filter label {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  /* Boutons d'export — aligne à gauche, plus tactiles */
  .dataTables_wrapper .dt-buttons,
  .dataTables_wrapper .dt-buttons.btn-group,
  .dataTables_wrapper .cs-dt-buttons {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .dataTables_wrapper .dt-buttons > .dt-button,
  .dataTables_wrapper .dt-buttons > .btn,
  .dataTables_wrapper .dt-buttons > a.dt-button,
  .dataTables_wrapper .dt-buttons > button.dt-button {
    width: 34px !important;
    height: 34px !important;
  }

  /* Footer (info + pagination) → empilement vertical */
  .dataTables_wrapper > .dataTables_info,
  .dataTables_wrapper > .dataTables_paginate {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 8px 10px !important;
  }
  .dataTables_wrapper > .dataTables_paginate {
    border-top: 1px dashed #eef2f7 !important;
  }
  .dataTables_wrapper .dataTables_paginate .pagination,
  .dataTables_wrapper .dataTables_paginate > span {
    justify-content: center !important;
  }
}

/* -----------------------------------------------------------
 * 6.6 BREAKPOINT TRÈS PETIT ≤ 480px
 * Pagination compactée : on conserve précédent / page courante
 * / ellipsis / suivant. L'utilisateur reste informé via le
 * texte "Affiche X à Y sur Z entrées".
 * --------------------------------------------------------- */
@media (max-width: 480px) {
  /* Bootstrap 3 (li.paginate_button) */
  .dataTables_wrapper .dataTables_paginate .pagination > li.paginate_button:not(.previous):not(.next):not(.active):not(.first):not(.last):not(.disabled),
  /* DataTables natif sans Bootstrap (a.paginate_button) */
  .dataTables_wrapper .dataTables_paginate .paginate_button:not(.previous):not(.next):not(.current):not(.first):not(.last):not(.ellipsis):not(.disabled) {
    display: none !important;
  }
  /* Toujours afficher l'ellipsis "…" qui signale les pages cachées. */
  .dataTables_wrapper .dataTables_paginate .paginate_button.ellipsis,
  .dataTables_wrapper .dataTables_paginate .pagination > li.paginate_button.ellipsis {
    display: inline-flex !important;
  }

  /* Boutons pagination plus petits */
  .dataTables_wrapper .dataTables_paginate .pagination > li > a,
  .dataTables_wrapper .dataTables_paginate .pagination > li > span,
  .dataTables_wrapper .dataTables_paginate .paginate_button,
  .dataTables_wrapper .pagination .page-link {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    margin: 0 1px !important;
  }
}