/* Charge login.css depuis le <head> — garantit le rendu sur tous les serveurs */
@import url("login.css");

/* ═══════════════════════════════════════════════════════════════════════════
   CECF MICROFINANCE — DESIGN SYSTEM GLOBAL v2
   Fond blanc · Décors couleurs CECF dynamiques · Ultra Premium
   CSS Custom Properties injectées par ThemeService → tous composants réagissent
   Aucune logique modifiée — uniquement visuel
═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. ANIMATIONS
───────────────────────────────────────────────────────────────────────── */
@keyframes kz-fadein   { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
@keyframes kz-fadein-x { from { opacity:0; transform:translateX(-14px) } to { opacity:1; transform:translateX(0) } }
@keyframes kz-scalein  { from { opacity:0; transform:scale(.96) } to { opacity:1; transform:scale(1) } }
@keyframes kz-shimmer  { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes kz-pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.85)} }
@keyframes kz-spin     { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes kz-bar      { from{width:0} to{width:100%} }
@keyframes kz-float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ─────────────────────────────────────────────────────────────────────────
   2. RESET + FOND BLANC + TYPOGRAPHIE
───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: #ffffff !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    color: #1a2e1a !important;
}

/* Scrollbar CECF */
::-webkit-scrollbar        { width:6px; height:6px; }
::-webkit-scrollbar-track  { background:#f5f5f5; border-radius:4px; }
::-webkit-scrollbar-thumb  { background:var(--kz-primary,#3D9E0F); border-radius:4px; opacity:.7; }
::-webkit-scrollbar-thumb:hover { background:var(--kz-primary-dark,#1F6B0A); }

/* Animation d'entrée globale sur chaque page */
.content-container,
.mud-container {
    animation: kz-fadein .32s cubic-bezier(.4,0,.2,1) both;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. APPBAR — TOPBAR (dégradé CECF dynamique)
───────────────────────────────────────────────────────────────────────── */
.mud-appbar {
    background: linear-gradient(
        135deg,
        var(--kz-sidebar-bg,#0D1B12) 0%,
        var(--kz-primary-dark,#1F6B0A) 55%,
        var(--kz-primary,#3D9E0F) 100%
    ) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.30) !important;
}
.mud-appbar .mud-icon-root { color: rgba(255,255,255,.90) !important; }
.mud-appbar .mud-button-root { color: rgba(255,255,255,.90) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   4. OVERRIDE DES GRADIENTS BLEUS HARDCODÉS (inline styles)
   Ces sélecteurs capturent les patterns bleus dans tous les fichiers razor
───────────────────────────────────────────────────────────────────────── */

/* Pattern : #0d1b6e → #1a237e → #1565c0 (le plus commun dans credits/rapports) */
[style*="#0d1b6e"],
[style*="0d1b6e"] {
    background: linear-gradient(
        135deg,
        var(--kz-sidebar-bg,#0D1B12) 0%,
        var(--kz-primary-dark,#1F6B0A) 55%,
        var(--kz-primary,#3D9E0F) 100%
    ) !important;
}
/* Texte bleu → vert CECF */
[style*="color:#1a237e"],
[style*="color: #1a237e"],
[style*="color:#1565c0"],
[style*="color: #1565c0"],
[style*="color:#0d1b6e"],
[style*="color: #0d1b6e"] {
    color: var(--kz-primary,#3D9E0F) !important;
}
/* Background bleu fixes → vert CECF */
[style*="background:#1a237e"],
[style*="background: #1a237e"],
[style*="background-color:#1a237e"],
[style*="background-color: #1a237e"],
[style*="background:#1565c0"],
[style*="background: #1565c0"] {
    background: var(--kz-primary,#3D9E0F) !important;
}
/* Pattern dark bleu alternatif (#0A1628, #1E3A5F) */
[style*="#0A1628"],[style*="#0a1628"],
[style*="#1E3A5F"],[style*="#1e3a5f"] {
    background: linear-gradient(
        135deg,
        var(--kz-sidebar-bg,#0D1B12),
        var(--kz-primary-dark,#1F6B0A)
    ) !important;
}
/* Pattern purple/violet (#667eea, #764ba2) → vert CECF */
[style*="#667eea"],[style*="#764ba2"] {
    background: linear-gradient(
        135deg,
        var(--kz-primary-dark,#1F6B0A),
        var(--kz-primary,#3D9E0F)
    ) !important;
}
/* Bordures bleues → vertes CECF */
[style*="border-color:#1a237e"],
[style*="border-color: #1a237e"],
[style*="border-left:3px solid #1a237e"],
[style*="border-left: 3px solid #1a237e"],
[style*="border-bottom:2px solid #1a237e"],
[style*="border-bottom: 2px solid #1a237e"] {
    border-color: var(--kz-primary,#3D9E0F) !important;
}
/* Accents or → utiliser la couleur secondaire CECF */
[style*="#ffd740"],[style*="#ffab40"],[style*="#C9A84C"],[style*="#f0cc7a"] {
    color: var(--kz-secondary,#D6C451) !important;
}
/* Gradients or (boutons/badges) → secondaire CECF */
[style*="linear-gradient(135deg,#ffd740"],
[style*="linear-gradient(135deg, #ffd740"],
[style*="linear-gradient(135deg,#C9A84C"],
[style*="linear-gradient(135deg, #C9A84C"] {
    background: linear-gradient(
        135deg,
        var(--kz-secondary,#D6C451),
        var(--kz-secondary-dark,#B29A26)
    ) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. MudBlazor — BOUTONS
───────────────────────────────────────────────────────────────────────── */

/* Primary Filled */
.mud-button-filled-primary,
.mud-fab-color-primary {
    background: linear-gradient(135deg, var(--kz-primary,#3D9E0F), var(--kz-primary-dark,#1F6B0A)) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(61,158,15,.30) !important;
    border: none !important;
    transition: transform .18s, box-shadow .18s !important;
}
.mud-button-filled-primary:hover,
.mud-fab-color-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(61,158,15,.42) !important;
}
.mud-button-filled-primary:active { transform: translateY(0) !important; }

/* Primary Text */
.mud-button-text-primary { color: var(--kz-primary,#3D9E0F) !important; }
.mud-button-text-primary .mud-button-label { color: var(--kz-primary,#3D9E0F) !important; }

/* Primary Outlined */
.mud-button-outlined-primary {
    color: var(--kz-primary,#3D9E0F) !important;
    border-color: var(--kz-primary,#3D9E0F) !important;
}
.mud-button-outlined-primary:hover { background: rgba(61,158,15,.07) !important; }

/* Secondary Filled */
.mud-button-filled-secondary {
    background: linear-gradient(135deg, var(--kz-secondary,#D6C451), var(--kz-secondary-dark,#B29A26)) !important;
    color: #1a1a00 !important;
    box-shadow: 0 4px 14px rgba(214,196,81,.28) !important;
}

/* Success → CECF success */
.mud-button-filled-success {
    background: linear-gradient(135deg, var(--kz-success,#16A34A), #0f7a34) !important;
    box-shadow: 0 4px 14px rgba(22,163,74,.30) !important;
}

/* Info → CECF info */
.mud-button-filled-info {
    background: linear-gradient(135deg, var(--kz-info,#0284C7), #0166a0) !important;
    box-shadow: 0 4px 14px rgba(2,132,199,.28) !important;
}

/* Warning → CECF warning */
.mud-button-filled-warning {
    background: linear-gradient(135deg, var(--kz-warning,#F59E0B), #d97706) !important;
    box-shadow: 0 4px 14px rgba(245,158,11,.28) !important;
    color: #fff !important;
}

/* Error → CECF error */
.mud-button-filled-error {
    background: linear-gradient(135deg, var(--kz-error,#DC2626), #b91c1c) !important;
    box-shadow: 0 4px 14px rgba(220,38,38,.28) !important;
}

/* Tous les boutons ronds/fab */
.mud-icon-button:not(.mud-icon-button-size-small):hover {
    background: rgba(61,158,15,.08) !important;
    color: var(--kz-primary,#3D9E0F) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. MudBlazor — INPUTS / CHAMPS
───────────────────────────────────────────────────────────────────────── */

/* Outlined focus */
.mud-input-outlined.mud-input:focus-within .mud-input-outlined-border,
.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--kz-primary,#3D9E0F) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(61,158,15,.10) !important;
}
/* Label focus */
.mud-input-label.mud-input-label-inputcontrol.mud-focused,
.mud-label.mud-focused {
    color: var(--kz-primary,#3D9E0F) !important;
    font-weight: 600 !important;
}
/* Underline */
.mud-input.mud-input-underline::after {
    border-bottom-color: var(--kz-primary,#3D9E0F) !important;
}
/* Adornment icon */
.mud-input:focus-within .mud-input-adornment .mud-icon-default {
    color: var(--kz-primary,#3D9E0F) !important;
    transition: color .2s;
}
/* Input textarea border hover */
.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--kz-primary-light,#7AC943) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. MudBlazor — CHECKBOX / RADIO / SWITCH
───────────────────────────────────────────────────────────────────────── */
.mud-checked.mud-checkbox .mud-icon-button,
.mud-checkbox.mud-checked .mud-icon-button { color: var(--kz-primary,#3D9E0F) !important; }
.mud-checkbox:not(.mud-disabled) .mud-icon-button:hover { color: var(--kz-primary,#3D9E0F) !important; }
.mud-radio-group .mud-radio.mud-checked .mud-button-root { color: var(--kz-primary,#3D9E0F) !important; }
.mud-switch-base.mud-checked .mud-switch-thumb { background-color: var(--kz-primary,#3D9E0F) !important; }
.mud-switch-base.mud-checked + .mud-switch-track { background-color: rgba(61,158,15,.4) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   8. MudBlazor — CHIPS / BADGES
───────────────────────────────────────────────────────────────────────── */
.mud-chip.mud-chip-color-primary { background-color: var(--kz-primary,#3D9E0F) !important; color:#fff !important; }
.mud-chip.mud-chip-outlined.mud-chip-color-primary {
    background-color: transparent !important;
    color: var(--kz-primary,#3D9E0F) !important;
    border-color: var(--kz-primary,#3D9E0F) !important;
}
.mud-badge.mud-badge-color-primary {
    background-color: var(--kz-primary,#3D9E0F) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(61,158,15,.38) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. MudBlazor — TABS
───────────────────────────────────────────────────────────────────────── */
.mud-tab.mud-tab-active { color: var(--kz-primary,#3D9E0F) !important; font-weight:700 !important; }
.mud-tabs-indicator { background-color: var(--kz-primary,#3D9E0F) !important; height:3px !important; border-radius:3px 3px 0 0 !important; }
.mud-tab:hover:not(.mud-tab-active) { color: var(--kz-primary-light,#7AC943) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   10. MudBlazor — TABLE + DATA GRID (en-têtes CECF, hover vert)
───────────────────────────────────────────────────────────────────────── */

/* En-tête de table — dégradé CECF */
.mud-table-head .mud-table-cell,
.mud-table-head th,
.mud-data-grid .mud-table-head .mud-table-cell {
    background: linear-gradient(
        135deg,
        var(--kz-sidebar-bg,#0D1B12) 0%,
        var(--kz-primary-dark,#1F6B0A) 100%
    ) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
}
/* Icône de tri */
.mud-table-head .mud-table-sort-label .mud-icon-root {
    color: rgba(255,255,255,.6) !important;
}
.mud-table-head .mud-table-sort-label:hover { color: rgba(255,255,255,.9) !important; }

/* Lignes alternées subtiles */
.mud-table-root tbody .mud-table-row:nth-child(even) td {
    background: rgba(61,158,15,.025) !important;
}
/* Hover ligne */
.mud-table-root .mud-table-row:hover td {
    background: rgba(61,158,15,.06) !important;
    transition: background .12s !important;
}
/* Ligne sélectionnée */
.mud-selected-item td,
.mud-table-root .mud-selected-item td {
    background: rgba(61,158,15,.10) !important;
    border-left: 3px solid var(--kz-primary,#3D9E0F) !important;
    font-weight: 600 !important;
}
/* Footer / Pagination */
.mud-table-pagination { border-top: 1px solid rgba(61,158,15,.10) !important; }
.mud-table-pagination .mud-icon-button:not([disabled]) { color: var(--kz-primary,#3D9E0F) !important; }
.mud-table-pagination select { color: var(--kz-primary,#3D9E0F) !important; }
/* Conteneur de table */
.mud-table-container {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 0 0 1px rgba(61,158,15,.08) !important;
    background: #fff !important;
}
/* DataGrid toolbar */
.mud-data-grid .mud-toolbar {
    background: rgba(61,158,15,.04) !important;
    border-bottom: 1px solid rgba(61,158,15,.08) !important;
    padding: 8px 16px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   11. MudBlazor — CARDS
───────────────────────────────────────────────────────────────────────── */
.mud-card {
    border-radius: 16px !important;
    border: 1px solid rgba(61,158,15,.07) !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
    transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s !important;
    overflow: hidden !important;
    animation: kz-fadein .35s ease both;
}
.mud-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.12), 0 0 0 1px rgba(61,158,15,.10) !important;
}
/* Barre accent CECF en haut de chaque card */
.mud-card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--kz-primary,#3D9E0F), var(--kz-secondary,#D6C451));
    border-radius: 16px 16px 0 0;
}
.mud-card-header {
    padding: 14px 20px 12px !important;
    border-bottom: 1px solid rgba(61,158,15,.07) !important;
}
.mud-card-content { padding: 16px 20px !important; }
.mud-card-actions {
    padding: 10px 16px !important;
    border-top: 1px solid rgba(61,158,15,.06) !important;
    background: rgba(61,158,15,.02) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. MudBlazor — PAPER
───────────────────────────────────────────────────────────────────────── */
.mud-paper {
    border-radius: 14px !important;
    background: #ffffff !important;
    animation: kz-fadein .3s ease both;
}
.mud-elevation-4 {
    box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 0 0 1px rgba(61,158,15,.06) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   13. MudBlazor — DIALOG
───────────────────────────────────────────────────────────────────────── */
.mud-dialog {
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
    animation: kz-scalein .28s cubic-bezier(.4,0,.2,1) both !important;
    max-width: 680px !important;
}
.mud-dialog-title {
    background: linear-gradient(
        135deg,
        var(--kz-sidebar-bg,#0D1B12) 0%,
        var(--kz-primary-dark,#1F6B0A) 100%
    ) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    padding: 18px 24px !important;
    border-bottom: 2px solid rgba(61,158,15,.35) !important;
}
/* Petite bande dorée sous le titre */
.mud-dialog-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: var(--kz-secondary,#D6C451);
    border-radius: 2px;
    margin-top: 8px;
}
.mud-dialog-content {
    padding: 20px 24px !important;
    background: #fff !important;
}
.mud-dialog-actions {
    padding: 12px 20px !important;
    border-top: 1px solid rgba(61,158,15,.08) !important;
    background: rgba(61,158,15,.02) !important;
}
/* Overlay sombre */
.mud-overlay-dialog { background: rgba(0,20,0,.45) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   14. MudBlazor — SELECT / AUTOCOMPLETE
───────────────────────────────────────────────────────────────────────── */
.mud-select .mud-input:focus-within .mud-input-outlined-border {
    border-color: var(--kz-primary,#3D9E0F) !important;
}
.mud-popover-paper { border-radius: 14px !important; }
.mud-list-item:hover { background: rgba(61,158,15,.06) !important; }
.mud-list-item.mud-selected {
    background: rgba(61,158,15,.10) !important;
    color: var(--kz-primary,#3D9E0F) !important;
    font-weight: 700 !important;
}
.mud-list-item.mud-selected .mud-list-item-text { color: var(--kz-primary,#3D9E0F) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   15. MudBlazor — PROGRESS
───────────────────────────────────────────────────────────────────────── */
.mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar1,
.mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar2 {
    background-color: var(--kz-primary,#3D9E0F) !important;
}
.mud-circular-progress.mud-progress-color-primary { color: var(--kz-primary,#3D9E0F) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   16. MudBlazor — STEPPER (formulaires multi-étapes)
───────────────────────────────────────────────────────────────────────── */
.mud-step-icon-root.mud-step-icon-completed { background-color: var(--kz-primary,#3D9E0F) !important; }
.mud-step-icon-root.mud-step-icon-active { background-color: var(--kz-primary,#3D9E0F) !important; box-shadow: 0 0 0 4px rgba(61,158,15,.18) !important; }
.mud-step-connector-line { border-color: rgba(61,158,15,.25) !important; }
.mud-step-label-active { color: var(--kz-primary,#3D9E0F) !important; font-weight: 700 !important; }
.mud-step-label-completed { color: var(--kz-primary-dark,#1F6B0A) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   17. MudBlazor — SNACKBAR
───────────────────────────────────────────────────────────────────────── */
.mud-snackbar { border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; }
.mud-snackbar-success { background: var(--kz-success,#16A34A) !important; }
.mud-snackbar-warning { background: var(--kz-warning,#F59E0B) !important; }
.mud-snackbar-error   { background: var(--kz-error,#DC2626) !important; }
.mud-snackbar-info    { background: var(--kz-info,#0284C7) !important; }
.mud-snackbar-content-action .mud-button-text-inherit { color: var(--kz-secondary,#D6C451) !important; font-weight:700 !important; }

/* ─────────────────────────────────────────────────────────────────────────
   18. MudBlazor — EXPANSION PANEL
───────────────────────────────────────────────────────────────────────── */
.mud-expand-panel { border-radius: 12px !important; border: 1px solid rgba(61,158,15,.08) !important; margin-bottom: 8px !important; }
.mud-expand-panel.mud-expand-panel--expanded > .mud-expand-panel-header { color: var(--kz-primary,#3D9E0F) !important; font-weight:700 !important; }
.mud-expand-panel-header:hover { background: rgba(61,158,15,.04) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   19. MudBlazor — ALERT
───────────────────────────────────────────────────────────────────────── */
.mud-alert { border-radius: 12px !important; }
.mud-alert-color-success { color: var(--kz-success,#16A34A) !important; border-color: rgba(22,163,74,.25) !important; }
.mud-alert-color-warning { color: var(--kz-warning,#F59E0B) !important; border-color: rgba(245,158,11,.25) !important; }
.mud-alert-color-error   { color: var(--kz-error,#DC2626) !important; border-color: rgba(220,38,38,.25) !important; }
.mud-alert-color-info    { color: var(--kz-info,#0284C7) !important; border-color: rgba(2,132,199,.25) !important; }
.mud-alert-filled-success { background: var(--kz-success,#16A34A) !important; }
.mud-alert-filled-warning { background: var(--kz-warning,#F59E0B) !important; }
.mud-alert-filled-error   { background: var(--kz-error,#DC2626) !important; }
.mud-alert-filled-info    { background: var(--kz-info,#0284C7) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   20. MudBlazor — LINK / TEXTE
───────────────────────────────────────────────────────────────────────── */
.mud-link.mud-link-color-primary { color: var(--kz-primary,#3D9E0F) !important; }
.mud-link.mud-link-color-primary:hover { color: var(--kz-primary-dark,#1F6B0A) !important; }
.mud-typography-h4, .mud-typography-h5 { letter-spacing: -.2px !important; }
.mud-typography-h5 { font-weight: 800 !important; }

/* ─────────────────────────────────────────────────────────────────────────
   21. MudBlazor — SLIDER / RATING / TIMELINE / TREEVIEW
───────────────────────────────────────────────────────────────────────── */
.mud-slider.mud-slider-color-primary .mud-slider-filled { background-color: var(--kz-primary,#3D9E0F) !important; }
.mud-slider.mud-slider-color-primary .mud-slider-thumb  { background-color: var(--kz-primary,#3D9E0F) !important; box-shadow: 0 0 0 4px rgba(61,158,15,.20) !important; }
.mud-rating-item.mud-rating-item-filled .mud-icon-root  { color: var(--kz-secondary,#D6C451) !important; }
.mud-timeline-item-dot.mud-timeline-item-dot-color-primary { background-color: var(--kz-primary,#3D9E0F) !important; }
.mud-treeview-item-content:hover  { background: rgba(61,158,15,.06) !important; }
.mud-treeview-item-content.mud-selected { background: rgba(61,158,15,.10) !important; color: var(--kz-primary,#3D9E0F) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   22. MudBlazor — ICONS PRIMARY COLOR
───────────────────────────────────────────────────────────────────────── */
.mud-icon-color-primary,
.mud-svg-icon.mud-icon-color-primary { color: var(--kz-primary,#3D9E0F) !important; fill: var(--kz-primary,#3D9E0F) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   23. MudBlazor — MENU POPUP
───────────────────────────────────────────────────────────────────────── */
.mud-popover {
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(61,158,15,.10) !important;
    overflow: hidden !important;
}
.mud-menu-item:hover { background: rgba(61,158,15,.07) !important; color: var(--kz-primary,#3D9E0F) !important; }
.mud-menu-item .mud-icon-root { color: var(--kz-primary,#3D9E0F) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   24. NAVIGATION MENU CECF (MenuLayout)
───────────────────────────────────────────────────────────────────────── */
.nm-popup {
    border-color: rgba(61,158,15,.15) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(61,158,15,.10) !important;
}
.nm-item:hover {
    background: linear-gradient(135deg,rgba(61,158,15,.08),rgba(122,201,67,.04)) !important;
    border-color: rgba(61,158,15,.14) !important;
    transform: translateX(4px) !important;
}
.nm-item-dashboard:hover { background: rgba(61,158,15,.06) !important; }
.nm-scroll::-webkit-scrollbar-thumb { background: var(--kz-primary-light,#7AC943) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   25. DASHBOARD — MODULE CARDS
───────────────────────────────────────────────────────────────────────── */
.db-module-card {
    background: #fff !important;
    border: 1px solid rgba(61,158,15,.08) !important;
}
.db-module-card:hover {
    border-color: rgba(61,158,15,.22) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.14), 0 0 0 1px rgba(61,158,15,.12) !important;
}
/* Badge "Accéder" */
.db-module-card .db-icon-ring + div div span {
    color: var(--kz-primary,#3D9E0F) !important;
    background: rgba(61,158,15,.07) !important;
    border-color: rgba(61,158,15,.18) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   26. CLASSES UTILITAIRES CECF — utilisables dans les pages
───────────────────────────────────────────────────────────────────────── */

/* Hero banners blancs avec accent CECF */
.kz-page-hero {
    background: linear-gradient(135deg, var(--kz-sidebar-bg,#0D1B12) 0%, var(--kz-primary-dark,#1F6B0A) 55%, var(--kz-primary,#3D9E0F) 100%) !important;
    border-radius: 18px;
    padding: clamp(20px,3vw,36px) clamp(20px,4vw,48px);
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.20);
    animation: kz-fadein .4s ease both;
    margin-bottom: 24px;
}
.kz-page-hero::before {
    content:'';position:absolute;width:380px;height:380px;border-radius:50%;
    border:1px solid rgba(61,158,15,.12);top:-160px;right:-120px;pointer-events:none;
}
.kz-page-hero::after {
    content:'';position:absolute;width:220px;height:220px;border-radius:50%;
    border:1px solid rgba(214,196,81,.08);bottom:-80px;left:40px;pointer-events:none;
}
.kz-page-hero-title {
    font-size: clamp(18px,2.2vw,26px);
    font-weight: 900;
    letter-spacing: .3px;
    margin-bottom: 4px;
}
.kz-page-hero-sub {
    font-size: clamp(11px,1.1vw,13px);
    color: rgba(255,255,255,.55);
    line-height: 1.6;
}
.kz-page-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(61,158,15,.20);
    border: 1px solid rgba(61,158,15,.35);
    color: #7AC943;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 10px;
}

/* Section header */
.kz-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(61,158,15,.10);
    animation: kz-fadein-x .3s ease both;
}
.kz-section-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--kz-primary,#3D9E0F);
    box-shadow: 0 0 0 3px rgba(61,158,15,.15);
    animation: kz-pulse 2.5s ease infinite;
    flex-shrink: 0;
}
.kz-section-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--kz-sidebar-bg,#0D1B12);
    letter-spacing: .2px;
}
.kz-section-line { flex:1; height:1px; background:linear-gradient(90deg,rgba(61,158,15,.12),transparent); }
.kz-section-count {
    background: linear-gradient(135deg,var(--kz-primary,#3D9E0F),var(--kz-primary-dark,#1F6B0A));
    color:#fff; border-radius:20px; padding:3px 13px;
    font-size:.75rem; font-weight:700;
    box-shadow: 0 4px 12px rgba(61,158,15,.25);
    flex-shrink:0;
}

/* Card Form (formulaires) */
.kz-form {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(61,158,15,.09);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 24px;
    margin-bottom: 20px;
    animation: kz-fadein .35s ease both;
    position: relative;
    overflow: hidden;
}
.kz-form::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kz-primary,#3D9E0F), var(--kz-secondary,#D6C451));
    border-radius: 16px 16px 0 0;
}
.kz-form-title {
    font-size: .85rem;
    font-weight: 800;
    color: var(--kz-sidebar-bg,#0D1B12);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(61,158,15,.08);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* KPI Boxes */
.kz-kpi {
    border-radius: 16px;
    padding: 20px 22px;
    color: #fff;
    position: relative;
    overflow: hidden;
    animation: kz-fadein .4s ease both;
    transition: transform .22s, box-shadow .22s;
    cursor: default;
}
.kz-kpi:hover { transform: translateY(-5px); box-shadow: 0 16px 44px rgba(0,0,0,.24) !important; }
.kz-kpi::after {
    content:''; position:absolute;
    right:-20px; bottom:-20px;
    width:110px; height:110px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    pointer-events:none;
}
.kz-kpi-val { font-size:clamp(18px,2vw,24px); font-weight:900; margin:6px 0 2px; }
.kz-kpi-lbl { font-size:.72rem; font-weight:700; opacity:.75; text-transform:uppercase; letter-spacing:.6px; }
.kz-kpi-trend { font-size:.72rem; font-weight:700; margin-top:4px; opacity:.85; }
.kz-kpi-icon { position:absolute; right:16px; top:16px; opacity:.25; font-size:3rem; }

/* Status pills */
.kz-pill-green  { background:rgba(61,158,15,.12);  border:1px solid rgba(61,158,15,.30);  color:var(--kz-primary,#3D9E0F);  border-radius:20px; padding:3px 11px; font-size:.72rem; font-weight:700; }
.kz-pill-gold   { background:rgba(214,196,81,.12); border:1px solid rgba(214,196,81,.30); color:var(--kz-secondary,#D6C451); border-radius:20px; padding:3px 11px; font-size:.72rem; font-weight:700; }
.kz-pill-red    { background:rgba(220,38,38,.10);  border:1px solid rgba(220,38,38,.25);  color:var(--kz-error,#DC2626);     border-radius:20px; padding:3px 11px; font-size:.72rem; font-weight:700; }
.kz-pill-orange { background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.25); color:var(--kz-warning,#F59E0B);   border-radius:20px; padding:3px 11px; font-size:.72rem; font-weight:700; }
.kz-pill-blue   { background:rgba(2,132,199,.10);  border:1px solid rgba(2,132,199,.25);  color:var(--kz-info,#0284C7);      border-radius:20px; padding:3px 11px; font-size:.72rem; font-weight:700; }

/* Gradient text CECF */
.kz-gradient-text {
    background: linear-gradient(90deg, var(--kz-primary,#3D9E0F), var(--kz-secondary,#D6C451));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

/* Surface / info box */
.kz-surface {
    background: rgba(61,158,15,.04);
    border: 1px solid rgba(61,158,15,.10);
    border-radius: 12px;
    padding: 16px;
}
.kz-surface-gold {
    background: rgba(214,196,81,.06);
    border: 1px solid rgba(214,196,81,.18);
    border-radius: 12px;
    padding: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   27. TABLES HTML CUSTOM (non-MudBlazor)
───────────────────────────────────────────────────────────────────────── */
table:not(.mud-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    background: #fff;
}
table:not(.mud-table) thead tr th {
    background: linear-gradient(135deg, var(--kz-sidebar-bg,#0D1B12), var(--kz-primary-dark,#1F6B0A)) !important;
    color: rgba(255,255,255,.90) !important;
    font-size: .70rem !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    padding: 11px 14px !important;
    border: none !important;
    white-space: nowrap;
}
table:not(.mud-table) tbody tr:hover td { background: rgba(61,158,15,.05) !important; }
table:not(.mud-table) tbody tr:nth-child(even) td { background: rgba(61,158,15,.02); }
table:not(.mud-table) tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: .83rem;
    transition: background .12s;
}
table:not(.mud-table) tfoot td {
    background: rgba(61,158,15,.05) !important;
    font-weight: 700 !important;
    border-top: 2px solid rgba(61,158,15,.15) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   28. BOUTONS HTML CUSTOM / BOOTSTRAP
───────────────────────────────────────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, var(--kz-primary,#3D9E0F), var(--kz-primary-dark,#1F6B0A)) !important;
    border-color: var(--kz-primary-dark,#1F6B0A) !important;
    box-shadow: 0 4px 14px rgba(61,158,15,.30) !important;
    color: #fff !important;
}
.btn-primary:hover { opacity:.9; transform:translateY(-1px); box-shadow: 0 8px 20px rgba(61,158,15,.40) !important; }
a { color: var(--kz-primary,#3D9E0F) !important; }
a:hover { color: var(--kz-primary-dark,#1F6B0A) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   29. RAPPORTS / IMPRESSIONS (pages imprimables)
───────────────────────────────────────────────────────────────────────── */
@media print {
    .mud-appbar, .nm-popup, .mud-snackbar-container { display: none !important; }
    body { background: white !important; }
    .mud-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   30. RESPONSIVE
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mud-dialog { margin: 10px !important; }
    .mud-dialog-title { padding: 14px 18px !important; font-size: .9rem !important; }
    .mud-table-head .mud-table-cell { font-size: .65rem !important; padding: 8px 10px !important; }
    .kz-page-hero { padding: 20px !important; margin-bottom: 16px !important; }
    .mud-card::before { height: 2px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   31. SÉLECTEUR LIGNE ACTIVE (selected-row — déjà défini dans app.css)
───────────────────────────────────────────────────────────────────────── */
.selected-row {
    background-color: rgba(61,158,15,.12) !important;
    border-left: 3px solid var(--kz-primary,#3D9E0F) !important;
    color: var(--kz-sidebar-bg,#0D1B12) !important;
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   32. MudBlazor — DATE PICKER
───────────────────────────────────────────────────────────────────────── */
.mud-picker-calendar-header { background: var(--kz-sidebar-bg,#0D1B12) !important; color:#fff !important; }
.mud-day.mud-day-today { border-color: var(--kz-primary,#3D9E0F) !important; color: var(--kz-primary,#3D9E0F) !important; }
.mud-day.mud-day-selected { background: var(--kz-primary,#3D9E0F) !important; color:#fff !important; }
.mud-day:hover:not(.mud-day-selected) { background: rgba(61,158,15,.10) !important; }
.mud-picker-actions .mud-button-text-primary { color: var(--kz-primary,#3D9E0F) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   33. LOADING STATE
───────────────────────────────────────────────────────────────────────── */
.kz-loading {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:60px 20px; gap:14px;
    animation: kz-fadein .3s ease;
}
.kz-loading-text { color:rgba(0,0,0,.40); font-size:.85rem; font-weight:500; }
.kz-empty-state {
    text-align:center; padding:64px 20px;
    border:2px dashed rgba(61,158,15,.15);
    border-radius:16px;
    background:rgba(61,158,15,.02);
    animation: kz-fadein .4s ease both;
}
.kz-empty-state-icon { color:rgba(61,158,15,.25) !important; font-size:3.5rem !important; margin-bottom:12px; }
.kz-empty-state-text { color:rgba(0,0,0,.45); font-size:.9rem; }

/* ─────────────────────────────────────────────────────────────────────────
   34. VISIBILITÉ CHAMPS DE SAISIE — TEXTE TOUJOURS LISIBLE SUR FOND BLANC
   ────────────────────────────────────────────────────────────────────────
   STRATÉGIE SPÉCIFICITÉ :
   Les pages avec dark-theme forcent color:#fff !important sur les inputs.
   Pour gagner, nos règles doivent avoir une spécificité CSS SUPÉRIEURE.

   Hiérarchie MudBlazor dans le DOM :
   .mud-input-control > .mud-input > input.mud-input-root

   Notre spécificité (0,2,2) > page .xxx-input input (0,1,1)
   Note: body = élément(1), .mud-input-control = classe(1), .mud-input = classe(1), input = élément(1)
         → total: 0,2,2 qui bat 0,1,1 et 0,2,0 avec le tie-breaker élément
───────────────────────────────────────────────────────────────────────── */

/* ══ NIVEAU 1 — Basique (pour les pages sans override dark) ════════ */
body input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]) {
    color: #111827 !important;
    caret-color: var(--kz-primary,#3D9E0F) !important;
}
body textarea { color: #111827 !important; caret-color: var(--kz-primary,#3D9E0F) !important; }
body select   { color: #111827 !important; background-color: #ffffff !important; }
body select option { color: #111827 !important; background-color: #ffffff !important; }

/* ══ NIVEAU 2 — Haute spécificité MudBlazor (0,2,2) ═══════════════
   Bat .ro-input input (0,1,1), .rov-input input (0,1,1), etc.
══════════════════════════════════════════════════════════════════════ */
body .mud-input-control .mud-input input,
body .mud-input-control .mud-input textarea,
body .mud-input-outlined .mud-input-root input,
body .mud-input-outlined .mud-input-root textarea {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: var(--kz-primary,#3D9E0F) !important;
}
/* Placeholder (0,2,2) */
body .mud-input-control .mud-input input::placeholder,
body .mud-input-control .mud-input textarea::placeholder,
body .mud-input-outlined .mud-input-root input::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #9ca3af !important;
}

/* ══ NIVEAU 3 — Spécificité très haute (0,3,2) ═════════════════════
   Bat .xxx-class .mud-input input (0,2,1) et les wrappers à 2 classes
══════════════════════════════════════════════════════════════════════ */
body .mud-form-control .mud-input-control .mud-input input,
body .mud-form-control .mud-input-control .mud-input textarea {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: var(--kz-primary,#3D9E0F) !important;
}
body .mud-form-control .mud-input-control .mud-input input::placeholder,
body .mud-form-control .mud-input-control .mud-input textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* ── Labels des champs ──────────────────────────────────────────────── */
body .mud-input-control .mud-input-label,
body .mud-input-label,
body label.mud-input-label { color: #4b5563 !important; }
body .mud-input-control .mud-input-label.mud-focused,
body .mud-input-label.mud-focused { color: var(--kz-primary,#3D9E0F) !important; }

/* ── Valeur Select / Autocomplete affichée ─────────────────────────── */
body .mud-input-control .mud-select-input { color: #111827 !important; }
body .mud-input-control .mud-input .mud-select-input { color: #111827 !important; }
body .mud-input-slot { color: #111827 !important; -webkit-text-fill-color: #111827 !important; }

/* ── Adornment (unité, symbole, icône) ─────────────────────────────── */
body .mud-input-control .mud-input-adornment-text { color: #374151 !important; font-weight: 500 !important; }
body .mud-input-control .mud-input-adornment .mud-icon-root { color: var(--kz-primary,#3D9E0F) !important; }

/* ── Helper text / message de validation ─────────────────────────────── */
body .mud-input-control .mud-input-helper-text { color: #6b7280 !important; }
body .mud-input-error .mud-input-helper-text { color: var(--kz-error,#DC2626) !important; }

/* ── Autocomplete / Select — liste déroulante ─────────────────────── */
body .mud-list-item .mud-list-item-text,
body .mud-list .mud-list-item-text span,
body .mud-list-item-text { color: #111827 !important; }
body .mud-popover .mud-list-item { color: #111827 !important; }

/* ── Disabled / Readonly — lisible mais atténué ───────────────────── */
body .mud-input-control .mud-input input[disabled],
body .mud-input-control .mud-input input[readonly],
body .mud-input-control .mud-input textarea[disabled],
body .mud-input-control .mud-input textarea[readonly] {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
}

/* ── Checkbox / Radio labels ────────────────────────────────────────── */
body .mud-checkbox .mud-button-label,
body .mud-radio .mud-button-label { color: #111827 !important; }

/* ── Switch label ───────────────────────────────────────────────────── */
body .mud-switch .mud-button-label { color: #111827 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   35. ÉTATS VIDES PREMIUM — Caisse fermée / Accès refusé / Aucun résultat
   Préfixe CSS : es-* — partagé entre SituationCaisse, RemiseCaisse, HistoriqueCaisse
   Fond blanc + Hero CECF gradient + icône animée + étapes + boutons
═══════════════════════════════════════════════════════════════════════════ */
@keyframes es-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes es-pulse-r { 0%{opacity:.5;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)} }
@keyframes es-fadein { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

.es-wrapper {
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.10);
    position:relative;
    animation:es-fadein .5s ease forwards;
}
.es-blob { position:absolute;border-radius:50%;pointer-events:none;z-index:0; }
.es-blob-1 { width:360px;height:360px;background:radial-gradient(circle,rgba(61,158,15,.07),transparent 70%);top:-80px;right:-80px; }
.es-blob-2 { width:280px;height:280px;background:radial-gradient(circle,rgba(214,196,81,.06),transparent 70%);bottom:-60px;left:-60px; }

.es-hero {
    position:relative;
    background:linear-gradient(135deg,var(--kz-sidebar-bg,#0D1B12) 0%,var(--kz-primary-dark,#1F6B0A) 55%,var(--kz-primary,#3D9E0F) 100%);
    padding:2.5rem 2.5rem 2rem;
    display:flex;
    align-items:center;
    gap:2rem;
    overflow:hidden;
}
.es-deco-c1 { position:absolute;width:280px;height:280px;border-radius:50%;border:1px solid rgba(255,255,255,.06);top:-80px;right:-60px;pointer-events:none; }
.es-deco-c2 { position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid rgba(255,255,255,.04);bottom:-60px;left:55%;pointer-events:none; }

.es-icon-stage { position:relative;width:100px;height:100px;flex-shrink:0;animation:es-float 3.5s ease-in-out infinite; }
.es-ring { position:absolute;top:50%;left:50%;border-radius:50%;border:2px solid rgba(255,255,255,.20);animation:es-pulse-r 2.8s ease-out infinite; }
.es-ring-1 { width:100px;height:100px;animation-delay:0s; }
.es-ring-2 { width:74px;height:74px;animation-delay:.7s; }
.es-icon-disc {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:60px;height:60px;
    background:rgba(255,255,255,.15);
    border:2px solid rgba(255,255,255,.35);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:white;
    backdrop-filter:blur(6px);
}

.es-hero-copy { position:relative;z-index:1; }
.es-badge-closed {
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(239,68,68,.22);border:1px solid rgba(239,68,68,.45);
    color:#fca5a5;padding:4px 12px;border-radius:20px;
    font-size:.68rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
    margin-bottom:.6rem;
}
.es-dot { width:7px;height:7px;border-radius:50%;background:#ef4444;display:inline-block; }
.es-hero-title { font-size:1.8rem;font-weight:800;color:#fff;margin:0 0 .35rem;letter-spacing:-.3px; }
.es-hero-sub { color:rgba(255,255,255,.68);font-size:.875rem;margin:0; }

.es-body { background:#fff;padding:2rem 2.5rem 2.5rem;position:relative;z-index:1; }

.es-alert {
    display:flex;align-items:flex-start;gap:1rem;
    background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.15);
    border-left:4px solid #ef4444;border-radius:10px;
    padding:1.1rem 1.4rem;margin-bottom:1.8rem;
}
.es-alert-icon { margin-top:1px;flex-shrink:0;color:#dc2626; }
.es-alert-title { font-weight:700;font-size:.92rem;color:#dc2626;margin-bottom:.3rem; }
.es-alert-desc { color:#6b7280;font-size:.85rem;line-height:1.6; }

.es-steps-label { font-size:.75rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:.9rem; }
.es-steps { display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem; }
.es-step {
    display:flex;align-items:center;gap:1rem;
    background:#f9fdfb;border:1px solid rgba(61,158,15,.10);
    border-radius:10px;padding:.85rem 1.2rem;
    transition:all .2s;
}
.es-step:hover { border-color:var(--kz-primary,#3D9E0F);box-shadow:0 2px 10px rgba(61,158,15,.08);transform:translateX(2px); }
.es-step-n {
    width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,var(--kz-primary-dark,#1F6B0A),var(--kz-primary,#3D9E0F));
    color:white;font-size:.78rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.es-step-t { font-weight:600;color:#111827;font-size:.875rem; }
.es-step-s { color:#9ca3af;font-size:.78rem;margin-top:.1rem; }

.es-footer { display:flex;gap:.9rem;flex-wrap:wrap;border-top:1px solid rgba(61,158,15,.08);padding-top:1.5rem; }
.es-btn-main {
    display:inline-flex;align-items:center;gap:.5rem;
    background:linear-gradient(135deg,var(--kz-primary-dark,#1F6B0A),var(--kz-primary,#3D9E0F));
    color:#fff!important;text-decoration:none!important;
    padding:.72rem 1.6rem;border-radius:10px;font-weight:600;font-size:.88rem;
    box-shadow:0 4px 14px rgba(61,158,15,.30);transition:all .22s;
}
.es-btn-main:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(61,158,15,.40); }
.es-btn-ghost {
    display:inline-flex;align-items:center;gap:.5rem;
    background:#f9fdfb;color:var(--kz-primary-dark,#1F6B0A)!important;
    text-decoration:none!important;padding:.72rem 1.4rem;border-radius:10px;
    font-weight:600;font-size:.88rem;border:1px solid rgba(61,158,15,.18);transition:all .22s;
}
.es-btn-ghost:hover { border-color:var(--kz-primary,#3D9E0F);background:rgba(61,158,15,.04); }