/* ============================================================
   Module Contrats & Échéanciers — surcharges et variantes badges
   (Étend axeane-ui/axeane-panels.css)
   ============================================================ */

/* Labels uniformes des formulaires du module */
.ech-label {
    font-weight: 600;
    color: #475569;
    font-size: 12.5px;
    margin-bottom: 4px;
    display: block;
    letter-spacing: .2px;
}

/* nya-bs-select : conserve le look natif, n'aligne que la hauteur, la largeur et active le scroll du menu */
.ax-container .nya-bs-select.btn-group,
.ax-container ol.nya-bs-select {
    width: 100%;
}
.ax-container .nya-bs-select.btn-group > .btn,
.ax-container .nya-bs-select.btn-group > .dropdown-toggle {
    width: 100% !important;
    text-align: left;
    height: 38px;
    padding: 8px 12px;
    font-size: 13px;
}

/* ─── Dropdown menu : passer AU-DESSUS de tout (panels, tables, etc.) ─── */
.ax-container .nya-bs-select.btn-group.open {
    position: relative;
    z-index: 1050; /* au-dessus des panels (.ax-table-wrapper) */
}
.ax-container .nya-bs-select .dropdown-menu {
    z-index: 1060 !important;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ax-container .nya-bs-select .dropdown-menu .inner,
.ax-container .nya-bs-select .dropdown-menu.inner {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ax-container .nya-bs-select .dropdown-menu::-webkit-scrollbar,
.ax-container .nya-bs-select .dropdown-menu .inner::-webkit-scrollbar {
    width: 8px;
}
.ax-container .nya-bs-select .dropdown-menu::-webkit-scrollbar-thumb,
.ax-container .nya-bs-select .dropdown-menu .inner::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35);
    border-radius: 4px;
}

/* ─── Permettre au dropdown de DÉBORDER des panels et lignes du formulaire ─── */
.ech-scroll-zone .ax-table-wrapper,
.ech-scroll-zone .ax-table-wrapper > div[style*="padding"],
.ech-scroll-zone .row,
.ech-scroll-zone .form-group {
    overflow: visible !important;
}

/* Zone scrollable interne (fiche détail, formulaire long).
   .ax-container est overflow:hidden + flex-column : on rend scrollable
   tout ce qui suit la toolbar pour rester dans la zone visible.

   ⚠️ Le passage en `display:flex; flex-direction:column` est CIBLÉ
   au mode TABLE de la liste principale (présence d'un `.ech-list-wrapper`).
   En mode FICHE (onglets Aperçu/Modifier/Occurrences/…), on garde le flux
   bloc normal pour éviter que les wrappers se "décalent" vers le bas avec
   un espace vide en dessous (un item flex sans `flex:1` ne remplit pas la
   zone, mais l'agencement attendu en mode FICHE est un empilement classique). */
.ech-scroll-zone {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: visible;
    padding: 14px 4px 24px 4px;
    min-height: 0;
}
/* Activation du flex-column UNIQUEMENT quand on a une liste principale dedans.
   Double mécanisme pour compat large :
   - `:has()` (Chrome 105+, Safari 15.4+, FF 121+) — détecte automatiquement
   - `.ech-scroll-zone--list` — fallback explicite à ajouter sur la zone scroll
     du mode TABLE (cf. echeancierList.html / tiersEcheancierList.html) */
.ech-scroll-zone:has(> .ech-list-wrapper),
.ech-scroll-zone--list {
    display: flex;
    flex-direction: column;
}
/* Empêcher le rétrécissement des enfants directs (panels, grids KPI) :
   sans cela, sur petit écran le flexbox parent les compresse et ils "disparaissent". */
.ech-scroll-zone > .ax-table-wrapper,
.ech-scroll-zone > .ech-kpi-grid,
.ech-scroll-zone > .row,
.ech-scroll-zone > form {
    flex-shrink: 0;
}
/* Scrollbar discrète */
.ech-scroll-zone::-webkit-scrollbar { width: 8px; }
.ech-scroll-zone::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .25);
    border-radius: 4px;
}
.ech-scroll-zone::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .45);
}

