/* ================================================================
   Axeane UI — Relevé bancaire (RB)
   CSS dédié à l'écran « Configuration » du menu Relevé bancaire :
   onglets Gestion mots clés / Configuration banque / Rapprochement
   bancaire, et la popup « Ajouter une banque ».
   ----------------------------------------------------------------
   RÈGLES :
   - Toutes les règles sont scopées sous `.rb-root` (écran),
     `md-dialog.rb-dialog` (popups montées sur document.body) ou
     `.tooltip.rb-tip` (infobulles rendues dans <body>).
   - AUCUNE classe globale `ax-*` n'est redéfinie sans scope.
   - Remplace les blocs <style> inline des 5 vues.
   - Typographie : jamais sous 13 px (cf. axeane-ui-v2-regles.md).
   - Couleur des boutons : ce qui engage a une masse, ce qui assiste
     n'a qu'un trait.
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════
   1. RACINE ÉCRAN
   ═══════════════════════════════════════════════════════════════ */
/* .ax-container est en height:100% : elle ne résout que si son parent
   a lui-même une hauteur bornée. */
.rb-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-family: var(--ax-font);
}
.rb-root > .ax-container {
    flex: 1;
    min-height: 0;
}

/* Les trois onglets sont montés par ng-include : le conteneur produit
   doit se comporter comme une colonne flex, sinon la hauteur ne
   descend pas jusqu'au tableau et plus rien ne défile. */
