/* ================================================================
   AXEANE KOMPTA — BUTTONS
   ================================================================
   Toolbar buttons, btn-group actions, dropdowns
   Source exacte : EcranTableEntreprises .btn-action / .btn-group
   ================================================================ */

/* ================================================================
   BASE — .ax-btn (fondation de tous les boutons V2)
   Doit être AVANT toutes les variantes pour que les variantes
   puissent overrider border, background, color, etc.
   ================================================================ */
.ax-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--ax-radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ax-font);
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.5;
    box-sizing: border-box;
    letter-spacing: .2px;
    outline: none;
    height: 34px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ax-btn:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
    transform: translateY(-1px);
}

.ax-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition-duration: 0.08s;
}

/* ── Disabled state — grisé, non-interactif ── */
.ax-btn:disabled,
.ax-btn[disabled],
.ax-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
    filter: grayscale(30%);
}

.ax-btn:disabled:hover,
.ax-btn[disabled]:hover,
.ax-btn.disabled:hover,
.ax-btn:disabled:focus,
.ax-btn[disabled]:focus,
.ax-btn.disabled:focus,
.ax-btn:disabled:active,
.ax-btn[disabled]:active,
.ax-btn.disabled:active {
    box-shadow: none;
    transform: none;
    opacity: 0.45;
    filter: grayscale(30%);
}

/* ── Bouton action toolbar — alias legacy (= .ax-btn) ── */
.ax-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: var(--ax-radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ax-font);
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.5;
    box-sizing: border-box;
    letter-spacing: .2px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ax-btn-action:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
    transform: translateY(-1px);
}

/* Override Bootstrap a:hover / a:focus — garder la couleur du bouton */
a.ax-btn-action:hover,
a.ax-btn-action:focus {
  text-decoration: none;
  color: inherit;
}

/* Primary — Indigo (Ajouter) — aligné template-v1 */
.ax-btn-primary {
  background: var(--ax-primary);
  color: #ffffff;
  font-weight: 600;
}

.ax-btn-primary:hover,
.ax-btn-primary:focus {
  background: var(--ax-primary-dark);
  box-shadow: 0 2px 8px rgba(var(--ax-primary-rgb), 0.25);
  color: #ffffff;
}

/* Success — Vert (Suivi Création) — identique template-v1 .ax-btn.ax-btn-success */
.ax-btn-success,
a.ax-btn-success {
  background: var(--ax-success);
  color: #ffffff;
  border: none;
  font-weight: 600;
}

.ax-btn-success:hover,
.ax-btn-success:focus,
a.ax-btn-success:hover,
a.ax-btn-success:focus {
  background: #388e3c;
  color: #ffffff;
  text-decoration: none;
}

/* Accent — Indigo plein (identique à primary) — ref grandLivre.js V2 (axeane.css l.184) */
.ax-btn-accent {
  background: var(--ax-primary);
  color: #ffffff;
  font-weight: 600;
}

.ax-btn-accent:hover,
.ax-btn-accent:focus {
  background: var(--ax-primary-dark);
  box-shadow: 0 2px 8px rgba(var(--ax-primary-rgb), 0.25);
  color: #ffffff;
}

/* Secondary — Blue — aligné template-v1 */
.ax-btn-secondary {
  background: var(--ax-secondary);
  color: #ffffff;
  font-weight: 600;
}

.ax-btn-secondary:hover,
.ax-btn-secondary:focus {
  background: var(--ax-secondary-dark);
  color: #ffffff;
}

/* Danger — Rouge — aligné template-v1 */
.ax-btn-danger {
  background: var(--ax-danger);
  color: #ffffff;
  font-weight: 600;
}

.ax-btn-danger:hover,
.ax-btn-danger:focus {
  background: #d32f2f;
  color: #ffffff;
}

/* Danger Light — fond rouge clair, texte rouge */
.ax-btn-danger-light {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  font-weight: 600;
}

.ax-btn-danger-light:hover,
.ax-btn-danger-light:focus {
  background: #fee2e2;
  border-color: #ef4444;
  color: #dc2626;
}

/* Warning — Amber clair, texte ambre */
.ax-btn-warning {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
  font-weight: 600;
}

.ax-btn-warning:hover,
.ax-btn-warning:focus {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #b45309;
}

/* Excel — Vert clair */
.ax-btn-excel {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    font-weight: 600;
    padding: 4px 12px;
}

.ax-btn-excel:hover,
.ax-btn-excel:focus {
  background: #d1fae5;
  border-color: #34d399;
  color: #059669;
}