/* Variantes badges (warning / danger / info) — alignées sur le style ax-status-open/closed */
.ax-status-badge.ax-status-warning {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

.ax-status-badge.ax-status-danger {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #991B1B;
    border: 1px solid rgba(220, 38, 38, 0.25);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

.ax-status-badge.ax-status-info {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #1E40AF;
    border: 1px solid rgba(59, 130, 246, 0.25);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

/* Onglets style ax dans la zone détail */
.ax-container .nav-tabs > li > a {
    color: #64748b;
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    transition: color .18s ease, border-color .18s ease;
}
.ax-container .nav-tabs > li > a:hover {
    background: transparent;
    color: var(--ax-primary, #3f51b5);
}
.ax-container .nav-tabs > li.active > a,
.ax-container .nav-tabs > li.active > a:hover,
.ax-container .nav-tabs > li.active > a:focus {
    color: var(--ax-primary, #3f51b5);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--ax-primary, #3f51b5);
    font-weight: 600;
}

/* Cartes KPI : effet hover doux */
.ax-container > .row > .col-sm-3 > div[style*="border-left"] {
    transition: transform .15s ease, box-shadow .15s ease;
}
.ax-container > .row > .col-sm-3 > div[style*="border-left"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

/* ============================================================
   KPI Cards modernes (centrées, équilibrées, design system)
   ============================================================ */
.ech-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 16px;
    max-width: 1280px;
    margin: 6px auto 22px auto;
    padding: 0 4px;
}

@media (max-width: 1100px) {
    .ech-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ech-kpi-grid { grid-template-columns: 1fr; }
}

.ech-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid var(--ax-border, #e2e8f0);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
}
.ech-kpi::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ech-kpi-color, #94a3b8);
}
.ech-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .12);
    border-color: var(--ech-kpi-color, #cbd5e1);
}

.ech-kpi-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ech-kpi-bg, #f1f5f9);
    color: var(--ech-kpi-color, #475569);
    font-size: 20px;
    transition: transform .18s ease;
}
.ech-kpi:hover .ech-kpi-icon { transform: scale(1.06); }

.ech-kpi-body {
    flex: 1;
    min-width: 0;
}
.ech-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #64748b;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ech-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.ech-kpi-unit {
    display: inline-block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: .8px;
    text-transform: uppercase;
}

/* Variantes de tonalité — via attribut data-tone */
.ech-kpi[data-tone="danger"]  { --ech-kpi-color: #ef4444; --ech-kpi-bg: #fef2f2; }
.ech-kpi[data-tone="danger"]  .ech-kpi-value { color: #b91c1c; }

.ech-kpi[data-tone="warning"] { --ech-kpi-color: #f59e0b; --ech-kpi-bg: #fffbeb; }
.ech-kpi[data-tone="warning"] .ech-kpi-value { color: #b45309; }

.ech-kpi[data-tone="info"]    { --ech-kpi-color: #3b82f6; --ech-kpi-bg: #eff6ff; }
.ech-kpi[data-tone="info"]    .ech-kpi-value { color: #1d4ed8; }

.ech-kpi[data-tone="success"] { --ech-kpi-color: #10b981; --ech-kpi-bg: #ecfdf5; }
.ech-kpi[data-tone="success"] .ech-kpi-value { color: #047857; }

/* Print : tableau prévisionnel */
@media print {
    .no-print { display: none !important; }
    .ax-container { padding: 0 !important; }
    .ax-table-wrapper { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ============================================================
   Historique — Timeline d'activité (activity feed)
   Aligné avec le design system .ax-table-wrapper (header + contenu)
   ============================================================ */
.ech-timeline {
    position: relative;
    padding: 18px 22px 8px 22px;
    background: #fff;
}

/* Rail vertical reliant les markers */
.ech-timeline::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 14px;
    left: 38px;          /* doit coïncider avec le centre du .ech-timeline-marker (22px + 16px/2) */
    width: 2px;
    background: linear-gradient(to bottom, #e2e8f0 0%, #e2e8f0 90%, transparent 100%);
    border-radius: 2px;
}

.ech-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 6px 0 18px 0;
}
.ech-timeline-item:last-child { padding-bottom: 4px; }

.ech-timeline-marker {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--ech-tl-color, #94a3b8);
    color: var(--ech-tl-color, #475569);
    font-size: 14px;
    z-index: 1;
    box-shadow: 0 0 0 4px #fff, 0 1px 3px rgba(15, 23, 42, .08);
    transition: transform .18s ease;
}
.ech-timeline-item:hover .ech-timeline-marker {
    transform: scale(1.08);
}

.ech-timeline-content {
    flex: 1;
    min-width: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--ech-tl-color, #94a3b8);
    border-radius: 8px;
    padding: 10px 14px 12px 14px;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.ech-timeline-item:hover .ech-timeline-content {
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .10);
    transform: translateY(-1px);
}

.ech-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ech-timeline-op {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: .1px;
}

.ech-timeline-date {
    font-size: 11.5px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ech-timeline-date .fa { color: #94a3b8; font-size: 11px; }
.ech-timeline-time {
    color: #94a3b8;
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
}

.ech-timeline-details {
    font-size: 12.5px;
    color: #334155;
    line-height: 1.5;
    margin: 4px 0 8px 0;
    word-break: break-word;
}

.ech-timeline-actor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
}
.ech-avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #3f51b5 100%);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.ech-actor-name {
    font-weight: 600;
    color: #475569;
}

/* Tonalités — pilotent --ech-tl-color (marker + bordure gauche) */
.ech-timeline-item.tone-success  { --ech-tl-color: #10b981; }
.ech-timeline-item.tone-info     { --ech-tl-color: #3b82f6; }
.ech-timeline-item.tone-warning  { --ech-tl-color: #f59e0b; }
.ech-timeline-item.tone-danger   { --ech-tl-color: #ef4444; }
.ech-timeline-item.tone-closed   { --ech-tl-color: #6d28d9; }
.ech-timeline-item.tone-neutral  { --ech-tl-color: #94a3b8; }

/* Responsive : sur petit écran, la date passe sous l'opération */
@media (max-width: 600px) {
    .ech-timeline { padding: 14px 12px 4px 12px; }
    .ech-timeline::before { left: 28px; }
    .ech-timeline-marker { width: 28px; height: 28px; font-size: 12px; }
    .ech-timeline-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Empty state — sous-titre explicatif (UX) */
.ax-empty-state small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* ============================================================
   Liste principale (Échéanciers, Tiers, …) — wrapper qui s'étire
   et reste bien cadré même avec peu d'éléments.

   ✅ Pré-requis : .ech-scroll-zone doit être en `display:flex; flex-direction:column;`
      (cf. règle ci-dessus) pour que `flex:1` sur le wrapper fonctionne.

   Toute liste principale d'un module Échéancier doit ajouter la classe
   `ech-list-wrapper` sur son `.ax-table-wrapper`.
   ============================================================ */
.ech-scroll-zone > .ech-list-wrapper {
    flex: 1 1 auto;           /* prend toute la hauteur dispo */
    min-height: 420px;        /* garde-fou : table cadrée même sur 1 ligne */
    display: flex;
    flex-direction: column;
}

.ech-list-wrapper .ax-table-zone {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ech-list-wrapper .ax-table-border {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ech-list-wrapper .ax-table-body-scroll {
    flex: 1 1 auto;
    min-height: 0;
    /* Le fond clair "wrapper" doit rester visible sous la table → on
       n'opacifie pas la zone. Les lignes apportent leur propre fond. */
}

/* Zébrures légères pour donner du rythme visuel même avec peu de lignes */
.ech-list-wrapper .ax-table tbody tr:nth-child(even) td {
    background: rgba(241, 245, 249, .55);   /* slate-100 ~55% */
}
.ech-list-wrapper .ax-table tbody tr:hover td {
    background: rgba(99, 102, 241, .06);    /* indigo-500 ~6% — accent doux */
}

/* État vide centré sur toute la hauteur du panneau (sinon il colle au top) */
.ech-list-wrapper .ax-table-body-scroll .ax-empty-state {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Onglets de la fiche échéancier — panel #FBF8F8 visible sous le
   contenu, rendu identique à l'écran Exercices
   `naxGestionExerciceTable.html`.

   À appliquer sur tout `.ax-table-wrapper` d'un onglet de la fiche
   (Aperçu, Occurrences, Écritures, Historique, Alertes, Pièces…)
   qui doit étirer son fond beige jusqu'en bas du panel.

   Comment ça marche :
   - le `.ax-table-wrapper` a déjà `background:#FBF8F8` (CSS global).
   - sa structure interne est : header-bar (flex-shrink:0) + table-zone
     (flex:1, background:#fbf8f8 aussi) → la zone interne s'étire.
   - le contenu (table, timeline…) garde sa hauteur naturelle ;
     l'espace restant est transparent → le fond beige du wrapper reste
     visible = "panel sous le contenu".
   - `height: 90%` étire le wrapper sur ~toute la hauteur de la zone
     scroll parent.

   Alias rétro-compatible : `.ech-occurrences-wrapper` (1er usage).
   ============================================================ */
.ech-tab-wrapper,
.ech-occurrences-wrapper {
    height: 90%;
}

/* ============================================================
   Input-group "Tiers + Nouveau tiers" — fiche échéancier
   (Pattern identique à .ech-compte-group de tiersEcheancierList,
   réutilisable globalement dans le module)
   ============================================================ */
.ech-tiers-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    position: relative;
}
.ech-tiers-group .ech-tiers-select {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
}
.ech-tiers-group .ech-tiers-select .nya-bs-select,
.ech-tiers-group .ech-tiers-select .bootstrap-select {
    width: 100% !important;
    margin: 0 !important;
}
/* Bouton du select : coins droits aplatis pour s'imbriquer avec le bouton "Nouveau" */
.ech-tiers-group .nya-bs-select .dropdown-toggle {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    margin: 0 !important;
}
.ech-tiers-group .nya-bs-select.open .dropdown-toggle,
.ech-tiers-group .nya-bs-select .dropdown-toggle:focus {
    box-shadow: inset 0 0 0 1.5px #3f51b5 !important;
    border-right: none !important;
}

.ech-tiers-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    min-height: 38px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3f51b5 0%, #5C6BC0 100%);
    border: 1.5px solid #3f51b5;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0 !important;
    margin-left: -1px !important;
    box-shadow: 0 1px 3px rgba(63, 81, 181, .25);
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
    position: relative;
    z-index: 2;
}
.ech-tiers-add-btn i { font-size: 14px; }
.ech-tiers-add-btn:hover {
    background: linear-gradient(135deg, #303F9F 0%, #3f51b5 100%);
    box-shadow: 0 4px 12px rgba(63, 81, 181, .35);
    transform: translateY(-1px);
}
.ech-tiers-add-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(63, 81, 181, .25);
}
.ech-tiers-add-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(63, 81, 181, .35);
}

/* ============================================================
   Tableau prévisionnel des engagements — design clair & lisible
   (Vue : views/echeancier/echeancierPrevision.html)
   ============================================================ */

/* Titre + légende toolbar */
.ech-prev-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ax-text, #1e293b);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ech-prev-title .fa { color: var(--ax-primary, #3f51b5); }

.ech-prev-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 11.5px;
    color: #475569;
}
.ech-prev-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ech-prev-legend-sep {
    padding-left: 14px;
    border-left: 1px solid #e2e8f0;
    color: #334155;
}
.ech-prev-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15,23,42,.06);
}
.ech-prev-dot--out { background: #ef4444; }
.ech-prev-dot--in  { background: #10b981; }

.ech-prev-horizon .ax-btn { font-weight: 600; }

/* Wrapper : on doit garder le scroll horizontal MAIS permettre le sticky */
.ech-prev-wrapper .ax-table-zone { overflow: visible; }
.ech-prev-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 260px);
    position: relative;
}
.ech-prev-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.ech-prev-scroll::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,.35);
    border-radius: 5px;
}
.ech-prev-scroll::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); }

/* Table : chiffres tabulaires + bordures discrètes */
.ech-prev-table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Header : sticky en haut, dégradé subtil */
.ech-prev-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    color: #334155;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 11px 12px;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap;
}

/* Cellules */
.ech-prev-table tbody td {
    padding: 9px 12px;
    font-size: 13px;
    color: #0f172a;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}

/* Colonnes périodes : alignement droite + min-width pour respirer */
.ech-prev-col-period,
.ech-prev-cell {
    text-align: right !important;
    min-width: 110px;
}
.ech-prev-col-total,
.ech-prev-cell--total {
    text-align: right !important;
    min-width: 130px;
    background: #f8fafc !important;
    border-left: 1px solid #e2e8f0;
}
.ech-prev-cell--total strong { color: #0f172a; font-weight: 700; }

/* Tiers : tronqué proprement */
.ech-prev-tiers {
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #1e293b;
}

/* Colonnes figées : Nature (col 1) + Tiers (col 2) */
.ech-prev-sticky-1 {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset -1px 0 0 #eef2f7;
    min-width: 120px;
}
.ech-prev-sticky-2 {
    position: sticky;
    left: 120px;
    z-index: 2;
    background: #fff;
    box-shadow: inset -1px 0 0 #e2e8f0, 4px 0 6px -4px rgba(15,23,42,.08);
}
.ech-prev-table thead .ech-prev-sticky-1,
.ech-prev-table thead .ech-prev-sticky-2 {
    z-index: 4;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

/* Zébrures et hover */
.ech-prev-table tbody tr:nth-child(even) td,
.ech-prev-table tbody tr:nth-child(even) .ech-prev-sticky-1,
.ech-prev-table tbody tr:nth-child(even) .ech-prev-sticky-2 {
    background: #fafbfc;
}
.ech-prev-table tbody tr:hover td,
.ech-prev-table tbody tr:hover .ech-prev-sticky-1,
.ech-prev-table tbody tr:hover .ech-prev-sticky-2 {
    background: #eef2ff !important;
}
.ech-prev-table tbody tr:hover .ech-prev-cell--total {
    background: #e0e7ff !important;
}

/* Liseré gauche selon nature (donné/reçu) */
.ech-prev-row-out > .ech-prev-sticky-1 { box-shadow: inset 3px 0 0 #ef4444, inset -1px 0 0 #eef2f7; }
.ech-prev-row-in  > .ech-prev-sticky-1 { box-shadow: inset 3px 0 0 #10b981, inset -1px 0 0 #eef2f7; }

/* Couleur des montants par type */
.ech-prev-cell--out { color: #b91c1c; font-weight: 600; }
.ech-prev-cell--in  { color: #047857; font-weight: 600; }
.ech-prev-cell--empty { color: #cbd5e1; }
.ech-prev-dash { color: #cbd5e1; }

/* Footer : net par colonne, fortement contrasté */
.ech-prev-foot th {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-top: 2px solid #cbd5e1;
    padding: 12px;
    font-size: 12.5px;
    color: #0f172a;
}
.ech-prev-foot-label {
    text-align: right !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #334155;
}
.ech-prev-foot-label .fa { color: var(--ax-primary, #3f51b5); margin-right: 4px; }
.ech-prev-cell--foot { font-weight: 700; font-variant-numeric: tabular-nums; }
.ech-prev-foot-pos { color: #047857; }
.ech-prev-foot-neg { color: #b91c1c; }

/* Sticky du footer : la 1ʳᵉ cellule (colspan 2) doit aussi rester à gauche au scroll horizontal */
.ech-prev-foot .ech-prev-foot-label {
    position: sticky;
    left: 0;
    z-index: 4;
}

/* Responsive : on désactive le sticky horizontal si écran trop étroit
   (le scroll horizontal reste mais les colonnes ne se masquent pas mutuellement) */
@media (max-width: 720px) {
    .ech-prev-sticky-2 { position: static; box-shadow: none; }
    .ech-prev-tiers { max-width: 160px; }
}

/* Print : tableau prévisionnel — neutralise les stickies pour PDF/papier */
@media print {
    .ech-prev-scroll { max-height: none; overflow: visible; }
    .ech-prev-table thead th,
    .ech-prev-foot th,
    .ech-prev-sticky-1,
    .ech-prev-sticky-2 {
        position: static !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
    }
    .ech-prev-cell--out { color: #000 !important; }
    .ech-prev-cell--in  { color: #000 !important; }
    .ech-prev-table tbody td,
    .ech-prev-table thead th { border: 1px solid #999 !important; }
}