/* ================================================================
   AXEANE KOMPTA — TABLES
   ================================================================
   Table wrapper, header bar, thead, tbody, search, refresh, footer
   Source exacte : EcranTableEntreprises .ent-table-*
   ================================================================ */

/* ── Table wrapper (card container) ── */
.ax-table-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 12px 32px 4px;
    background: #FBF8F8;
    border-radius: var(--ax-radius);
    border: 1px solid var(--ax-border);
    box-shadow: var(--ax-shadow-md);
    min-height: 0;
    overflow: hidden;
}

/* ── Panel header bar ── */
/* ⚠️ height fixée à 44px — doit rester identique à .ax-fiche-header
   pour que le basculement table ↔ fiche soit visuellement stable. */
.ax-table-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 22px;
    height: 44px;
    min-height: 44px;
    background: var(--ax-card);
    border-bottom: 1.5px solid var(--ax-border-strong);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    border-radius: var(--ax-radius) var(--ax-radius) 0 0;
    flex-shrink: 0;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.ax-table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ax-text-strong);
  min-width: 0;            /* autorise le shrink dans le flex parent */
  flex: 0 1 auto;
  overflow: hidden;
}

.ax-table-title > span {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ax-table-title > i {
  font-size: 14px;
  color: var(--ax-text-sec);
  opacity: 0.5;
  flex: 0 0 auto;
}

/* ── Years bar inside header bar (V2) ── */
.ax-years-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ax-years-inline button {
    border: none;
    cursor: pointer;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 16px;
    transition: var(--ax-tr);
    background: var(--ax-primary-50);
    color: var(--ax-text-sec);
    outline: none;
    white-space: nowrap;
    font-family: var(--ax-font);
}

.ax-years-inline button:hover {
  background: rgba(63, 81, 181, 0.12);
  color: var(--ax-primary);
}

.ax-years-inline button.yr-active {
  background: var(--ax-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(var(--ax-primary-rgb), 0.35);
}

.ax-years-inline button.yr-nav {
  background: transparent;
  color: var(--ax-text-muted);
  font-size: 13px;
  padding: 3px 6px;
}

.ax-years-inline button.yr-nav:hover {
  color: var(--ax-primary);
}

.ax-years-inline button:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.ax-table-count {
  background: #dbeafe;
  color: var(--ax-info);
  font-size: 12px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: var(--ax-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  line-height: 1.5;
}

.ax-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Search ── */
.ax-search-wrapper {
  position: relative;
  min-width: 260px;
}

.ax-search-wrapper input {
  width: 100%;
  padding: 6px 12px 6px 34px;
  border-radius: 20px;
  border: 1.5px solid var(--ax-border-input);
  background: var(--ax-card);
  font-size: 13px;
  color: var(--ax-text);
  outline: none;
  transition: var(--ax-tr);
  box-shadow: var(--ax-shadow-xs);
  font-family: var(--ax-font);
}

.ax-search-wrapper input::placeholder {
  color: var(--ax-text-light);
}

.ax-search-wrapper input:hover {
  border-color: var(--ax-border-hover);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ax-search-wrapper input:focus {
  border-color: var(--ax-border-focus);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.ax-search-wrapper .search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ax-text-light);
  font-size: 12px;
  pointer-events: none;
  transition: color 0.2s ease;
}

.ax-search-wrapper:focus-within .search-icon {
  color: var(--ax-border-focus);
}

/* ── Refresh button ── */
.ax-refresh-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ax-radius-sm);
  border: 1px solid var(--ax-border-input);
  background: var(--ax-card);
  color: var(--ax-text-light);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  outline: none;
  padding: 0;
  will-change: transform;
}

.ax-refresh-btn:hover {
  color: var(--ax-info);
  border-color: var(--ax-info-border);
  background: #f8fafc;
}

.ax-refresh-btn:hover i {
  animation: ax-spin 0.6s ease-in-out;
}

.ax-refresh-btn:active {
  background: var(--ax-info-light);
  transform: scale(0.95);
}

/* ── Table zone ── */
.ax-table-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  background: #fbf8f8;
}