/* Outline — Bordure grise — aligné template-v1 */
.ax-btn-outline {
  background: #fff;
  color: var(--ax-text-body);
  border: 1.5px solid var(--ax-border-input);
}

.ax-btn-outline:hover,
.ax-btn-outline:focus {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
  text-decoration: none;
}

/* Ghost — Transparent */
.ax-btn-ghost {
  background: transparent;
  color: var(--ax-primary);
  border: none;
}

.ax-btn-ghost:hover {
  background: var(--ax-primary-50);
}

/* Small — Compact */
.ax-btn-sm {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  height: 30px;
  border-radius: var(--ax-radius-xs);
  box-sizing: border-box;
}

/* ── Icon button small — bouton icône 26×26 dans les en-têtes de colonnes ── */
.ax-btn-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  line-height: 1;
  vertical-align: middle;
}

.ax-btn-icon-sm.ax-btn-success {
  background: rgba(46, 204, 113, 0.15);
  color: #1a9d52;
}

.ax-btn-icon-sm.ax-btn-success:hover {
  background: rgba(46, 204, 113, 0.3);
  color: #15803d;
  box-shadow: 0 2px 6px rgba(46, 204, 113, 0.25);
}

.ax-btn-icon-sm.ax-btn-primary {
  background: rgba(var(--ax-primary-rgb, 63, 81, 181), 0.12);
  color: var(--ax-primary, rgb(63, 81, 181));
}

.ax-btn-icon-sm.ax-btn-primary:hover {
  background: rgba(var(--ax-primary-rgb, 63, 81, 181), 0.22);
  box-shadow: 0 2px 6px rgba(var(--ax-primary-rgb, 63, 81, 181), 0.25);
}