.rb-root .ax-fiche-body { display: flex; flex-direction: column; min-height: 0; }
.rb-root .rb-include {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.rb-root .rb-tab {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 20px 0;
    overflow: hidden;
}

/* Infobulles : rendues dans <body>, donc hors de .rb-root.
   pointer-events:none empêche la boucle survol/quitter quand la bulle
   recouvre son déclencheur. */
.tooltip.rb-tip { pointer-events: none; }
.tooltip.rb-tip .tooltip-inner {
    max-width: 320px;
    padding: 7px 11px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    background: #1f2937;
    border-radius: var(--ax-radius-sm, 8px);
}

/* ═══════════════════════════════════════════════════════════════
   2. BARRE D'OUTILS ET BOUTONS
   ═══════════════════════════════════════════════════════════════ */
.rb-root .ax-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Barre d'actions propre à un onglet : intitulé à gauche, boutons à droite. */
.rb-root .rb-tab-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    flex-shrink: 0;
}
.rb-root .rb-tab-actions-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.rb-root .rb-tab-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ax-text-strong, #0f172a);
}
.rb-root .rb-tab-title i { color: var(--ax-primary, #3f51b5); }
.rb-root .rb-tab-subtitle {
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--ax-text-sec, #64748b);
    line-height: 1.45;
    max-width: 78ch;
}

/* ───────── Boutons de barre d'outils ─────────
   Ce qui ENGAGE a une masse, ce qui ASSISTE n'a qu'un trait :
     plein indigo (.ax-btn-primary) .... valider, enregistrer, ajouter
     plein orange (.rb-btn-orange) ..... une porte vers un autre écran
     trait indigo (.rb-btn-indigo) ..... recharger, actualiser
     trait ambre (.rb-btn-warning) ..... une remise à zéro destructrice
     gris (.ax-btn-outline) ............ navigation, annulation, filtres
   Toutes les teintes sont des jetons du design system. */
.rb-root .ax-btn.rb-btn-indigo,
md-dialog.rb-dialog .ax-btn.rb-btn-indigo {
    background: #fff;
    color: var(--ax-primary-dark, #303f9f);
    border: 1px solid var(--ax-primary-light, #c5cae9);
    font-weight: 600;
}
.rb-root .ax-btn.rb-btn-indigo:hover,
.rb-root .ax-btn.rb-btn-indigo:focus,
md-dialog.rb-dialog .ax-btn.rb-btn-indigo:hover,
md-dialog.rb-dialog .ax-btn.rb-btn-indigo:focus {
    background: var(--ax-primary-50, #e8eaf6);
    border-color: var(--ax-primary, #3f51b5);
    color: var(--ax-primary-dark, #303f9f);
}
.rb-root .ax-btn.rb-btn-indigo i,
md-dialog.rb-dialog .ax-btn.rb-btn-indigo i { color: var(--ax-primary, #3f51b5); }

/* Réinitialiser supprime la configuration existante : l'ambre prévient
   sans crier au danger (ce n'est pas une suppression de données métier). */
.rb-root .ax-btn.rb-btn-warning {
    background: #fff;
    color: var(--ax-warning-text, #92400e);
    border: 1px solid var(--ax-warning-border, #fde68a);
    font-weight: 600;
}
.rb-root .ax-btn.rb-btn-warning:hover,
.rb-root .ax-btn.rb-btn-warning:focus {
    background: var(--ax-warning-light, #fffbeb);
    border-color: var(--ax-warning, #f59e0b);
    color: var(--ax-warning-text, #92400e);
}
.rb-root .ax-btn.rb-btn-warning i { color: var(--ax-warning, #f59e0b); }

/* ═══════════════════════════════════════════════════════════════
   3. BANDEAU « RAPPROCHEMENT BANCAIRE » (raccourci global)
   ═══════════════════════════════════════════════════════════════ */
.rb-root .rb-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 11px 16px;
    margin: 0 0 14px;
    background: var(--ax-primary-50, #eef2ff);
    border: 1px solid var(--ax-primary-light, #c5cae9);
    border-radius: var(--ax-radius-sm, 8px);
    flex-shrink: 0;
}
.rb-root .rb-banner-icon {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ax-primary-light, #c5cae9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ax-primary, #3f51b5);
    font-size: 14px;
}
.rb-root .rb-banner-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ax-text-strong, #0f172a);
    white-space: nowrap;
}
.rb-root .rb-banner-state {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}
.rb-root .rb-on  { color: var(--ax-success-text, #15803d); }
.rb-root .rb-off { color: var(--ax-text-sec, #64748b); }
.rb-root .rb-banner-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 13px;
    color: var(--ax-text-sec, #64748b);
    line-height: 1.4;
}
.rb-root .rb-banner-note i { color: var(--ax-primary, #3f51b5); flex: none; }

/* Interrupteur compact, aligné sur le gabarit du design system */
.rb-root .ax-switch.rb-switch-sm { width: 34px; height: 19px; flex-shrink: 0; }
.rb-root .ax-switch.rb-switch-sm .ax-slider { border-radius: 19px; }
.rb-root .ax-switch.rb-switch-sm .ax-slider:before { height: 13px; width: 13px; left: 3px; bottom: 3px; }
.rb-root .ax-switch.rb-switch-sm input:checked + .ax-slider:before { transform: translateX(15px); }

/* ═══════════════════════════════════════════════════════════════
   4. BARRE DE FILTRES
   Les filtres quittent les <th> : nya-bs-select ne sait pas s'annexer
   au <body>, et une liste ouverte depuis un entête serait rognée par
   le conteneur de défilement du tableau.
   ═══════════════════════════════════════════════════════════════ */
.rb-root .rb-filters {
    flex: none;
    /* overflow VISIBLE : sans quoi chaque liste déroulante est rognée.
       La hauteur est bornée assez haut pour ne jamais devoir défiler. */
    max-height: 400px;
    overflow: visible;
    background: #f8fafc;
    border: 1px solid var(--ax-border-light, #eef0f6);
    border-radius: var(--ax-radius-sm, 8px);
    padding: 12px 14px;
    margin: 0 0 16px;
    transition: max-height .3s cubic-bezier(.4, 0, .2, 1),
                opacity .22s ease,
                padding .3s cubic-bezier(.4, 0, .2, 1),
                margin .3s cubic-bezier(.4, 0, .2, 1);
}
.rb-root .rb-filters.rb-closed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-color: transparent;
    overflow: hidden;
    /* max-height:0 ne retire PAS du parcours de tabulation. */
    visibility: hidden;
}
.rb-root .rb-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
    margin: 0;
}
.rb-root .rb-fld {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}
.rb-root .rb-fld > label {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    white-space: nowrap;
}
.rb-root .rb-fld-text   { flex: 1 1 260px; min-width: 200px; }
.rb-root .rb-fld-select { flex: 0 0 240px; width: 240px; }
.rb-root .rb-filter-spacer { flex: 1 1 30px; min-width: 0; }

/* Champs : 34 px bord à bord, pour un texte de 14 px */
.rb-root .rb-fld .form-control,
.rb-root .rb-th-filter .form-control {
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid var(--ax-border-input, #cbd5e1);
    border-radius: var(--ax-radius-sm, 8px);
    background: #fff;
    box-shadow: none;
}
.rb-root .rb-fld .form-control:focus,
.rb-root .rb-th-filter .form-control:focus {
    border-color: var(--ax-border-focus, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   5. LISTES nya-bs-select
   Le <ol> est inline-block par défaut : il doit passer en bloc pour ne
   pas déborder de son champ. La règle vendeur impose width:220px avec
   une spécificité (0,4,0) — d'où les !important.
   ═══════════════════════════════════════════════════════════════ */
.rb-root .rb-fld ol.nya-bs-select,
.rb-root .rb-th-filter ol.nya-bs-select,
.rb-root .rb-form-row ol.nya-bs-select,
md-dialog.rb-dialog .rb-field ol.nya-bs-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--ax-border-input, #cbd5e1) !important;
    border-radius: var(--ax-radius-sm, 8px);
    background: #fff;
}
.rb-root .rb-fld ol.nya-bs-select > .dropdown-toggle,
.rb-root .rb-fld ol.nya-bs-select > .btn,
.rb-root .rb-th-filter ol.nya-bs-select > .dropdown-toggle,
.rb-root .rb-th-filter ol.nya-bs-select > .btn,
.rb-root .rb-form-row ol.nya-bs-select > .dropdown-toggle,
.rb-root .rb-form-row ol.nya-bs-select > .btn,
md-dialog.rb-dialog .rb-field ol.nya-bs-select > .dropdown-toggle,
md-dialog.rb-dialog .rb-field ol.nya-bs-select > .btn {
    height: 32px !important;
    line-height: 32px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 24px 0 10px !important;
    box-sizing: border-box;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--ax-text-body, #334155);
    overflow: hidden;
}
.rb-root ol.nya-bs-select.open,
md-dialog.rb-dialog ol.nya-bs-select.open { z-index: 1040; }
.rb-root ol.nya-bs-select > .dropdown-menu,
md-dialog.rb-dialog ol.nya-bs-select > .dropdown-menu {
    /* Un compte comptable, c'est un numéro ET un libellé : la liste a
       besoin de plus de place que le champ qui l'ouvre. Le !important est
       obligatoire : axeane-modern-theme.css impose min-width:max(100%,180px)
       !important sur tout .nya-bs-select .dropdown-menu. */
    min-width: 380px !important;
    max-width: 520px;
    border-radius: var(--ax-radius-sm, 8px);
    border: 1px solid var(--ax-border, #e5e7eb);
    box-shadow: var(--ax-shadow-lg, 0 12px 32px rgba(15, 23, 42, .14));
    padding: 4px;
}
/* Sans attribut size, la librairie ne pose jamais overflow-y sur .inner */
.rb-root .nya-bs-select .dropdown-menu.inner,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu.inner {
    position: static;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
    box-shadow: none;
    padding: 0;
}
/* Le libellé du compte passe à la ligne au lieu de provoquer une barre de
   défilement horizontale (bootstrap force white-space:nowrap sur le <a>). */
.rb-root .nya-bs-select .dropdown-menu li > a,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li > a { white-space: normal; }
.rb-root .nya-bs-select .dropdown-menu li > a > span,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li > a > span {
    display: inline;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}
.rb-root .nya-bs-select .dropdown-menu li > a,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li > a {
    font-size: 13.5px;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--ax-text-body, #334155);
}
.rb-root .nya-bs-select .dropdown-menu li > a:hover,
.rb-root .nya-bs-select .dropdown-menu li:hover > a,
.rb-root .nya-bs-select .dropdown-menu li.active > a,
.rb-root .nya-bs-select .dropdown-menu li.selected > a,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li > a:hover,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li:hover > a,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li.active > a,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li.selected > a {
    background: var(--ax-primary-50, #eef2ff) !important;
    color: var(--ax-primary-dark, #303f9f) !important;
}
/* Le libellé secondaire doit rester lisible dans l'état actif/survolé. */
.rb-root .nya-bs-select .dropdown-menu li > a:hover small,
.rb-root .nya-bs-select .dropdown-menu li:hover > a small,
.rb-root .nya-bs-select .dropdown-menu li.active > a small,
.rb-root .nya-bs-select .dropdown-menu li.selected > a small,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li > a:hover small,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li:hover > a small,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li.active > a small,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li.selected > a small {
    color: var(--ax-primary, #3f51b5) !important;
}
/* La coche d'un item sélectionné reste visible dans l'état actif. */
.rb-root .nya-bs-select .dropdown-menu li.selected > a .check-mark,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li.selected > a .check-mark {
    color: var(--ax-primary, #3f51b5) !important;
}
.rb-root .nya-bs-select .bs-searchbox,
md-dialog.rb-dialog .nya-bs-select .bs-searchbox { padding: 4px 6px 6px; }
.rb-root .nya-bs-select .bs-searchbox .form-control,
md-dialog.rb-dialog .nya-bs-select .bs-searchbox .form-control {
    height: 32px;
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid var(--ax-border-input, #cbd5e1);
    box-shadow: none;
}
.rb-root .nya-bs-select .bs-actionsbox,
md-dialog.rb-dialog .nya-bs-select .bs-actionsbox { padding: 0 6px 6px; }
.rb-root .nya-bs-select .bs-actionsbox .btn-group,
md-dialog.rb-dialog .nya-bs-select .bs-actionsbox .btn-group { display: flex; gap: 6px; width: 100%; }
.rb-root .nya-bs-select .bs-actionsbox .btn,
md-dialog.rb-dialog .nya-bs-select .bs-actionsbox .btn {
    flex: 1;
    width: auto;
    font-size: 13px;
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.rb-root .nya-bs-select .dropdown-menu li > a small,
md-dialog.rb-dialog .nya-bs-select .dropdown-menu li > a small {
    font-size: 13px;
    color: var(--ax-text-sec, #64748b);
    margin-left: 6px;
}
/* La coche des listes multiples ne doit pas apparaître dans le bouton */
.rb-root .nya-bs-select > .dropdown-toggle .check-mark,
md-dialog.rb-dialog .nya-bs-select > .dropdown-toggle .check-mark { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   6. TABLEAUX
   ═══════════════════════════════════════════════════════════════ */
/* min-height : plancher assez haut pour qu'un menu déroulant ouvert depuis
   un filtre d'entête tienne toujours dans le conteneur, même quand le tableau
   ne contient que quelques lignes (sinon overflow:auto le rognerait). */
.rb-root .ax-table-scroll { flex: 1; min-height: 380px; }
/* Largeur minimale : sans elle les colonnes se chevauchent sur un
   écran étroit. .ax-table-scroll porte déjà overflow-x:auto. */
.rb-root .ax-table-scroll table.table { min-width: 900px; }
.rb-root .ax-table-scroll table.table.rb-minw-xs { min-width: 620px; }
.rb-root .ax-table-scroll table.table.rb-minw-sm { min-width: 900px; }
.rb-root .ax-table-scroll table.table.rb-minw-md { min-width: 1180px; }

.rb-root .ax-table-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.rb-root .ax-table-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 6px; }
.rb-root .ax-table-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
.rb-root .ax-table-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Entête : un cran au-dessus du 12 px du design system */
.rb-root .ax-table-scroll table.table > thead > tr > th { font-size: 13px; }
/* Le design system fige les cellules à height:34px / line-height:34px,
   ce qui convient à une ligne de texte. Ici plusieurs colonnes portent
   une deuxième ligne (pays de la banque, compte en sous-titre) ou un
   champ de saisie : la hauteur revient au contenu. */
.rb-root .ax-table-scroll table.table > tbody > tr > td {
    height: auto;
    line-height: 1.45;
    padding: 8px;
    vertical-align: middle;
}
/* Aucune ligne n'est cliquable : pas de main au survol. */
.rb-root .ax-table-scroll table.table > tbody > tr { cursor: default; }

.rb-root .ax-table-scroll table.table > thead > tr > th.rb-num,
.rb-root .ax-table-scroll table.table > tbody > tr > td.rb-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rb-root .ax-table-scroll table.table > thead > tr > th.rb-center,
.rb-root .ax-table-scroll table.table > tbody > tr > td.rb-center { text-align: center; }
.rb-root .ax-table-scroll table.table > thead > tr > th.rb-actions,
.rb-root .ax-table-scroll table.table > tbody > tr > td.rb-actions { text-align: right; }

/* Lien de tri dans l'entête */
.rb-root .rb-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.rb-root .rb-sort:hover,
.rb-root .rb-sort:focus { color: var(--ax-primary, #3f51b5); text-decoration: none; }
.rb-root .rb-sort i,
.rb-root .rb-sort span.fa { font-size: 13px; color: var(--ax-primary, #3f51b5); }

/* Champs de saisie dans une cellule (mode édition) */
.rb-root .ax-table-scroll table.table > tbody > tr > td .form-control {
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    padding: 4px 9px;
    font-size: 14px;
    border: 1px solid var(--ax-border-input, #cbd5e1);
    border-radius: 6px;
    box-shadow: none;
}
.rb-root .ax-table-scroll table.table > tbody > tr > td .form-control:focus {
    border-color: var(--ax-border-focus, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
    outline: none;
}
.rb-root .ax-table-scroll table.table > tbody > tr > td select.form-control { padding-right: 24px; }

/* Ligne en cours d'édition : la mettre en évidence évite de saisir
   dans la mauvaise ligne sur un tableau long. */
.rb-root .ax-table-scroll table.table > tbody > tr.rb-row-edit > td {
    background: var(--ax-warning-light, #fffbeb) !important;
}

/* Deuxième ligne d'information dans une cellule */
.rb-root .rb-cell-sub {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--ax-text-sec, #64748b);
    line-height: 1.35;
}
.rb-root .rb-strong { font-weight: 700; color: var(--ax-text-strong, #0f172a); }
.rb-root .rb-muted  { color: var(--ax-text-sec, #64748b); font-style: italic; }
.rb-root .rb-dots   { letter-spacing: 2px; font-size: 14px; color: #475569; }

/* Ligne « aucun résultat » et chargement */
.rb-root .rb-empty-row td,
.rb-root .rb-loading-row td {
    text-align: center;
    color: var(--ax-text-sec, #64748b);
    padding: 22px 12px !important;
    font-size: 13.5px;
}
.rb-root .rb-empty-row i {
    display: block;
    margin-bottom: 6px;
    font-size: 24px;
    color: var(--ax-text-light, #cbd5e1);
}
.rb-root .rb-loading-row i { margin-left: 6px; color: var(--ax-primary, #3f51b5); }

/* Boutons d'action : pas de déplacement au survol (évite la boucle
   survol/quitter avec l'infobulle) */
.rb-root .ax-btn-group > .abtn:hover,
.rb-root .ax-btn-group > .abtn:active { transform: none !important; }
.rb-root .ax-btn-group > .abtn i { pointer-events: none; }
.rb-root .ax-btn-group > .abtn:focus-visible {
    outline: 2px solid var(--ax-border-focus, #2563eb);
    outline-offset: -2px;
    z-index: 2;
}
.rb-root .abtn:disabled,
.rb-root .abtn[disabled] {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(40%);
}
.rb-root .ax-actions-cell { display: inline-flex; align-items: center; gap: 6px; }

/* ───────── Filtres replacés dans l'entête des colonnes ─────────
   Chaque colonne porte son filtre sous l'intitulé, comme le plan comptable.
   La liste déroulante s'ouvre vers le bas, dans la zone des lignes. */
.rb-root .ax-table-scroll table.table > thead > tr > th { vertical-align: top; }
.rb-root .rb-th-filter { margin-top: 6px; font-weight: 400; }

/* Entête de la colonne Actions : intitulé + boutons Ajouter / Retirer filtres */
.rb-root .ax-table-scroll table.table > thead > tr > th.rb-actions .rb-th-actions {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.rb-root .rb-th-actions .rb-th-label { font-weight: 600; line-height: 1.2; }

/* ═══════════════════════════════════════════════════════════════
   7. PASTILLES
   ═══════════════════════════════════════════════════════════════ */
.rb-root .rb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--ax-radius-pill, 999px);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    border: 1px solid transparent;
}
.rb-root .rb-badge-debit   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.rb-root .rb-badge-credit  { background: #ecfdf5; color: #166534; border-color: #bbf7d0; }
.rb-root .rb-badge-actif   { background: #ecfdf5; color: #166534; border-color: #bbf7d0; }
.rb-root .rb-badge-inactif { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.rb-root .rb-badge-pays    { background: var(--ax-warning-light, #fffbeb); color: var(--ax-warning-text, #92400e); border-color: var(--ax-warning-border, #fde68a); }
.rb-root .rb-badge-pays.rb-badge-tunisie { background: var(--ax-info-light, #eff6ff); color: var(--ax-info-text, #1e40af); border-color: var(--ax-info-border, #bfdbfe); }
.rb-root .rb-badge i { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════
   8. FORMULAIRE EN LIGNE (onglet Rapprochement)
   ═══════════════════════════════════════════════════════════════ */
.rb-root .rb-form-card {
    flex-shrink: 0;
    background: #f8fafc;
    border: 1px solid var(--ax-border-light, #eef0f6);
    border-radius: var(--ax-radius-sm, 8px);
    padding: 12px 14px;
    margin: 0 0 16px;
}
.rb-root .rb-form-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ax-text-strong, #0f172a);
}
.rb-root .rb-form-card-title i { color: var(--ax-primary, #3f51b5); }
.rb-root .rb-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
}
.rb-root .rb-form-row .rb-fld-racine  { flex: 1 1 160px; min-width: 140px; }
.rb-root .rb-form-row .rb-fld-sens    { flex: 0 0 150px; width: 150px; }
.rb-root .rb-form-row .rb-fld-libelle { flex: 2 1 260px; min-width: 200px; }
.rb-root .rb-form-row .rb-fld-actif   { flex: 0 0 auto; }
.rb-root .rb-form-row .rb-fld-bouton  { flex: 0 0 auto; }
.rb-root .rb-form-row .rb-fld-bouton .ax-btn { margin-bottom: 1px; }
.rb-root .rb-form-row .form-control {
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid var(--ax-border-input, #cbd5e1);
    border-radius: var(--ax-radius-sm, 8px);
    background: #fff;
    box-shadow: none;
}
.rb-root .rb-form-row .form-control:focus {
    border-color: var(--ax-border-focus, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
    outline: none;
}
.rb-root .rb-req { color: var(--ax-danger, #e53935); margin-left: 2px; font-weight: 700; }
.rb-root .rb-optionnel { font-weight: 400; color: var(--ax-text-sec, #64748b); }

/* ═══════════════════════════════════════════════════════════════
   9. LISTE nya-bs-select DANS UNE CELLULE (journal en édition)
   Même composant que le select journal en ligne du Grand livre : il
   s'ouvre toujours vers le bas, jamais de bascule vers le haut comme
   le faisait ui-select. Le bouton fermé prend l'aspect d'un champ.
   ═══════════════════════════════════════════════════════════════ */
.rb-root ol.nya-bs-select.rb-cell-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--ax-border-input, #cbd5e1) !important;
    border-radius: 6px;
    background: #fff;
}
.rb-root ol.nya-bs-select.rb-cell-select > .dropdown-toggle,
.rb-root ol.nya-bs-select.rb-cell-select > .btn {
    height: 30px !important;
    line-height: 30px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 22px 0 9px !important;
    box-sizing: border-box;
    border: none !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--ax-text-body, #334155);
    text-align: left;
    overflow: hidden;
}
.rb-root ol.nya-bs-select.rb-cell-select > .dropdown-toggle .filter-option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Codes de journaux courts : la liste n'a pas besoin des 380 px du compte
   comptable. On annule le min-width large pour cette liste-là. */
.rb-root ol.nya-bs-select.rb-cell-select > .dropdown-menu {
    min-width: 150px !important;
    max-width: 260px;
}

/* ═══════════════════════════════════════════════════════════════
   10. PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.rb-root .rb-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 12px 0 14px;
}
.rb-root .rb-page-size { display: inline-flex; align-items: center; gap: 8px; }
.rb-root .rb-page-size-label {
    font-size: 13.5px;
    color: var(--ax-text-sec, #64748b);
    font-weight: 600;
}
.rb-root .rb-page-size-group { display: inline-flex; gap: 4px; }
.rb-root .rb-page-size-btn {
    min-width: 34px;
    height: 30px;
    padding: 0 9px;
    border: 1px solid var(--ax-border, #e5e7eb);
    background: #fff;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ax-text-sec, #64748b);
    cursor: pointer;
    transition: var(--ax-tr-fast, all .15s ease);
}
.rb-root .rb-page-size-btn:hover {
    border-color: var(--ax-primary-light, #c5cae9);
    color: var(--ax-primary-dark, #303f9f);
}
.rb-root .rb-page-size-btn.rb-page-size-on {
    background: var(--ax-primary, #3f51b5);
    border-color: var(--ax-primary, #3f51b5);
    color: #fff;
}
.rb-root .rb-pagination .pagination { margin: 0; }
.rb-root .rb-pagination .pagination > li > a,
.rb-root .rb-pagination .pagination > li > span {
    font-size: 13px;
    color: var(--ax-text-sec, #64748b);
    border-color: var(--ax-border, #e5e7eb);
    padding: 5px 11px;
}
.rb-root .rb-pagination .pagination > .active > a,
.rb-root .rb-pagination .pagination > .active > span,
.rb-root .rb-pagination .pagination > .active > a:hover,
.rb-root .rb-pagination .pagination > .active > span:hover {
    background: var(--ax-primary, #3f51b5);
    border-color: var(--ax-primary, #3f51b5);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   11. POPUPS
   ═══════════════════════════════════════════════════════════════ */
md-dialog.rb-dialog {
    /* angular-material plafonne à 80% ; on remonte sans supprimer la
       borne, sinon le corps n'a plus de hauteur à répartir. */
    max-height: 92vh !important;
    max-width: 96vw !important;
    /* axeane-modern-theme.css impose md-dialog { overflow:hidden !important } */
    overflow: hidden !important;
    border-radius: 16px !important;
    font-family: var(--ax-font);
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .05);
}
/* Un !important bat toujours un style= inline : les vues ne peuvent pas
   fixer leur largeur elles-mêmes, d'où ces gabarits. */
md-dialog.rb-dialog.rb-dialog-sm { width: min(640px, 96vw); }
md-dialog.rb-dialog.rb-dialog-md { width: min(880px, 96vw); }

md-dialog.rb-dialog > form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

md-dialog.rb-dialog .rb-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 20px;
    background: linear-gradient(135deg, #3949AB 0%, #5C6BC0 50%, #7986CB 100%);
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
md-dialog.rb-dialog .rb-dialog-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, .08) 0%, transparent 70%);
    pointer-events: none;
}
md-dialog.rb-dialog .rb-dialog-header-left { display: flex; align-items: center; gap: 14px; z-index: 1; min-width: 0; }
md-dialog.rb-dialog .rb-dialog-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
md-dialog.rb-dialog .rb-dialog-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
md-dialog.rb-dialog .rb-dialog-subtitle { font-size: 13px; font-weight: 400; opacity: .8; margin-top: 2px; }
md-dialog.rb-dialog .rb-dialog-close {
    z-index: 1;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background .2s ease, transform .2s ease;
}
md-dialog.rb-dialog .rb-dialog-close:hover { background: rgba(255, 255, 255, .25); transform: rotate(90deg); }
md-dialog.rb-dialog .rb-dialog-close i { pointer-events: none; }

md-dialog.rb-dialog .rb-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    /* visible : la liste des banques est un nya-bs-select, qui ne sait
       pas s'annexer au <body> et serait rognée par un conteneur qui
       défile. Le contenu tient sans défilement. */
    overflow: visible;
    background: #F6F7FB;
    padding: 20px;
}
md-dialog.rb-dialog .rb-field { margin: 0 0 16px; }
md-dialog.rb-dialog .rb-field:last-child { margin-bottom: 0; }
md-dialog.rb-dialog .rb-field > label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
md-dialog.rb-dialog .rb-field .form-control {
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid var(--ax-border-input, #cbd5e1);
    border-radius: var(--ax-radius-sm, 8px);
    background: #fff;
    box-shadow: none;
}
md-dialog.rb-dialog .rb-field .form-control:focus {
    border-color: var(--ax-border-focus, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
    outline: none;
}
md-dialog.rb-dialog .rb-field-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--ax-text-sec, #64748b);
    line-height: 1.45;
}
md-dialog.rb-dialog .rb-field-note i { color: var(--ax-primary, #3f51b5); margin-top: 2px; flex: none; }
md-dialog.rb-dialog .rb-req { color: var(--ax-danger, #e53935); margin-left: 2px; font-weight: 700; }
md-dialog.rb-dialog .rb-lock { color: var(--ax-warning, #f59e0b); }

md-dialog.rb-dialog .rb-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--ax-border, #e5e7eb);
    background: #fff;
    flex-shrink: 0;
    border-radius: 0 0 16px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .rb-root .rb-banner-note { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 992px) {
    .rb-root .rb-tab { padding: 12px 14px 0; }
    .rb-root .rb-filter-bar { gap: 10px 14px; }
    .rb-root .rb-fld-select { flex: 1 1 200px; width: auto; max-width: 280px; }
    .rb-root .rb-form-row .rb-fld-sens { flex: 1 1 140px; width: auto; max-width: 200px; }
    .rb-root .rb-filter-spacer { flex: 999 1 0; }
}
