/* ═══════════════════════════════════════════════════════════════════════════
   CECF MICROFINANCE — GUICHET / CAISSE — DESIGN SYSTEM PREMIUM
   Fond blanc · Décors dynamiques CECF · Ultra Premium
   Toutes les pages du module Guichet/Caisse
   N'écrase AUCUNE logique — uniquement visuel
═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   ANIMATIONS PARTAGÉES GUICHET
───────────────────────────────────────────────────────────────────────── */
@keyframes gz-fadein    { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes gz-slidex    { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:translateX(0)} }
@keyframes gz-scale     { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes gz-pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }
@keyframes gz-shimmer   { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes gz-float-a   { 0%,100%{transform:translateY(0)  scale(1)}   50%{transform:translateY(-22px) scale(1.04)} }
@keyframes gz-float-b   { 0%,100%{transform:translateY(0)}              50%{transform:translateY(18px)} }
@keyframes gz-float-c   { 0%,100%{transform:translate(0,0)}             50%{transform:translate(14px,-10px)} }
@keyframes gz-glow      { 0%,100%{box-shadow:0 0 0 0 rgba(61,158,15,.40)} 50%{box-shadow:0 0 0 10px rgba(61,158,15,0)} }
@keyframes gz-spin      { to{transform:rotate(360deg)} }
@keyframes gz-pulse-btn { 0%{transform:scale(1);opacity:.5} 70%{transform:scale(1.7);opacity:0} 100%{transform:scale(1.7);opacity:0} }

/* ═══════════════════════════════════════════════════════════════════════════
   1. PAGE : RETRAIT OPERATION  (ro-*)
   /Mvtcomptes/Retrait
═══════════════════════════════════════════════════════════════════════════ */

/* ── Fond global → blanc ─────────────────────────────────────── */
.ro-root {
    background: #f5faf3 !important;
    min-height: 100vh !important;
    padding: 20px 16px 60px !important;
    position: relative !important;
    font-family: 'Segoe UI',system-ui,-apple-system,sans-serif !important;
}

/* ── Orbes décoratifs → CECF vert ────────────────────────────── */
.ro-orb-1 { background: radial-gradient(circle,rgba(61,158,15,.10) 0%,transparent 70%) !important; }
.ro-orb-2 { background: radial-gradient(circle,rgba(61,158,15,.14) 0%,transparent 70%) !important; }
.ro-orb-3 { background: radial-gradient(circle,rgba(214,196,81,.10) 0%,transparent 70%) !important; }

/* ── Hero header → CECF gradient ────────────────────────────── */
.ro-hero-icon-core {
    background: linear-gradient(135deg, var(--kz-secondary,#D6C451), var(--kz-secondary-dark,#B29A26)) !important;
    box-shadow: 0 6px 22px rgba(214,196,81,.38) !important;
}
.ro-hero-icon-ring { border-color: rgba(214,196,81,.45) !important; animation: gz-glow 2.8s ease-in-out infinite !important; }
.ro-hero-title {
    background: linear-gradient(90deg,
        var(--kz-sidebar-bg,#0D1B12) 0%,
        var(--kz-primary-dark,#1F6B0A) 50%,
        var(--kz-primary,#3D9E0F) 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 1.55rem !important;
    font-weight: 900 !important;
}
.ro-hero-sub { color: #4b5563 !important; }
.ro-hero-badge {
    background: rgba(61,158,15,.10) !important;
    border-color: rgba(61,158,15,.28) !important;
    color: var(--kz-primary,#3D9E0F) !important;
    animation: gz-glow 2.5s ease-in-out infinite !important;
}
.ro-badge-dot { background: var(--kz-primary,#3D9E0F) !important; animation: gz-pulse-dot 1.5s ease-in-out infinite !important; }

/* ── Cards → blanc premium ───────────────────────────────────── */
.ro-card {
    background: #ffffff !important;
    border: 1px solid rgba(61,158,15,.10) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 0 0 1px rgba(61,158,15,.04) !important;
    backdrop-filter: none !important;
    transition: transform .28s, box-shadow .28s !important;
    overflow: hidden !important;
}
.ro-card:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 42px rgba(0,0,0,.12), 0 0 0 1px rgba(61,158,15,.10) !important; }
/* Barre accent top */
.ro-card::before {
    content: '' !important;
    display: block !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--kz-primary,#3D9E0F), var(--kz-secondary,#D6C451)) !important;
    border-radius: 20px 20px 0 0 !important;
    margin-top: -1px !important;
}

/* ── En-têtes de card ────────────────────────────────────────── */
.ro-card-hdr {
    border-bottom: 1px solid rgba(61,158,15,.08) !important;
    padding: 15px 20px 13px !important;
}
.ro-hdr-client { background: linear-gradient(135deg,rgba(61,158,15,.06),rgba(122,201,67,.02)) !important; }
.ro-hdr-id     { background: linear-gradient(135deg,rgba(214,196,81,.07),rgba(214,196,81,.02)) !important; }
.ro-hdr-amt    { background: linear-gradient(135deg,rgba(22,163,74,.07),rgba(61,158,15,.02))  !important; }
.ro-hdr-bill   { background: linear-gradient(135deg,rgba(214,196,81,.08),rgba(214,196,81,.02)) !important; }
/* Step number → CECF secondaire (or) */
.ro-step {
    background: linear-gradient(135deg, var(--kz-secondary,#D6C451), var(--kz-secondary-dark,#B29A26)) !important;
    color: var(--kz-sidebar-bg,#0D1B12) !important;
    box-shadow: 0 3px 10px rgba(214,196,81,.30) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}
.ro-card-title { color: var(--kz-sidebar-bg,#0D1B12) !important; font-size: .95rem !important; font-weight: 800 !important; }
.ro-card-sub   { color: #6b7280 !important; font-size: .73rem !important; }

/* ── Corps de card ───────────────────────────────────────────── */
.ro-card-body { padding: 18px 20px 20px !important; gap: 14px !important; }

/* ── Labels de champs → dark ─────────────────────────────────── */
.ro-field-label { color: #374151 !important; font-size: .74rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .7px !important; }
.ro-lbl-icon    { color: var(--kz-primary,#3D9E0F) !important; }
.ro-lbl-gold    { color: var(--kz-secondary,#D6C451) !important; }
.ro-req         { color: var(--kz-error,#DC2626) !important; }

/* ── Inputs → style lisible fond blanc ──────────────────────────────
   SPÉCIFICITÉ AUGMENTÉE avec .ro-root pour battre le CSS de page
   (.ro-root .ro-input input = 0,2,1  vs page .ro-input input = 0,1,1)
──────────────────────────────────────────────────────────────────── */
.ro-root .ro-input .mud-input-control,
.ro-root .ro-input .mud-input {
    background: transparent !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}
.ro-root .ro-input .mud-input-outlined-border { border-color: rgba(0,0,0,.18) !important; }
.ro-root .ro-input:hover .mud-input-outlined-border { border-color: var(--kz-primary,#3D9E0F) !important; }
.ro-root .ro-input .mud-input-label,
.ro-root .ro-input label { color: #4b5563 !important; }
.ro-root .ro-input .mud-input-label.mud-focused { color: var(--kz-primary,#3D9E0F) !important; }
.ro-root .ro-input .mud-input-adornment  { color: var(--kz-primary,#3D9E0F) !important; }
.ro-root .ro-input .mud-input-adornment .mud-icon-root { color: var(--kz-primary,#3D9E0F) !important; }
.ro-root .ro-input input,
.ro-root .ro-input textarea {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: var(--kz-primary,#3D9E0F) !important;
}
.ro-root .ro-input input::placeholder,
.ro-root .ro-input textarea::placeholder { color: #9ca3af !important; opacity: 1 !important; }
.ro-root .ro-input .mud-input-adornment-text { color: #374151 !important; }
.ro-root .ro-input .mud-input-helper-text   { color: #6b7280 !important; }
/* Inputs spéciaux (spécificité plus haute aussi) */
.ro-root .ro-input-gold .mud-input-outlined-border { border-color: rgba(214,196,81,.50) !important; }
.ro-root .ro-input-gold:hover .mud-input-outlined-border { border-color: var(--kz-secondary,#D6C451) !important; }
.ro-root .ro-input-amount .mud-input-outlined-border { border-color: rgba(61,158,15,.45) !important; }
.ro-root .ro-input-amount:hover .mud-input-outlined-border { border-color: var(--kz-primary,#3D9E0F) !important; }

/* ── Carte client sélectionné ────────────────────────────────── */
.ro-client-card {
    background: rgba(61,158,15,.05) !important;
    border-color: rgba(61,158,15,.20) !important;
    border-radius: 12px !important;
    animation: gz-fadein .4s ease !important;
}
.ro-client-avatar {
    background: linear-gradient(135deg, var(--kz-primary,#3D9E0F), var(--kz-primary-dark,#1F6B0A)) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(61,158,15,.30) !important;
}
.ro-client-name   { color: var(--kz-sidebar-bg,#0D1B12) !important; font-weight: 700 !important; }
.ro-chip          { background: rgba(61,158,15,.07) !important; color: #374151 !important; border-radius: 6px !important; }
.ro-chip-green    { background: rgba(61,158,15,.12) !important; color: var(--kz-primary,#3D9E0F) !important; border-color: rgba(61,158,15,.22) !important; }

/* ── Barre total billetage ───────────────────────────────────── */
.ro-total-ok       { background: rgba(61,158,15,.08) !important; color: var(--kz-primary,#3D9E0F) !important; border-color: rgba(61,158,15,.20) !important; }
.ro-total-mismatch { background: rgba(220,38,38,.07) !important; color: var(--kz-error,#DC2626) !important; border-color: rgba(220,38,38,.22) !important; }

/* ── Boutons actions ─────────────────────────────────────────── */
.ro-btn-sig {
    background: rgba(61,158,15,.10) !important;
    border-color: rgba(61,158,15,.35) !important;
    color: var(--kz-primary,#3D9E0F) !important;
    border-width: 1.5px !important;
    border-style: solid !important;
}
.ro-btn-sig:hover { background: rgba(61,158,15,.20) !important; box-shadow: 0 6px 20px rgba(61,158,15,.25) !important; }
.ro-btn-confirm {
    background: linear-gradient(135deg,
        var(--kz-secondary-dark,#B29A26),
        var(--kz-secondary,#D6C451) 40%,
        #f0cc7a 70%,
        var(--kz-secondary,#D6C451) 100%
    ) !important;
    background-size: 200% auto !important;
    color: var(--kz-sidebar-bg,#0D1B12) !important;
    box-shadow: 0 6px 26px rgba(214,196,81,.40) !important;
    animation: gz-shimmer 3s linear infinite !important;
}
.ro-btn-confirm:hover { box-shadow: 0 10px 36px rgba(214,196,81,.55) !important; }
/* Signataires section */
.ro-sig-section  { border: 1px solid rgba(61,158,15,.12) !important; border-radius: 14px !important; background: rgba(61,158,15,.03) !important; }
.ro-sig-header   { color: var(--kz-sidebar-bg,#0D1B12) !important; padding: 12px 16px !important; border-bottom: 1px solid rgba(61,158,15,.08) !important; }
.ro-sig-badge    { background: linear-gradient(135deg,var(--kz-primary,#3D9E0F),var(--kz-primary-dark,#1F6B0A)) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(61,158,15,.30) !important; }
.ro-sig-chip     { background: rgba(61,158,15,.08) !important; border: 1px solid rgba(61,158,15,.18) !important; color: var(--kz-sidebar-bg,#0D1B12) !important; border-radius: 8px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. PAGE : HISTORIQUE CAISSE  (hc-*)
   /caisse/historique
═══════════════════════════════════════════════════════════════════════════ */

/* ── Fond global → blanc ─────────────────────────────────────── */
.hc-root {
    background: #f5faf3 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 24px 24px 40px !important;
    position: relative !important;
}

/* ── Orbes → CECF ────────────────────────────────────────────── */
.hc-orb-1 { background: radial-gradient(circle,rgba(214,196,81,.10),transparent 70%) !important; }
.hc-orb-2 { background: radial-gradient(circle,rgba(61,158,15,.10),transparent 70%) !important; }
.hc-orb-3 { background: radial-gradient(circle,rgba(61,158,15,.07),transparent 70%) !important; }

/* ── Hero header → CECF gradient ────────────────────────────── */
.hc-hero {
    background: linear-gradient(135deg,
        var(--kz-sidebar-bg,#0D1B12) 0%,
        var(--kz-primary-dark,#1F6B0A) 55%,
        var(--kz-primary,#3D9E0F) 100%
    ) !important;
    border-color: rgba(214,196,81,.22) !important;
    box-shadow: 0 6px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.hc-hero-icon {
    background: linear-gradient(135deg, var(--kz-secondary,#D6C451), var(--kz-secondary-dark,#B29A26)) !important;
    box-shadow: 0 6px 22px rgba(214,196,81,.40) !important;
}
.hc-hero-title { color: #fff !important; }
/* Chips dans le hero (sur fond vert) → style clair */
.hc-chip      { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.18) !important; color: rgba(255,255,255,.88) !important; }
.hc-chip-gold { background: rgba(214,196,81,.18) !important; border-color: rgba(214,196,81,.35) !important; color: #f0cc7a !important; }
.hc-billetage-btn {
    color: var(--kz-secondary,#D6C451) !important;
    background: rgba(214,196,81,.12) !important;
    border-color: rgba(214,196,81,.28) !important;
}
.hc-billetage-btn:hover {
    background: rgba(214,196,81,.25) !important;
    box-shadow: 0 4px 18px rgba(214,196,81,.30) !important;
}

/* ── Loading ─────────────────────────────────────────────────── */
.hc-loading { position: relative !important; z-index: 1 !important; }
.hc-spinner-ring { border-color: rgba(61,158,15,.14) !important; border-top-color: var(--kz-primary,#3D9E0F) !important; }

/* ── Solde Banner → CECF vert ────────────────────────────────── */
.hc-solde-banner {
    background: linear-gradient(135deg,
        var(--kz-sidebar-bg,#0D1B12) 0%,
        var(--kz-primary-dark,#1F6B0A) 40%,
        var(--kz-primary,#3D9E0F) 100%
    ) !important;
    border-color: rgba(61,158,15,.38) !important;
    animation: gz-scale .55s cubic-bezier(.22,1,.36,1) .08s both !important;
}
.hc-solde-bg-pulse {
    background:
        radial-gradient(ellipse at 15% 60%,rgba(122,201,67,.14) 0%,transparent 55%),
        radial-gradient(ellipse at 85% 40%,rgba(61,158,15,.08) 0%,transparent 50%) !important;
}
.hc-solde-label  { color: rgba(255,255,255,.70) !important; letter-spacing: 2px !important; }
.hc-solde-amount {
    color: #ffffff !important;
    font-size: 2.8rem !important;
    font-weight: 900 !important;
    text-shadow: 0 0 40px rgba(122,201,67,.60), 0 2px 10px rgba(0,0,0,.40) !important;
}
.hc-solde-currency { color: rgba(255,255,255,.55) !important; }
.hc-solde-badge    { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.22) !important; color: rgba(255,255,255,.85) !important; }

/* ── Summary Cards → blanc ───────────────────────────────────── */
.hc-card {
    background: #ffffff !important;
    border-color: rgba(61,158,15,.08) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.06) !important;
}
.hc-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.12) !important; }
/* Icônes colorées */
.hc-icon-green { background: rgba(61,158,15,.10) !important; color: var(--kz-primary,#3D9E0F) !important; border-color: rgba(61,158,15,.20) !important; }
.hc-icon-red   { background: rgba(220,38,38,.10) !important; color: var(--kz-error,#DC2626) !important; border-color: rgba(220,38,38,.20) !important; }
.hc-icon-gold  { background: rgba(214,196,81,.10) !important; color: var(--kz-secondary,#D6C451) !important; border-color: rgba(214,196,81,.20) !important; }
.hc-icon-blue  { background: rgba(2,132,199,.10) !important; color: var(--kz-info,#0284C7) !important; border-color: rgba(2,132,199,.20) !important; }
/* Labels et valeurs (sur fond blanc = texte sombre) */
.hc-card-label { color: #6b7280 !important; }
.hc-card-val   { color: var(--kz-sidebar-bg,#0D1B12) !important; }
.hc-card-sub   { color: #9ca3af !important; }
.hc-card-green .hc-card-val { color: var(--kz-primary,#3D9E0F) !important; }
.hc-card-red   .hc-card-val { color: var(--kz-error,#DC2626) !important; }
.hc-card-gold  .hc-card-val { color: var(--kz-secondary,#D6C451) !important; }
.hc-card-blue  .hc-card-val { color: var(--kz-info,#0284C7) !important; }
/* Glows colorés en bas des cards */
.hc-glow-green { background: rgba(61,158,15,.28) !important; }
.hc-glow-red   { background: rgba(220,38,38,.22) !important; }
.hc-glow-gold  { background: rgba(214,196,81,.28) !important; }
.hc-glow-blue  { background: rgba(2,132,199,.22) !important; }

/* ── Tabs wrapper → blanc ────────────────────────────────────── */
.hc-tabs-wrapper {
    background: #ffffff !important;
    border-color: rgba(61,158,15,.10) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.07) !important;
}
.hc-tabs .mud-tabs-toolbar {
    background: linear-gradient(90deg,
        var(--kz-sidebar-bg,#0D1B12),
        var(--kz-primary-dark,#1F6B0A),
        var(--kz-sidebar-bg,#0D1B12)
    ) !important;
    border-bottom-color: rgba(214,196,81,.30) !important;
}
.hc-tabs .mud-tab {
    color: rgba(255,255,255,.65) !important;
    background: rgba(255,255,255,.03) !important;
    border-right-color: rgba(255,255,255,.06) !important;
}
.hc-tabs .mud-tab:hover { color: #fff !important; background: rgba(61,158,15,.12) !important; }
.hc-tabs .mud-tab.mud-tab-active {
    color: #f0cc7a !important;
    background: rgba(214,196,81,.15) !important;
    border-bottom-color: var(--kz-secondary,#D6C451) !important;
}
.hc-tabs .mud-tab-slider { background: var(--kz-secondary,#D6C451) !important; }
.hc-tabs .mud-tabs-panels { background: rgba(245,250,243,.80) !important; }
/* Badges d'onglets */
.hc-tbadge-default { background: rgba(61,158,15,.10) !important; color: var(--kz-primary,#3D9E0F) !important; border-color: rgba(61,158,15,.18) !important; }
.hc-tbadge-green   { background: rgba(61,158,15,.15) !important; color: var(--kz-primary,#3D9E0F) !important; border-color: rgba(61,158,15,.25) !important; }
.hc-tbadge-blue    { background: rgba(2,132,199,.15) !important; color: var(--kz-info,#0284C7) !important; border-color: rgba(2,132,199,.25) !important; }
.hc-tbadge-red     { background: rgba(220,38,38,.12) !important; color: var(--kz-error,#DC2626) !important; border-color: rgba(220,38,38,.20) !important; }
.hc-tbadge-orange  { background: rgba(245,158,11,.12) !important; color: var(--kz-warning,#F59E0B) !important; border-color: rgba(245,158,11,.20) !important; }

/* ── Tables → blanc CECF ─────────────────────────────────────── */
.hc-table { background: transparent !important; }
.hc-table .mud-table-container,
.hc-table .mud-table { background: #fff !important; }
.hc-table .mud-table-head .mud-table-cell {
    background: linear-gradient(135deg, var(--kz-sidebar-bg,#0D1B12), var(--kz-primary-dark,#1F6B0A)) !important;
    color: rgba(255,255,255,.88) !important;
    font-size: .69rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .7px !important;
    border: none !important;
}
.hc-table .mud-table-body .mud-table-row { background: #fff !important; }
.hc-table .mud-table-body .mud-table-row:nth-child(even) { background: rgba(61,158,15,.025) !important; }
.hc-table .mud-table-body .mud-table-row:hover { background: rgba(61,158,15,.06) !important; }
.hc-table .mud-table-cell { color: #1f2937 !important; border-bottom-color: rgba(0,0,0,.05) !important; }

/* ── Montants colorés ────────────────────────────────────────── */
.hc-amt-green  { color: var(--kz-primary,#3D9E0F) !important; }
.hc-amt-red    { color: var(--kz-error,#DC2626) !important; }
.hc-amt-orange { color: var(--kz-warning,#F59E0B) !important; }
.hc-dash       { color: #d1d5db !important; }

/* ── Sous-totaux ─────────────────────────────────────────────── */
.hc-subtotal-green  { background: rgba(61,158,15,.06) !important; color: var(--kz-primary,#3D9E0F) !important; border-color: rgba(61,158,15,.15) !important; }
.hc-subtotal-blue   { background: rgba(2,132,199,.06) !important; color: var(--kz-info,#0284C7) !important; border-color: rgba(2,132,199,.15) !important; }
.hc-subtotal-red    { background: rgba(220,38,38,.06) !important; color: var(--kz-error,#DC2626) !important; border-color: rgba(220,38,38,.15) !important; }
.hc-subtotal-orange { background: rgba(245,158,11,.06) !important; color: var(--kz-warning,#F59E0B) !important; border-color: rgba(245,158,11,.15) !important; }

/* ── Badges type ─────────────────────────────────────────────── */
.hc-badge-alim    { background: rgba(61,158,15,.12) !important;  color: var(--kz-primary,#3D9E0F) !important; }
.hc-badge-depot   { background: rgba(2,132,199,.12) !important;  color: var(--kz-info,#0284C7) !important; }
.hc-badge-retrait { background: rgba(220,38,38,.12) !important;  color: var(--kz-error,#DC2626) !important; }
.hc-badge-depense { background: rgba(245,158,11,.12) !important; color: var(--kz-warning,#F59E0B) !important; }
.hc-badge-cloture { background: rgba(214,196,81,.12) !important; color: var(--kz-secondary,#D6C451) !important; }
.hc-badge-other   { background: rgba(0,0,0,.06) !important; color: #6b7280 !important; }

/* ── Impression preview tab ──────────────────────────────────── */
.hc-ip-topbar {
    background: linear-gradient(90deg,
        var(--kz-sidebar-bg,#0D1B12),
        var(--kz-primary-dark,#1F6B0A)
    ) !important;
    border-color: rgba(214,196,81,.20) !important;
}
.hc-ip-logo {
    background: linear-gradient(135deg, var(--kz-secondary,#D6C451), var(--kz-secondary-dark,#B29A26)) !important;
    color: var(--kz-sidebar-bg,#0D1B12) !important;
}
.hc-ip-title { color: #fff !important; }
.hc-ip-tag   { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.80) !important; }
/* Récap strip */
.hc-ip-recap { background: rgba(61,158,15,.06) !important; border-radius: 10px !important; }
.hc-ip-recap-item { background: #fff !important; }
.hc-ip-recap-lbl { color: #6b7280 !important; }
.hc-ip-recap-val { color: var(--kz-sidebar-bg,#0D1B12) !important; }
.hc-ipr-red    .hc-ip-recap-val { color: var(--kz-error,#DC2626) !important; }
.hc-ipr-green  .hc-ip-recap-val { color: var(--kz-primary,#3D9E0F) !important; }
.hc-ipr-orange .hc-ip-recap-val { color: var(--kz-warning,#F59E0B) !important; }
.hc-ipr-blue   .hc-ip-recap-val { color: var(--kz-info,#0284C7) !important; }
/* Sections */
.hc-ip-section { border-color: rgba(61,158,15,.08) !important; }
.hc-ip-sh-gray   { background: rgba(61,158,15,.06) !important; color: #374151 !important; border-color: rgba(61,158,15,.06) !important; }
.hc-ip-sh-green  { background: rgba(61,158,15,.10) !important; color: var(--kz-primary,#3D9E0F) !important; border-color: rgba(61,158,15,.12) !important; }
.hc-ip-sh-blue   { background: rgba(2,132,199,.08) !important;  color: var(--kz-info,#0284C7) !important; border-color: rgba(2,132,199,.10) !important; }
.hc-ip-sh-red    { background: rgba(220,38,38,.08) !important;  color: var(--kz-error,#DC2626) !important; border-color: rgba(220,38,38,.10) !important; }
.hc-ip-sh-orange { background: rgba(245,158,11,.08) !important; color: var(--kz-warning,#F59E0B) !important; border-color: rgba(245,158,11,.10) !important; }
.hc-ip-empty { background: rgba(61,158,15,.02) !important; color: #9ca3af !important; }
/* Print button → CECF */
.hc-btn-print {
    background: linear-gradient(135deg, var(--kz-primary-dark,#1F6B0A), var(--kz-primary,#3D9E0F)) !important;
    box-shadow: 0 5px 20px rgba(61,158,15,.35) !important;
}
.hc-btn-print:hover:not(:disabled) { box-shadow: 0 8px 28px rgba(61,158,15,.55) !important; }
.hc-print-info-text { color: #6b7280 !important; }
/* État vide */
.hc-empty { color: #9ca3af !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. PAGE : DÉPÔT OPERATION  (depot-*)
   /Mvtcomptes/Identification
═══════════════════════════════════════════════════════════════════════════ */

.depot-container {
    background: #f5faf3 !important;
    border-radius: 16px !important;
    max-width: 1100px !important;
    margin: 12px auto !important;
}
.depot-header {
    background: linear-gradient(135deg,
        var(--kz-sidebar-bg,#0D1B12) 0%,
        var(--kz-primary-dark,#1F6B0A) 55%,
        var(--kz-primary,#3D9E0F) 100%
    ) !important;
    border-radius: 14px !important;
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(61,158,15,.25) !important;
    margin-bottom: 16px !important;
    padding: 14px 18px !important;
}
.depot-header::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 200px; height: 200px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    top: -80px; right: -40px !important;
    pointer-events: none !important;
}
.depot-header-title    { color: #fff !important; font-weight: 700 !important; }
.depot-header-subtitle { color: rgba(255,255,255,.65) !important; }
/* Icônes */
.depot-section-title-icon { color: var(--kz-primary,#3D9E0F) !important; }
.depot-label-icon          { color: var(--kz-primary,#3D9E0F) !important; }
.depot-icon-success        { color: var(--kz-primary,#3D9E0F) !important; }
.depot-icon-warning        { color: var(--kz-warning,#F59E0B) !important; }
/* Cartes */
.depot-card,
.depot-billetage-card {
    background: #ffffff !important;
    border-color: rgba(61,158,15,.10) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
    border-radius: 14px !important;
}
/* Résumé montants */
.depot-summary-card { border-color: rgba(61,158,15,.10) !important; border-radius: 10px !important; }
/* Slip billetage */
.depot-slip-card::before {
    background: linear-gradient(90deg, var(--kz-primary,#3D9E0F), var(--kz-secondary,#D6C451)) !important;
}
/* Boutons */
.depot-btn-primary,
.depot-btn-secondary { font-weight: 600 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. PAGE : SITUATION CAISSE  (glass-card, gradient-header-*)
   /situation/caisse
═══════════════════════════════════════════════════════════════════════════ */

/* Palette override → CECF */
.gradient-header-primary {
    background: linear-gradient(135deg, var(--kz-sidebar-bg,#0D1B12), var(--kz-primary-dark,#1F6B0A)) !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: 0 4px 16px rgba(61,158,15,.20) !important;
}
.gradient-header-success {
    background: linear-gradient(135deg, var(--kz-primary-dark,#1F6B0A), var(--kz-primary,#3D9E0F)) !important;
    border-radius: 14px 14px 0 0 !important;
}
.gradient-header-info {
    background: linear-gradient(135deg, #0369a1, var(--kz-info,#0284C7)) !important;
    border-radius: 14px 14px 0 0 !important;
}
.gradient-header-tertiary {
    background: linear-gradient(135deg, var(--kz-secondary-dark,#B29A26), var(--kz-secondary,#D6C451)) !important;
    border-radius: 14px 14px 0 0 !important;
}
/* Glass cards */
.glass-card {
    background: #ffffff !important;
    border: 1px solid rgba(61,158,15,.09) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.06) !important;
    overflow: hidden !important;
    transition: box-shadow .25s, transform .25s !important;
}
.glass-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(61,158,15,.08) !important;
}
/* Amount badge → CECF */
.amount-badge { color: var(--kz-primary,#3D9E0F) !important; border-color: rgba(61,158,15,.18) !important; }
.total-display { color: var(--kz-primary,#3D9E0F) !important; border-color: rgba(61,158,15,.18) !important; }
/* Hover table */
.modern-table tbody tr:hover { background-color: rgba(61,158,15,.04) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. PAGE GUICHET.RAZOR  (guichet-*)
═══════════════════════════════════════════════════════════════════════════ */

.guichet-container {
    background: #ffffff !important;
    border: 1px solid rgba(61,158,15,.08) !important;
    box-shadow: 0 6px 28px rgba(0,0,0,.07) !important;
    animation: gz-fadein .4s ease both !important;
}
.guichet-title { color: var(--kz-sidebar-bg,#0D1B12) !important; }
.guichet-card {
    border: 1px solid rgba(61,158,15,.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. PAGE : ALIMENTATION CAISSE  (alimentation-*)
═══════════════════════════════════════════════════════════════════════════ */

.alimentation-container {
    background: #ffffff !important;
    border: 1px solid rgba(61,158,15,.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
}
.alimentation-section-title { color: var(--kz-sidebar-bg,#0D1B12) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .7px !important; }
.alimentation-section-icon  { color: var(--kz-primary,#3D9E0F) !important; }
.alimentation-label         { color: #374151 !important; font-size: .78rem !important; font-weight: 500 !important; }
.alimentation-label-icon    { color: var(--kz-primary,#3D9E0F) !important; }
.alimentation-form-card     { background: #ffffff !important; border: 1px solid rgba(61,158,15,.08) !important; border-radius: 14px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. PAGES RAPPORT CAISSE (rapport-*, rpc-*)
═══════════════════════════════════════════════════════════════════════════ */

/* Patterns génériques des rapports */
.rapport-header,
.rpc-header {
    background: linear-gradient(135deg, var(--kz-sidebar-bg,#0D1B12), var(--kz-primary-dark,#1F6B0A)) !important;
    border-radius: 14px 14px 0 0 !important;
    color: #fff !important;
}
.rapport-container,
.rpc-container {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(61,158,15,.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. CLASSES PARTAGÉES DANS TOUT LE MODULE GUICHET
═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero banner premium réutilisable ─────────────────────────────── */
.gz-hero {
    background: linear-gradient(135deg,
        var(--kz-sidebar-bg,#0D1B12) 0%,
        var(--kz-primary-dark,#1F6B0A) 55%,
        var(--kz-primary,#3D9E0F) 100%
    );
    border-radius: 18px;
    padding: clamp(20px,3vw,32px) clamp(20px,4vw,40px);
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 36px rgba(0,0,0,.22);
    margin-bottom: 24px;
    animation: gz-fadein .4s ease both;
}
.gz-hero::before {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.05);
    top: -140px; right: -100px;
    pointer-events: none;
}
.gz-hero-title { font-size: clamp(18px,2vw,24px); font-weight: 900; letter-spacing: .3px; margin-bottom: 6px; }
.gz-hero-sub   { font-size: .82rem; color: rgba(255,255,255,.55); }
.gz-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(61,158,15,.18);
    border: 1px solid rgba(61,158,15,.30);
    color: #7AC943;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.gz-hero-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #7AC943;
    animation: gz-pulse-dot 1.5s ease-in-out infinite;
}

/* ── KPI Cards module guichet ─────────────────────────────────────── */
.gz-kpi-solde {
    background: linear-gradient(135deg, var(--kz-sidebar-bg,#0D1B12), var(--kz-primary-dark,#1F6B0A)) !important;
    border-radius: 16px;
    padding: 22px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    animation: gz-fadein .4s ease both;
    transition: transform .22s, box-shadow .22s;
    box-shadow: 0 8px 28px rgba(0,0,0,.20);
}
.gz-kpi-solde:hover { transform: translateY(-4px); }
.gz-kpi-entrees {
    background: linear-gradient(135deg, var(--kz-primary-dark,#1F6B0A), var(--kz-primary,#3D9E0F)) !important;
    border-radius: 16px;
    padding: 22px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(61,158,15,.30);
    animation: gz-fadein .45s ease both;
    transition: transform .22s;
}
.gz-kpi-entrees:hover { transform: translateY(-4px); }
.gz-kpi-sorties {
    background: linear-gradient(135deg, #b91c1c, var(--kz-error,#DC2626)) !important;
    border-radius: 16px;
    padding: 22px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(220,38,38,.28);
    animation: gz-fadein .50s ease both;
    transition: transform .22s;
}
.gz-kpi-sorties:hover { transform: translateY(-4px); }
.gz-kpi-ops {
    background: linear-gradient(135deg, var(--kz-secondary-dark,#B29A26), var(--kz-secondary,#D6C451)) !important;
    border-radius: 16px;
    padding: 22px 24px;
    color: var(--kz-sidebar-bg,#0D1B12);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(214,196,81,.30);
    animation: gz-fadein .55s ease both;
    transition: transform .22s;
}
.gz-kpi-ops:hover { transform: translateY(-4px); }

.gz-kpi-val  { font-size: clamp(18px,2.2vw,26px); font-weight: 900; margin: 6px 0 2px; letter-spacing: -.5px; }
.gz-kpi-lbl  { font-size: .70rem; font-weight: 700; opacity: .75; text-transform: uppercase; letter-spacing: .6px; }
.gz-kpi-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: .18; font-size: 3.5rem; }

/* ── Section header module guichet ───────────────────────────────── */
.gz-section-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 10px;
    border-bottom: 2px solid rgba(61,158,15,.10);
    margin-bottom: 16px;
    animation: gz-slidex .3s ease both;
}
.gz-section-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--kz-primary,#3D9E0F);
    box-shadow: 0 0 0 3px rgba(61,158,15,.15);
    animation: gz-pulse-dot 2.5s ease infinite;
}
.gz-section-title {
    font-size: .90rem;
    font-weight: 800;
    color: var(--kz-sidebar-bg,#0D1B12);
    letter-spacing: .2px;
}
.gz-section-line  { flex: 1; height: 1px; background: linear-gradient(90deg,rgba(61,158,15,.12),transparent); }

/* ── Status pills guichet ─────────────────────────────────────────── */
.gz-status-actif   { background: rgba(61,158,15,.10); border: 1px solid rgba(61,158,15,.25); color: var(--kz-primary,#3D9E0F); border-radius: 20px; padding: 2px 10px; font-size: .70rem; font-weight: 700; }
.gz-status-ferme   { background: rgba(220,38,38,.08);  border: 1px solid rgba(220,38,38,.22);  color: var(--kz-error,#DC2626);   border-radius: 20px; padding: 2px 10px; font-size: .70rem; font-weight: 700; }
.gz-status-attente { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.22); color: var(--kz-warning,#F59E0B); border-radius: 20px; padding: 2px 10px; font-size: .70rem; font-weight: 700; }

/* ── Bouton CECF filled ───────────────────────────────────────────── */
.gz-btn-primary {
    background: linear-gradient(135deg, var(--kz-primary,#3D9E0F), var(--kz-primary-dark,#1F6B0A)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(61,158,15,.30) !important;
    transition: transform .18s, box-shadow .18s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.gz-btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(61,158,15,.42) !important; }
.gz-btn-secondary {
    background: transparent !important;
    border: 1.5px solid rgba(61,158,15,.35) !important;
    color: var(--kz-primary,#3D9E0F) !important;
    border-radius: 10px !important;
    padding: 9px 22px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .18s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.gz-btn-secondary:hover { background: rgba(61,158,15,.07) !important; }
.gz-btn-gold {
    background: linear-gradient(135deg, var(--kz-secondary-dark,#B29A26), var(--kz-secondary,#D6C451)) !important;
    color: var(--kz-sidebar-bg,#0D1B12) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(214,196,81,.30) !important;
    transition: transform .18s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.gz-btn-gold:hover { transform: translateY(-2px) !important; }

/* ── BilletageComponent spécifique ───────────────────────────────── */
.billetage-container,
.billet-entry-card {
    background: #ffffff !important;
    border-color: rgba(61,158,15,.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ro-grid { grid-template-columns: 1fr !important; }
    .ro-col-bill { display: none; }
    .hc-cards { grid-template-columns: repeat(2, 1fr) !important; }
    .gz-hero { padding: 18px !important; }
    .gz-kpi-val { font-size: 20px !important; }
}
@media (max-width: 480px) {
    .hc-cards { grid-template-columns: 1fr !important; }
}