/* ── Variante "labeled" — bouton icône + texte (Tri, Colonnes) — couleur accent (orange) ref grandLivre.js V2 ── */
.ax-btn-icon-labeled {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    width: auto;
    padding: 0 10px;
    border-radius: 6px;
    border: 1.5px solid rgba(236, 120, 29, .25);
    background: var(--ax-accent-light, #FEF3E8);
    color: var(--ax-accent, #EC781D);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--ax-font, inherit);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.02em;
}

.ax-btn-icon-labeled i {
  font-size: 12px;
  color: var(--ax-accent, #ec781d);
}

.ax-btn-icon-labeled:hover,
.ax-btn-icon-labeled:focus {
  background: rgba(236, 120, 29, 0.15);
  border-color: var(--ax-accent, #ec781d);
  box-shadow: 0 2px 6px rgba(236, 120, 29, 0.2);
  color: var(--ax-accent, #ec781d);
}

.ax-btn-icon-sm.ax-btn-danger {
  background: rgba(231, 76, 60, 0.12);
  color: #d63031;
}

.ax-btn-icon-sm.ax-btn-danger:hover {
  background: rgba(231, 76, 60, 0.25);
  color: #c0392b;
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.25);
}

/* Light — fond blanc pour headers sombres (nax-table-header-cell-dark) */
.ax-btn-icon-sm.ax-btn-light {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ax-btn-icon-sm.ax-btn-light:hover {
  background: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.15);
}

/* ================================================================
   BTN-GROUP — Actions row (3 boutons pastel collés)
   Source exacte : EcranTableEntreprises .ent-actions-cell .btn-group
   ================================================================ */
.ax-actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.ax-actions-cell .ax-btn-group {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--ax-radius-sm);
  overflow: visible;
  border: 1px solid #d1d5db;
  box-shadow: var(--ax-shadow-xs);
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--ax-border);
  background: var(--ax-card);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: var(--ax-tr);
  position: relative;
  line-height: 1;
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon:last-of-type {
  border-right: none;
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon > i {
  font-size: 12px;
  line-height: 1;
  transition: var(--ax-tr);
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon + .ax-btn-icon {
  margin-left: 0;
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon:first-child {
  border-radius: 6px 0 0 6px;
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon:last-of-type {
  border-radius: 0 6px 6px 0;
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon:first-child:last-of-type {
  border-radius: 6px;
}

/* Active press */
.ax-actions-cell .ax-btn-group > .ax-btn-icon:active {
  transform: scale(0.94);
  box-shadow: none;
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon:focus {
  outline: none;
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon .caret {
  display: none;
}

/* ── Action Primary — bleu pastel (Vision 360°) ── */
.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-primary {
  background: var(--ax-info-light);
  color: var(--ax-info);
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-primary i {
  color: var(--ax-info);
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-primary:hover {
  background: #dbeafe;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-primary:hover i {
  color: #1d4ed8;
}

/* ── Action Secondary — vert pastel (Voir détails) ── */
.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-secondary {
  background: var(--ax-success-light);
  color: var(--ax-success);
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-secondary i {
  color: var(--ax-success);
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-secondary:hover {
  background: var(--ax-success-border);
  color: var(--ax-success-text);
  box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.15);
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-secondary:hover i {
  color: var(--ax-success-text);
}

/* ── Action More — gris neutre (ellipsis) ── */
.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-more {
  background: #f9fafb;
  color: #6b7280;
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-more i {
  color: #6b7280;
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-more:hover {
  background: var(--ax-border-light);
  color: var(--ax-text-body);
  box-shadow: inset 0 0 0 1px rgba(107, 114, 128, 0.1);
}

.ax-actions-cell .ax-btn-group > .ax-btn-icon.ax-action-more:hover i {
  color: var(--ax-text-body);
}

/* ================================================================
   DROPDOWN — Actions menu
   Source exacte : EcranTableEntreprises ul.nax-actions-dropdown
   ================================================================ */
ul.ax-dropdown {
  border-radius: var(--ax-radius-sm) !important;
  box-shadow: var(--ax-shadow-lg) !important;
  padding: 4px !important;
  border: 1px solid var(--ax-border) !important;
  min-width: 160px !important;
  font-family: var(--ax-font);
  background: var(--ax-card) !important;
}

ul.ax-dropdown > li > a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500;
  color: var(--ax-text-body) !important;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  transition: background 0.1s ease;
}

ul.ax-dropdown > li > a:hover {
  background: var(--ax-border-light) !important;
  color: var(--ax-text-bold) !important;
}

ul.ax-dropdown > li > a > i {
  width: 14px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
}

/* ── ax-btn inside dropdown — neutralise les overrides Bootstrap ── */
.dropdown > .ax-btn.dropdown-toggle,
.dropup > .ax-btn.dropdown-toggle {
  /* Garde le style ax-btn, empêche Bootstrap de casser le rendu */
  float: none;
  border-radius: var(--ax-radius-sm);
  box-shadow: none;
  outline: none;
}

/* Pas de caret Bootstrap sur ax-btn */
.ax-btn.dropdown-toggle .caret {
  display: none;
}

/* Hover / focus identique au style ax-btn normal */
.dropdown > .ax-btn-outline.dropdown-toggle:hover,
.dropdown > .ax-btn-outline.dropdown-toggle:focus {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
  background: #fff;
}

.dropdown > .ax-btn-excel.dropdown-toggle:hover,
.dropdown > .ax-btn-excel.dropdown-toggle:focus {
  background: #d1fae5;
  border-color: #34d399;
  color: #059669;
}

/* Quand le dropdown est ouvert (.open) — même style que hover */
.dropdown.open > .ax-btn-outline.dropdown-toggle,
.dropdown.open > .ax-btn-outline.dropdown-toggle:hover,
.dropdown.open > .ax-btn-outline.dropdown-toggle:focus {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
  background: #fff;
  box-shadow: none;
}

.dropdown.open > .ax-btn-excel.dropdown-toggle,
.dropdown.open > .ax-btn-excel.dropdown-toggle:hover,
.dropdown.open > .ax-btn-excel.dropdown-toggle:focus {
  background: #d1fae5;
  border-color: #34d399;
  color: #059669;
  box-shadow: none;
}

/* ================================================================
   V2 — ACTION BUTTON GROUPS (colorful bg — act-* classes)
   Source : template-v-2/css/axeane.css — v-final-16
   Utilisé dans Grand Livre, Balance (abtn act-primary/success/etc.)
   ================================================================ */

/* ── abtn base (inside ax-btn-group) ── */
.ax-btn-group > .abtn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
    position: relative;
    line-height: 1;
}
.ax-btn-group > .abtn:last-child,
.ax-btn-group > .abtn:last-of-type { border-right: none; }
.ax-btn-group > .abtn:first-child { border-radius: 6px 0 0 6px; }
.ax-btn-group > .abtn:last-child,
.ax-btn-group > .abtn:last-of-type  { border-radius: 0 6px 6px 0; }
.ax-btn-group > .abtn:first-child:last-child,
.ax-btn-group > .abtn:first-child:last-of-type { border-radius: 6px; }
.ax-btn-group > .abtn:active { transform: scale(0.93); }
.ax-btn-group > .abtn:focus  { outline: none; }
.ax-btn-group > .abtn i { font-size: 15px; line-height: 1; transition: color 0.15s; }

/* ── Compact variant -sm (Grand Livre / Balance — le plus petit) ── */
.ax-btn-group.ax-btn-group-sm > .abtn {
  width: 26px;
  height: 24px;
}
.ax-btn-group.ax-btn-group-sm > .abtn i {
  font-size: 15px;
}
.ax-btn-group.ax-btn-group-sm > .abtn span {
  font-weight: bold;
  font-size: 14px;
}

/* ── Medium variant -md (taille intermédiaire — ni sm ni base) ──
   28×28px, icônes 15px.  Utilisé quand sm est trop petit
   et base (30×30) trop gros pour la hauteur de ligne.
   Ex : Familles Journaux, Journaux, Flux Trésorerie, etc. */
.ax-btn-group.ax-btn-group-md > .abtn {
  width: 28px;
  height: 28px;
}
.ax-btn-group.ax-btn-group-md > .abtn i {
  font-size: 15px;
}
.ax-btn-group.ax-btn-group-md > .abtn span {
  font-weight: bold;
  font-size: 14px;
}

/* ── act-primary — bleu pastel (Lettrage) — ref template-v-traitement-doc ── */
.abtn.act-primary { background: var(--ax-info-light, #EFF6FF); color: var(--ax-info, #2563EB); }
.abtn.act-primary i { color: var(--ax-info, #2563EB); }
.abtn.act-primary:hover { background: #DBEAFE; color: #1D4ED8; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15); }
.abtn.act-primary:hover i { color: #1D4ED8; }

/* ── act-success — vert pastel (Valider) ── */
.abtn.act-success { background: var(--ax-success-light); color: var(--ax-success); }
.abtn.act-success i { color: var(--ax-success); }
.abtn.act-success:hover { background: var(--ax-success-border); color: var(--ax-success-text); box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.15); }
.abtn.act-success:hover i { color: var(--ax-success-text); }

/* ── act-warning — amber pastel (Voir écriture / fa-eye) — ref template-v-traitement-doc ── */
.abtn.act-warning { background: var(--ax-warning-light, #FFFBEB); color: var(--ax-warning-dark, #D97706); }
.abtn.act-warning i { color: var(--ax-warning-dark, #D97706); }
.abtn.act-warning:hover { background: var(--ax-warning-border, #FDE68A); color: var(--ax-warning-text, #92400E); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2); }
.abtn.act-warning:hover i { color: var(--ax-warning-text, #92400E); }

/* ── act-edit — orange (Modifier / fa-pencil) ── */
.abtn.act-edit { background: #FFF7ED; color: #EA580C; }
.abtn.act-edit i { color: #EA580C; }
.abtn.act-edit:hover { background: #FFEDD5; color: #C2410C; box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.15); }
.abtn.act-edit:hover i { color: #C2410C; }

/* ── act-info — bleu info pastel (Lettrage / L / fa-link) ── */
.abtn.act-info { background: #EFF6FF; color: #2563EB; }
.abtn.act-info i, .abtn.act-info span { color: #2563EB; }
.abtn.act-info:hover { background: #DBEAFE; color: #1D4ED8; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15); }
.abtn.act-info:hover i, .abtn.act-info:hover span { color: #1D4ED8; }

/* ── act-accent — violet pastel (Document) ── */
.abtn.act-accent {
  background: #f5f3ff;
  color: #7c3aed;
}
.abtn.act-accent i {
  color: #7c3aed;
}
.abtn.act-accent:hover {
  background: #ede9fe;
}

/* ── act-danger — rouge pastel (Supprimer) ── */
.abtn.act-danger {
  background: var(--ax-danger-light);
  color: var(--ax-danger);
}
.abtn.act-danger i {
  color: var(--ax-danger);
}
.abtn.act-danger:hover {
  background: var(--ax-danger-hover);
}

/* ── act-more — gris neutre (Plus / dropdown) ── */
.abtn.act-more {
  background: #f9fafb;
  color: #6b7280;
}
.abtn.act-more i {
  color: #6b7280;
}
.abtn.act-more:hover {
  background: var(--ax-border-light);
  color: var(--ax-text-body);
}
.abtn.act-more:hover i {
  color: var(--ax-text-body);
}

/* dropdown-toggle inside btn-group — neutralise Bootstrap caret/overrides */
.ax-btn-group > .abtn.dropdown-toggle {
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}
.ax-btn-group > .abtn.dropdown-toggle .caret {
  margin: 0;
  border-top-color: currentColor;
}

/* dropdown-menu positioning inside ax-btn-group */
.ax-btn-group {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--ax-radius-sm, 6px);
  overflow: visible;
  border: 1px solid #D1D5DB;
  box-shadow: var(--ax-shadow-xs, 0 1px 2px rgba(0,0,0,.05));
  position: relative;
}
.ax-btn-group > .dropdown-menu {
  top: 100%;
  margin-top: 2px;
}