.ax-table-border {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ── Thead (sticky) ── */
.ax-table-head-wrap {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  overflow-y: auto; /* aligné avec body : scroll uniquement si nécessaire */
  overflow-x: hidden;
}

/* Scrollbar invisible dans le header (juste pour réserver l'espace si body scrolle) */
.ax-table-head-wrap::-webkit-scrollbar {
  width: 3px;
}

.ax-table-head-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.ax-table-head-wrap::-webkit-scrollbar-thumb {
  background: transparent;
}

.ax-table-head {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  line-height: 1.41;
  table-layout: fixed;
}

.ax-table-head thead tr {
  background: #f9fafc;
}

.ax-table-head thead th {
  padding: 11px 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 2px solid var(--ax-border);
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
}

/* ── Filter inputs inside ax-table-head (inline column filters) ── */
.ax-table-head thead th .form-control {
  border-radius: 6px;
  border: 1px solid var(--ax-border-input);
  background: var(--ax-card);
  color: var(--ax-text);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  height: 28px;
  margin-top: 6px;
  transition: all 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.ax-table-head thead th .form-control::placeholder {
    color: var(--ax-primary, rgb(63, 81, 181));
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.65;
    font-size: 13px;
}

.ax-table-head thead th .form-control:focus {
  border-color: var(--ax-border-focus);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  outline: none;
}

.ax-table-head thead th .form-control:hover:not(:focus) {
  border-color: var(--ax-border-hover, #cbd5e1);
}

.ax-table-head thead th .input-group {
  display: flex;
}

.ax-table-head thead th .input-group .form-control {
  border-radius: 6px 0 0 6px;
  border-right: none;
  flex: 1;
}

.ax-table-head thead th .input-group .input-group-btn .btn {
  height: 28px;
  border: 1px solid var(--ax-border-input);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: var(--ax-card);
  color: var(--ax-text-body);
  padding: 0 8px;
  box-shadow: none;
  transition: var(--ax-tr-fast);
}

.ax-table-head thead th .input-group .input-group-btn .btn:hover {
  background: #f1f5f9;
  color: var(--ax-primary);
}

.ax-table-head thead th .nya-bs-select {
  margin-top: 6px;
}

.ax-table-head thead th:first-child {
  padding-left: 15px;
}

.ax-table-head thead th:last-child {
  padding-right: 15px;
  text-align: right;
}

/* ── Colonne Actions — alignement à droite (th header + td body) ──
   Convention V2 : la colonne Actions est toujours la dernière colonne.
   Le libellé du header ET le contenu de la cellule body doivent être
   alignés à droite pour rester cohérents avec les boutons (flex-end). */
.ax-table tbody td:last-child {
  text-align: right;
}

.ax-table tbody td .ax-actions-cell,
.ax-table-scroll table.table > tbody > tr > td .ax-actions-cell {
  justify-content: flex-end;
}

.ax-table-scroll table.table > thead > tr > th:last-child {
  text-align: right;
}

.ax-table-scroll table.table > tbody > tr > td:last-child {
  text-align: right;
}

/* ── Tbody (scroll) ── */
.ax-table-body-scroll {
  flex: 1;
  overflow-y: auto; /* moderne : scrollbar visible uniquement quand nécessaire */
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.ax-table-body-scroll:hover {
  scrollbar-color: #d1d5db transparent;
}

.ax-table-body-scroll::-webkit-scrollbar {
  width: 3px;
}

.ax-table-body-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ax-table-body-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
  transition: background 0.2s;
}

/* Scrollbar apparaît uniquement au survol du conteneur */
.ax-table-body-scroll:hover::-webkit-scrollbar-thumb {
  background: #d1d5db;
}

.ax-table-body-scroll:hover::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ------------------------------------------------------------------
   Variant: Grand Livre table sizing and small tweaks used by Lettrage
   Apply by adding class `ax-table-grand-livre` to the table wrapper.
------------------------------------------------------------------- */
.ax-table-grand-livre .nax-table-line-spaced-lettrage {
  min-height: 36px !important;
  height: 36px !important;
}

.ax-table-grand-livre .nax-table-cell-spaced-lettrage,
.ax-table-grand-livre .nax-table-cell-spaced-perso-lettrage {
  font-size: 14px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  line-height: 1.35 !important;
}

.ax-table-grand-livre .nax-table-cell-spaced-lettrage span,
.ax-table-grand-livre .nax-table-cell-spaced-perso-lettrage span {
  font-size: 14px;
}

/* Header inline filter inputs slightly larger */
.ax-table-grand-livre .nax-table-header-cell-dark .form-control,
.ax-table-grand-livre .nax-table-header-cell-dark input.form-control {
  font-size: 14px;
  height: 34px;
  padding: 6px 10px;
}

/* toolbar switch label sizing under this variant */
.ax-table-grand-livre .ax-toolbar md-switch .md-label {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* prefer the reusable ax-journal-badge class for journal codes */
.ax-table-grand-livre .ax-journal-badge {
  font-size: 13px !important;
}

/* ── Scrollbar toujours visible (sans hover) ── */
.ax-table-body-scroll.ax-scroll-always {
  scrollbar-color: #d1d5db transparent;
}

.ax-table-body-scroll.ax-scroll-always::-webkit-scrollbar {
  width: 6px;
}

.ax-table-body-scroll.ax-scroll-always::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

.ax-table-body-scroll.ax-scroll-always::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.ax-table-body-scroll.ax-scroll-always::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.ax-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    line-height: 1.41;
    table-layout: fixed;
}

.ax-table tbody tr {
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.ax-table tbody tr:nth-child(odd) {
  background: var(--ax-row-odd, #ffffff);
}

.ax-table tbody tr:nth-child(even) {
  background: var(--ax-row-even, #eef0f8);
}

.ax-table tbody tr:hover {
  background: var(--ax-row-hover, rgba(63, 81, 181, 0.14)) !important;
}

.ax-table tbody td {
    padding: 0 11px;
    height: 34px;
    vertical-align: middle;
    color: var(--ax-text-body);
    font-size: 15px;
    border-bottom: 1px solid #dfe3ee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-left-color 0.2s ease;
}

.ax-table tbody td:first-child {
  padding-left: 15px;
  border-left: 2px solid transparent;
}

.ax-table tbody td:last-child {
  padding-right: 15px;
  text-align: right;
}

.ax-table tbody tr:hover td:first-child {
  border-left-color: var(--ax-primary, #3f51b5);
}

.ax-table tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--ax-text-bold);
}

/* ── Exception row (Paramétrage Contrôles) ── */
.ax-table tbody tr.ax-row-exception {
  background: var(--ax-warning-light, #fffbeb) !important;
}

.ax-table tbody tr.ax-row-exception:hover {
  background: var(--ax-warning-border, #fde68a) !important;
}

/* ── Code cell ── */
.ax-code-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ax-code-cell strong {
  font-weight: 700;
  color: var(--ax-text-bold);
  font-variant-numeric: tabular-nums;
}

/* ── Mono cell (matricule) ── */
.ax-mono-cell {
  font-variant-numeric: tabular-nums;
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  color: var(--ax-text-sec);
}

/* ── Secondary text cell ── */
.ax-sec-cell {
  color: var(--ax-text-sec);
}

/* ================================================================
   TABLE SCROLL — Table Bootstrap scrollable (plan comptable, etc.)
   Pour les tables utilisant table.table + si-table avec filtres thead
   ================================================================ */
.ax-table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.ax-table-scroll::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.ax-table-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.ax-table-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
}
.ax-table-scroll:hover::-webkit-scrollbar-thumb {
  background: #d1d5db;
}
.ax-table-scroll:hover::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.ax-table-scroll table.table {
  margin-bottom: 0;
  table-layout: fixed;
}

.ax-table-scroll table.table > thead > tr > th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 2px solid var(--ax-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.ax-table-scroll table.table > thead > tr > th:last-child {
  border-right: none;
  text-align: right;
}
.ax-table-scroll table.table > thead > tr > th a {
  color: #475569;
  text-decoration: none;
}
.ax-table-scroll table.table > thead > tr > th a:hover {
  color: var(--ax-primary);
}

.ax-table-scroll table.table > thead > tr > th .form-control {
  border-radius: 6px;
  border: 1px solid var(--ax-border-input);
  background: var(--ax-card);
  color: var(--ax-text);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  height: 28px;
  margin-top: 6px;
  transition: all 0.15s ease;
}

.ax-table-scroll table.table > thead > tr > th .form-control::placeholder {
    color: var(--ax-primary, rgb(63, 81, 181));
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.65;
    font-size: 13px;
}

.ax-table-scroll table.table > thead > tr > th .form-control:focus {
  border-color: var(--ax-border-focus);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  outline: none;
}

.ax-table-scroll table.table > thead > tr > th .form-control:hover:not(:focus) {
  border-color: var(--ax-border-hover, #cbd5e1);
}

.ax-table-scroll table.table > thead > tr > th .nya-bs-select {
  margin-top: 6px;
}
.ax-table-scroll table.table > thead > tr > th .icon-wrapper i {
  color: var(--ax-text-light);
}
.ax-table-scroll table.table > thead > tr > th .icon-wrapper:hover i {
  color: var(--ax-primary);
}

/* ── Tbody ── */
.ax-table-scroll table.table > tbody > tr {
  transition: background 0.15s ease;
  cursor: pointer;
}
.ax-table-scroll table.table > tbody > tr:nth-child(odd) {
  background: var(--ax-row-odd, #ffffff);
}
.ax-table-scroll table.table > tbody > tr:nth-child(even) {
  background: var(--ax-row-even, #eef0f8);
}
.ax-table-scroll table.table > tbody > tr:hover {
  background: var(--ax-row-hover, rgba(63, 81, 181, 0.14)) !important;
}

.ax-table-scroll table.table > tbody > tr > td {
    padding: 0 8px;
    vertical-align: middle;
    color: var(--ax-text-body, #334155);
    font-size: 15px;
    height: 34px;
    line-height: 34px;
    border-bottom: 1px solid var(--ax-border-light, #F3F4F6);
    border-top: none;
    transition: border-left 0.15s ease;
}

/* Réserver l'espace de la border-left pour éviter le décalage au hover */
.ax-table-scroll table.table > tbody > tr > td:first-child {
  border-left: 2px solid transparent;
}

.ax-table-scroll table.table > tbody > tr:hover > td:first-child {
  border-left: 2px solid #3b82f6;
}

.ax-table-scroll table.table > tbody > tr:last-child > td {
  border-bottom: none;
}

/* ── Pagination bar — see full definition at bottom of file ── */

/* ── Surcharge uib-pagination Bootstrap dans .ax-pagination-bar ── */
.ax-pagination-bar .pagination {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  align-items: center;
}

.ax-pagination-bar .pagination > li > a,
.ax-pagination-bar .pagination > li > span {
    border: 1px solid transparent;
    background: rgba(37, 99, 235, 0.06);
    color: var(--ax-primary);
    border-radius: var(--ax-radius-xs, 6px) !important;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-height: 28px;
    white-space: nowrap;
    gap: 4px;
    -webkit-font-smoothing: antialiased;
}

.ax-pagination-bar .pagination > li > a:hover {
  background: rgba(37, 99, 235, 0.12);
  color: var(--ax-primary-dark);
  border-color: transparent;
}

.ax-pagination-bar .pagination > li.active > a,
.ax-pagination-bar .pagination > li.active > a:hover,
.ax-pagination-bar .pagination > li.active > a:focus,
.ax-pagination-bar .pagination > li.active > span {
  background: var(--ax-primary);
  color: #fff;
  border-color: var(--ax-primary);
  box-shadow: 0 2px 6px rgba(var(--ax-primary-rgb), 0.3);
  z-index: 1;
}

.ax-pagination-bar .pagination > li.disabled > a,
.ax-pagination-bar .pagination > li.disabled > span {
  background: transparent;
  color: #9ca3af;
  border-color: transparent;
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

.ax-pagination-bar .pagination > li:first-child > a,
.ax-pagination-bar .pagination > li:first-child > span,
.ax-pagination-bar .pagination > li:last-child > a,
.ax-pagination-bar .pagination > li:last-child > span {
  border-radius: var(--ax-radius-sm) !important;
}

/* ================================================================
   COMPAT — Override nax-table-* inside ax-table-zone
   Harmonise les anciennes tables div-based (nax-table-line-spaced,
   nax-table-cell-spaced, nax-table-header-cell-dark-with-filter)
   pour qu'elles suivent les couleurs du design system ax-table.
   ================================================================ */

/* ── Header nax-table-header-cell-dark (style clair, scopé aux écrans migrés) ── */
.ax-table-zone .nax-table-header-cell-dark {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 36px !important;
    border-bottom: 2px solid var(--ax-border, #E5E7EB) !important;
    border-top: none !important;
    height: auto;
    margin: 0;
}

.ax-table-zone .nax-table-header-cell-dark .form-control,
.ax-table-zone .nax-table-header-cell-dark .form-control.input-sm,
.ax-table-zone .nax-table-header-cell-dark .input-perso {
  border-radius: 6px;
  border: 1px solid var(--ax-border-input, #d1d5db);
  background: #fff;
  color: var(--ax-text, #1f2937);
  font-size: 11px !important;
  font-weight: 500;
  padding: 3px 8px !important;
  height: 28px !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  outline: none;
}

.ax-table-zone .nax-table-header-cell-dark .form-control:focus {
  border-color: var(--ax-border-focus, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  outline: none;
}

.ax-table-zone .nax-table-header-cell-dark .form-control::placeholder {
    color: var(--ax-primary, rgb(63, 81, 181));
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.65;
    font-size: 13px;
}

.ax-table-zone .nax-table-header-cell-dark .form-control:hover:not(:focus) {
  border-color: var(--ax-border-hover, #cbd5e1);
}

/* ── Montant columns alignment (header inputs) ── */
.header-montant {
  text-align-last: right;
}

/* ── Placeholder bold pour les tables classiques (rechercheDocumentAvance) ── */
.ax-table-wrapper table.table > thead > tr > th .form-control::placeholder {
    color: var(--ax-primary, rgb(63, 81, 181));
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.65;
    font-size: 13px;
}

.ax-table-wrapper table.table > thead > tr > th .form-control {
    border-radius: 6px;
    border: 1px solid var(--ax-border-input, #d1d5db);
    font-size: 11px !important;
    font-weight: 500;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ax-table-wrapper table.table > thead > tr > th .form-control:focus {
    border-color: var(--ax-border-focus, #2563EB);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    outline: none;
}

.ax-table-wrapper table.table > thead > tr > th a.nax-header-filter-link {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.ax-table-wrapper table.table > thead > tr > th {
    background: #f8fafc !important;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--ax-border, #E5E7EB) !important;
}

/* ── Montant cells (Débit / Crédit body rows — V2) ── */
.cell-montant {
  text-align: right;
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
}
.cell-montant > span {
  text-align: right;
  display: block;
  width: 100%;
}

/* ── Flex row alignment for table cells ── */
.flex-ligne {
  display: flex;
  align-items: center;
  height: auto;
}

/* ── Header nax-table-header-cell-dark-with-filter ── */
.ax-table-zone .nax-table-header-cell-dark-with-filter {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--ax-border);
  height: auto;
  min-height: 80px;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ax-table-zone .nax-table-header-cell-dark-with-filter .nax-header-filter-link {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ax-table-zone .nax-table-header-cell-dark-with-filter .form-control {
  border-radius: 6px;
  border: 1px solid var(--ax-border-input, #d1d5db);
  background: var(--ax-card);
  color: var(--ax-text, #1e293b);
  font-size: 12px;
  padding: 4px 8px;
  margin-top: 4px;
  transition: all 0.15s ease;
}

.ax-table-zone
  .nax-table-header-cell-dark-with-filter
  .form-control::placeholder {
  color: var(--ax-text-light, #9ca3af);
}

.ax-table-zone .nax-table-header-cell-dark-with-filter .form-control:focus {
  border-color: var(--ax-border-focus, #3b82f6);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  outline: none;
}

.ax-table-zone .nax-table-header-cell-dark-with-filter .nya-bs-select {
  margin-top: 4px;
}

.ax-table-zone
  .nax-table-header-cell-dark-with-filter
  .input-group
  .form-control {
  border-radius: 6px 0 0 6px;
}

.ax-table-zone .nax-table-header-cell-dark-with-filter .input-group-btn .btn {
  border-radius: 0 6px 6px 0;
  border: 1px solid var(--ax-border-input, #d1d5db);
  border-left: none;
  background: var(--ax-card);
  color: var(--ax-text-body, #334155);
  font-size: 12px;
  transition: all 0.15s ease;
}

.ax-table-zone
  .nax-table-header-cell-dark-with-filter
  .input-group-btn
  .btn:hover {
  background: #f8fafc;
  color: var(--ax-primary);
}

/* ── Lignes — couleurs alternées (ref: grandLivre.js V2 — ax-ft tbody tr) ── */
.ax-table-zone .nax-table-line-spaced {
  transition: background 0.15s ease;
  cursor: pointer;
}

.ax-table-zone .nax-table-line-spaced:nth-child(odd) {
  background: var(--ax-row-odd, #ffffff);
}

.ax-table-zone .nax-table-line-spaced:nth-child(even) {
  background: var(--ax-row-even, #eef0f8);
}

.ax-table-zone .nax-table-line-spaced:hover {
  background: var(--ax-row-hover, rgba(63, 81, 181, 0.14)) !important;
  font-weight: inherit;
}

/* ── Cellules ── */
.ax-table-zone .nax-table-cell-spaced {
    border-bottom: 1px solid #dfe3ee;
    color: var(--ax-text-body, #334155);
    font-size: 14px;
    padding: 0 8px;
    height: 31px;
    vertical-align: middle;
    line-height: 34px;
    transition: border-left 0.15s ease;
}

.ax-table-zone .nax-table-line-spaced:hover .nax-table-cell-spaced:first-child {
  border-left: 2px solid #3b82f6;
}

/* ── Header cell — reduce internal padding for compact input rows ── */
.ax-table-zone .nax-table-header-cell-dark {
    display: flex;
    align-items: center;
    padding-left: 4px !important;
    padding-right: 2px !important;
}
.ax-table-zone .nax-table-header-cell-dark > span {
    display: flex;
    align-items: center;
    width: 100%;
}

/* ── Editable inline inputs inside body rows — fit to 31px row height ── */
.ax-table-zone .nax-table-cell-spaced .editable-wrap {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
    margin: 0;
    max-width: 100%;
    width: 100%;
}
.ax-table-zone .nax-table-cell-spaced .editable-wrap .editable-controls {
    display: inline-flex !important;
    align-items: center;
    width: 100%;
    margin: 0;
}
.ax-table-zone .nax-table-cell-spaced .editable-wrap .editable-controls > input,
.ax-table-zone .nax-table-cell-spaced .editable-wrap .editable-controls > select {
    height: 26px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    border-radius: 4px;
    border: 1px solid var(--ax-border-input, #d1d5db);
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.ax-table-zone .nax-table-cell-spaced .editable-wrap .editable-controls > input:focus {
    border-color: var(--ax-border-focus, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    outline: none;
}

/* ── Editable ui-select inside body rows — compact ── */
.ax-table-zone .nax-table-cell-spaced .editable-wrap .ui-select-container {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
}
.ax-table-zone .nax-table-cell-spaced .editable-wrap .ui-select-container .ui-select-match .btn {
    height: 26px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}
.ax-table-zone .nax-table-cell-spaced .editable-wrap .ui-select-container input.ui-select-search {
    height: 26px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
}

/* ── ui-select dropdown append-to-body inside row cells ── */
.ax-table-zone .nax-table-cell-spaced .ui-select-container {
    height: 26px !important;
    min-height: 26px !important;
}
.ax-table-zone .nax-table-cell-spaced .ui-select-container .ui-select-match .btn {
    height: 26px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
}

/* ── Typeahead dropdown inside body rows — prevent clipping ── */
.ax-table-zone .nax-table-cell-spaced .dropdown-menu {
    z-index: 1050 !important;
}

/* ================================================================
   JOURNAL — Couleurs de table bleu indigo plus foncé
   Utilisé UNIQUEMENT sur les écrans Journal (détaillé, centralisé, général)
   via la classe .ax-table-journal sur le ax-table-wrapper.
   ⚠️ Ne PAS ajouter cette classe sur d'autres écrans (Grand Livre, etc.)
   qui doivent garder les couleurs standard V2 (odd=#fff, even=#eef0f8,
   hover=rgba(63,81,181,.14)).
   ================================================================ */
.ax-table-journal .nax-table-line-spaced:nth-child(odd) {
  background: #ffffff;
}

.ax-table-journal .nax-table-line-spaced:nth-child(even) {
  background: rgba(63, 81, 181, 0.06);
}

.ax-table-journal .nax-table-line-spaced:hover {
  background: rgba(63, 81, 181, 0.12) !important;
  font-weight: inherit;
}

.ax-table-journal .even-tr {
  background-color: #ffffff !important;
}

.ax-table-journal .odd-tr {
  background-color: rgba(63, 81, 181, 0.06) !important;
}

.ax-table-journal .even-tr:hover,
.ax-table-journal .odd-tr:hover {
  background-color: rgba(63, 81, 181, 0.12) !important;
}

/* ================================================================
   FIX — Hover perturbation dans ax-table-scroll (Validation écritures etc.)
   Empêche le saut de layout causé par md-checkbox, badge, ax-btn-group
   lors du hover sur les lignes tbody.
   ================================================================ */

/* ── Stabiliser la hauteur des lignes (complément) ── */
.ax-table-scroll table.table > tbody > tr > td {
  box-sizing: border-box;
}

/* ── Hover — empêcher les td enfants de casser le fond ── */
.ax-table-scroll table.table > tbody > tr:hover > td {
  background: transparent !important;
}

/* ── md-checkbox dans les tables — layout stable ── */
.ax-table-scroll table.table md-checkbox {
  margin: 0;
  padding: 0;
  min-height: 20px;
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.ax-table-scroll table.table md-checkbox .md-container {
  position: relative;
  top: auto;
  transform: none;
}

.ax-table-scroll table.table md-checkbox .md-label {
  display: none;
}

/* ── ax-btn-group / ax-actions-cell dans les tables ── */
.ax-table-scroll table.table .ax-actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  height: 100%;
}

.ax-table-scroll table.table .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);
  position: relative;
}

/* ── Badge dans les cellules — empêcher le shift ── */
.ax-table-scroll table.table > tbody > tr > td .badge {
  vertical-align: middle;
  line-height: 1.4;
}

/* ================================================================
   PAGINATION — Boutons texte (Précédent / Suivant / Dernier)
   Identique au style template-v-traitement-doc (.ax-pg-text)
   ================================================================ */
.ax-pagination-bar .ax-pg-text,
.ax-pagination .ax-pg-text {
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--ax-radius-xs);
    background: rgba(37, 99, 235, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--ax-primary);
    transition: var(--ax-tr);
    padding: 0 10px;
    white-space: nowrap;
    gap: 4px;
    font-family: var(--ax-font);
    outline: none;
}

.ax-pagination-bar .ax-pg-text:hover,
.ax-pagination .ax-pg-text:hover {
    background: rgba(37, 99, 235, 0.12);
    color: var(--ax-primary-dark);
}

.ax-pagination-bar .ax-pg-text.disabled,
.ax-pagination .ax-pg-text.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ── Page size group (Lignes : 15 25 50) ── */
.ax-pagination-bar .ax-page-size-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ax-text-sec);
}

.ax-pagination-bar .ax-page-size-group .ax-ps-label {
    font-weight: 600;
    color: var(--ax-text-sec);
}

.ax-pagination-bar .ax-page-size-group .ax-ps-btn {
    min-width: 28px;
    height: 26px;
    border: 1px solid var(--ax-border-strong);
    border-radius: 4px;
    background: #fff;
    color: var(--ax-text-sec);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: var(--ax-tr);
    padding: 0 6px;
    font-family: var(--ax-font);
    outline: none;
}

.ax-pagination-bar .ax-page-size-group .ax-ps-btn:hover {
    background: var(--ax-border-light);
    color: var(--ax-text);
}

.ax-pagination-bar .ax-page-size-group .ax-ps-btn.active {
    background: var(--ax-primary);
    color: #fff;
    border-color: var(--ax-primary-dark);
}

.ax-pagination-bar .ax-page-size-group .ax-ps-total {
    font-size: 12px;
    color: var(--ax-text-muted);
    margin-left: 6px;
}

/* ── Pagination flex container (inside ax-pagination-bar) ── */
.ax-pagination-bar .ax-pagination {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ax-pagination-bar .ax-pg {
    min-width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--ax-radius-xs);
    background: rgba(37, 99, 235, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--ax-primary);
    transition: var(--ax-tr);
    font-family: var(--ax-font);
    outline: none;
    padding: 0;
}

.ax-pagination-bar .ax-pg:hover {
    background: rgba(37, 99, 235, 0.12);
    color: var(--ax-primary-dark);
}

.ax-pagination-bar .ax-pg.active {
    background: var(--ax-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(var(--ax-primary-rgb), 0.3);
}

.ax-pagination-bar .ax-pg.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ── Surcharge de la pagination Bootstrap — layout comme template-v-traitement-doc ── */
.ax-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    border-top: 1px solid var(--ax-border);
    flex-shrink: 0;
    background: #fafbfc;
    font-size: 12px;
    color: var(--ax-text-sec);
    min-height: 38px;
}

/* ================================================================
   BOLD — Compte comptable, Débit, Crédit (colonnes clés en gras)
   Appliqué via les classes utilitaires ou via nth-child
   ================================================================ */

/* ── Classe utilitaire pour colonnes en gras ── */
.ax-cell-bold,
.ax-cell-compte,
.ax-cell-debit,
.ax-cell-credit {
    font-weight: 600 !important;
}

/* ── Compte comptable — bold + couleur forte ── */
.ax-cell-compte {
    color: var(--ax-text-bold, #111827) !important;
}

/* ── Débit — bold noir ── */
.ax-cell-debit {
    color: #000000 !important;
    font-variant-numeric: tabular-nums;
}

/* ── Crédit — bold noir ── */
.ax-cell-credit {
    color: #000000 !important;
    font-variant-numeric: tabular-nums;
}

/* ── cell-montant bold (débit/crédit via cell-montant) ── */
.cell-montant {
    font-weight: 700;
}


.ax-switch-label {
  color: var(--ax-primary);
  margin: 0;
  font-weight: 600;
}

/* ── nya-bs-select alignment inside toolbar — same height as ax-btn ── */
.ax-toolbar-right .nya-bs-select .btn.dropdown-toggle,
.ax-toolbar-left .nya-bs-select .btn.dropdown-toggle {
    height: 34px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: var(--ax-radius-sm, 6px);
    border: 1px solid var(--ax-border, #e2e8f0);
    background: #fff;
    color: var(--ax-text, #1e293b);
    font-weight: 600;
    box-sizing: border-box;
}

.ax-toolbar-right .nya-bs-select,
.ax-toolbar-left .nya-bs-select {
    margin: 0;
}

/* ── nya-bs-select btn-group vertical centering in toolbar ── */
.ax-toolbar-right .nya-bs-select.btn-group,
.ax-toolbar-left .nya-bs-select.btn-group {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

/* ── nya-bs-select dropdown menu inside toolbar — proper z-index ── */
.ax-toolbar-right .nya-bs-select .dropdown-menu,
.ax-toolbar-left .nya-bs-select .dropdown-menu {
    z-index: 1060;
}

/* ── Empty state — modern centered empty message ── */
.ax-empty-state {
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ax-empty-state i {
    font-size: 32px;
    color: #94a3b8;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ax-empty-state p {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

/* ── Spinner keyframe for inline loading ── */
@keyframes axSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── ax-form-row-flex alignment fix — ensure all items same height ── */
.ax-form-row-flex {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.ax-form-row-flex .ax-form-group-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 120px;
}

.ax-form-row-flex .ax-form-group-flex .form-control,
.ax-form-row-flex .ax-form-group-flex .nya-bs-select .btn.dropdown-toggle,
.ax-form-row-flex .ax-form-group-flex .input-group {
    height: 34px;
}

.ax-form-row-flex .ax-form-group-flex .nya-bs-select {
    margin: 0;
}

/* ================================================================
   GENERIC — .ellipsisDiv (troncature texte + "…")
   --------------------------------------------------------------
   ⚠️ Avant, cette classe n'était définie QUE dans la <style> inline
   de grandLivreComponent.html. Résultat : l'ellipsis ne fonctionnait
   dans Lettrage / Balance / remplacementCompte… qu'APRÈS avoir
   ouvert Grand Livre au moins une fois (dépendance à l'ordre de
   navigation). On la remonte ici pour qu'elle soit toujours dispo.
   ================================================================ */
.ellipsisDiv {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* min-width:0 pour autoriser le shrink dans un contexte flex (cf. .flex-ligne) */
.flex-ligne.ellipsisDiv {
    min-width: 0;
}

/* ================================================================
   FILTER CLEAR ICON — place "Retirer" (X) INSIDE the input, on the right
   --------------------------------------------------------------
   Couvre TOUS les écrans comptageneral avec le header .nax-table-header-cell-dark :

   Pattern A — NESTED (lettrageTable, remplacmentCompte,
   rapprochmentBancaireTable, detailedJournal) :

     <div class="nax-table-header-cell-dark">
       <span>
         <span style="display:inline-block; width:calc(100% - 24px)">
           <input class="form-control input-sm ..." />
         </span>
         <span ng-click="initFilterParType(...)">
           <i ng-if="query.xxx" class="fa fa-times-circle [fa-times-perso]"></i>
         </span>
       </span>
     </div>

   Pattern B — FLAT (grandLivreComponent, popupLettrageTable) :

     <div class="nax-table-header-cell-dark">
       <span style="display:inline-block; width:calc(100% - 24px)">
         <input class="form-control input-sm ..." />
       </span>
       <span ng-click="initFilterParType(...)" [class="plt-clear-icon"]>
         <i ng-if="query.xxx" class="fa fa-times-circle"></i>
       </span>
     </div>

   Objectif commun :
   - Input sur 100 % de la largeur.
   - Icône X superposée à droite DANS l'input.
   - Fix visuel de .fa-times-perso (classe sans styles).
   ================================================================ */

/* Contexte de positionnement — sur la cellule ET sur le span wrapper éventuel */
.nax-table-header-cell-dark {
    position: relative;
}

.nax-table-header-cell-dark > span {
    position: relative;
}

/* Wrapper du input — full width, neutralise le style inline "width: calc(100% - 24px)".
   Couvre à la fois le niveau 1 (flat) et le niveau 2 (nested). */
.nax-table-header-cell-dark span[style*="calc(100% - 24px)"],
.nax-table-header-cell-dark > span > span:first-child {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Input — largeur pleine. Le padding-right pour réserver la place de
   l'icône X est appliqué UNIQUEMENT quand le wrapper X n'est pas vide
   (voir plus bas : règle avec :has + :not(:empty)). */
.nax-table-header-cell-dark input.form-control,
.nax-table-header-cell-dark input.input-sm,
.nax-table-header-cell-dark input.input-perso,
.nax-table-header-cell-dark input[type="text"] {
    width: 100% !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* Wrapper du bouton X — absolute, dans l'input, à droite.
   Couvre les deux patterns via [ng-click^="initFilterParType"] et .plt-clear-icon.
   Le wrapper porte directement le ng-click → il doit toujours être cliquable
   dès que l'icône est visible (géré plus bas par :empty / :not(:empty)). */
.nax-table-header-cell-dark span[ng-click^="initFilterParType"],
.nax-table-header-cell-dark span.plt-clear-icon {
    position: absolute !important;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3;
    line-height: 1;
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
}

/* Icône X — couleur cohérente + hover + fix pour .fa-times-perso (classe sans styles)
   Active pointer-events + cursor uniquement quand l'icône est rendue. */
.nax-table-header-cell-dark span[ng-click^="initFilterParType"] .fa-times-circle,
.nax-table-header-cell-dark span.plt-clear-icon .fa-times-circle,
.fa-times-circle.fa-times-perso {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.nax-table-header-cell-dark span[ng-click^="initFilterParType"]:hover .fa-times-circle,
.nax-table-header-cell-dark span.plt-clear-icon:hover .fa-times-circle {
    color: var(--ax-danger, #ef4444);
    transform: scale(1.08);
}

/* ================================================================
   BALANCE TABLE (etatFinancier/balanceTable) — pattern spécifique
   --------------------------------------------------------------
   Structure : <div class="bh-cell bh-filter"> <input /> <span class="bh-clear"/> </div>
   bh-filter est flex-direction:column → on passe en relative pour superposer
   la croix dans l'input.
   ================================================================ */
.balance-modern-header .bh-cell.bh-filter {
    position: relative;
}

.balance-modern-header .bh-cell.bh-filter input {
    padding-right: 28px !important;
}

.balance-modern-header .bh-cell.bh-filter .bh-clear {
    position: absolute !important;
    top: 50%;
    /* cell padding = 8px + 6px d'air à l'intérieur de l'input (≡ Grand Livre) */
    right: 14px;
    transform: translateY(-50%);
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    z-index: 3;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    color: #94a3b8;
    font-size: 14px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.balance-modern-header .bh-cell.bh-filter .bh-clear:hover {
    color: var(--ax-danger, #ef4444);
    transform: translateY(-50%) scale(1.08);
    opacity: 1;
}

/* ================================================================
   PLAN COMPTABLE / TIERS — une seule icône à la fois dans l'input
   --------------------------------------------------------------
   Pattern cible (gestionConfigCompteComptable, ...):

     <div style="position: relative;">
       <input style="padding-right: 52px;" />
       <span ng-if="...query..." title="Effacer" style="right:28px;...">
         <i class="fa fa-times-circle"></i>
       </span>
       <div class="input-group-append" style="right:10px;...">
         <i class="fa fa-search"></i>
       </div>
     </div>

   Quand le <span title="Effacer"> est présent (valeur saisie), on masque
   l'icône de recherche et on aligne le X sur la position right:10px,
   afin de n'afficher qu'UNE icône dans l'input.
   ================================================================ */
.ax-table-scroll th span[title="Effacer"] {
    right: 10px !important;
}

.ax-table-scroll th span[title="Effacer"] ~ .input-group-append {
    display: none !important;
}

/* Animation de rotation pour l'icône de recherche (état chargement) */
.pc-search-spin {
    animation: axSpin 0.9s linear infinite;
}

/* ================================================================
   FIX — Overlap texte/icône X + clic inopérant + wrapper vide.
   --------------------------------------------------------------
   Objectifs :
   1. Quand l'input est VIDE (ng-if=false → <i> retirée) :
      - le wrapper X ne doit prendre aucune place (display:none)
      - pas de cursor:pointer résiduel
      - l'input utilise tout l'espace → placeholder bien à droite
   2. Quand l'input a une valeur (ng-if=true → <i> rendue) :
      - on réserve 26px à droite dans l'input
      - l'icône X est cliquable sur toute sa surface
   Utilise :empty + :has() (support navigateurs modernes).
   ================================================================ */

/* 1) Wrapper X vide (ng-if false) → invisible, aucun espace, pas de cursor */
.nax-table-header-cell-dark span[ng-click^="initFilterParType"]:empty,
.nax-table-header-cell-dark span.plt-clear-icon:empty {
    display: none !important;
}

/* 2) Wrapper X non vide (icône présente) → pleinement cliquable */
.nax-table-header-cell-dark span[ng-click^="initFilterParType"]:not(:empty),
.nax-table-header-cell-dark span.plt-clear-icon:not(:empty) {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 3) Réserver padding-right:26px dans l'input UNIQUEMENT si un wrapper X
      non vide est présent à côté (sinon padding par défaut, placeholder
      bien collé à droite).
      - Pattern NESTED : input dans un span frère du wrapper X
      - Pattern FLAT   : input et wrapper X sont frères directs de la cell */
.nax-table-header-cell-dark > span:has(> span[ng-click^="initFilterParType"]:not(:empty)) input,
.nax-table-header-cell-dark > span:has(> span.plt-clear-icon:not(:empty)) input,
.nax-table-header-cell-dark:has(> span[ng-click^="initFilterParType"]:not(:empty)) input,
.nax-table-header-cell-dark:has(> span.plt-clear-icon:not(:empty)) input {
    padding-right: 26px !important;
}

/* 4) L'icône <i> reste en flow normal, centrée par le flex du wrapper.
      Le clic est capté par le wrapper (ng-click). */
.nax-table-header-cell-dark span[ng-click^="initFilterParType"] .fa-times-circle,
.nax-table-header-cell-dark span.plt-clear-icon .fa-times-circle {
    pointer-events: none; /* le clic remonte au wrapper porteur du ng-click */
}

/* ================================================================
   FIX — Ellipsis sur le texte du bouton nya-bs-select
   --------------------------------------------------------------
   ⚠️ Règle retirée : cibler .special-title / .filter-option à
   l'intérieur du bouton nya-bs-select provoquait une régression sur
   l'affichage du dropdown (la liste des options restait visible).
   On se contente désormais de titres courts ("Affect. Tier", etc.)
   pour éviter le chevauchement avec le caret.
   ================================================================ */