/* =========================================================
   BRAVO CRM — SHARED COMPONENTS
   (Flash messages, btn-loading, animations)
   ========================================================= */

/* -------------------------------------------------------
   FLASH MESSAGES (bravo-flash)
-------------------------------------------------------- */

@keyframes flashBannerIn {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)     scale(1);   }
}
@keyframes flashBannerOut {
    from { opacity: 1; transform: translateY(0) scale(1);   max-height: 200px; }
    to   { opacity: 0; transform: translateY(-6px) scale(.97); max-height: 0; margin-bottom: 0; }
}

.bravo-flash {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 11px 15px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    margin-bottom: 10px !important;
    line-height: 1.45 !important;
}

.bravo-flash p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* ── Banner variant (used in the global layout flash snippet) ── */
.bravo-flash--banner {
    padding: 14px 18px !important;
    border-radius: 12px !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    margin-bottom: 14px !important;
    box-shadow: 0 2px 16px rgba(15,23,42,.07), 0 1px 4px rgba(15,23,42,.04) !important;
    animation: flashBannerIn .38s cubic-bezier(.22,.61,.36,1) both !important;
    align-items: center !important;
}

.bravo-flash__icon {
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    line-height: 1.45 !important;
}

/* Icon circle — used in banner variant */
.bravo-flash__icon--circle {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.bravo-flash__text {
    flex: 1 !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* Close button inside flash */
.bravo-flash__close {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    background: rgba(0,0,0,.06) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    opacity: .6 !important;
    transition: opacity .15s, background .15s !important;
    color: inherit !important;
}
.bravo-flash__close:hover { opacity: 1 !important; background: rgba(0,0,0,.12) !important; }

/* ── Colour variants ── */

.bravo-flash--success {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}
.bravo-flash--success.bravo-flash--banner { border-left-color: #22c55e !important; }
.bravo-flash--success p,
.bravo-flash--success .bravo-flash__text { color: #166534 !important; }
.bravo-flash--success .bravo-flash__icon { color: #22c55e !important; }
.bravo-flash--success .bravo-flash__icon--circle { background: #dcfce7 !important; color: #16a34a !important; }

.bravo-flash--danger {
    background: #fff5f5 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}
.bravo-flash--danger.bravo-flash--banner { border-left-color: #ef4444 !important; }
.bravo-flash--danger p,
.bravo-flash--danger .bravo-flash__text { color: #991b1b !important; }
.bravo-flash--danger .bravo-flash__icon { color: #ef4444 !important; }
.bravo-flash--danger .bravo-flash__icon--circle { background: #fee2e2 !important; color: #dc2626 !important; }

.bravo-flash--info {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}
.bravo-flash--info.bravo-flash--banner { border-left-color: #3b82f6 !important; }
.bravo-flash--info p,
.bravo-flash--info .bravo-flash__text { color: #1e3a8a !important; }
.bravo-flash--info .bravo-flash__icon { color: #3b82f6 !important; }
.bravo-flash--info .bravo-flash__icon--circle { background: #dbeafe !important; color: #2563eb !important; }

.bravo-flash--warning {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}
.bravo-flash--warning.bravo-flash--banner { border-left-color: #f59e0b !important; }
.bravo-flash--warning p,
.bravo-flash--warning .bravo-flash__text { color: #92400e !important; }
.bravo-flash--warning .bravo-flash__icon { color: #f59e0b !important; }
.bravo-flash--warning .bravo-flash__icon--circle { background: #fef3c7 !important; color: #d97706 !important; }

/* -------------------------------------------------------
   KYC / ONBOARDING VERIFICATION BANNER
   Persistent reminder until KYC is fully approved.
   Variants: --pending (amber), --partly (blue), --rejected (red)
-------------------------------------------------------- */

.kyc-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 40px 0 6px;
    border-radius: 12px;
    border: 1px solid transparent;
    border-left: 4px solid transparent;
    box-shadow: 0 2px 16px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.05);
    animation: kycBannerIn .4s cubic-bezier(.22,.61,.36,1) both;
    transition: box-shadow .2s ease, transform .2s ease;
}

.kyc-banner:hover {
    box-shadow: 0 6px 24px rgba(15,23,42,.13), 0 2px 8px rgba(15,23,42,.07);
    transform: translateY(-1px);
}

@keyframes kycBannerIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Pending (yellow/amber — default unverified) ── */
.kyc-banner--pending {
    background: linear-gradient(135deg, #fffbeb 0%, #fef9e4 100%);
    border-color: #fde68a;
    border-left-color: #f59e0b;
    color: #111827;
}

/* ── Partly verified (blue — in review) ── */
.kyc-banner--partly {
    background: linear-gradient(135deg, #eff6ff 0%, #e8f2ff 100%);
    border-color: #bfdbfe;
    border-left-color: #2563eb;
    color: #111827;
}

/* ── Rejected (red) ── */
.kyc-banner--rejected {
    background: linear-gradient(135deg, #fef2f2 0%, #fde8e8 100%);
    border-color: #fecaca;
    border-left-color: #dc2626;
    color: #111827;
}

/* ── Icon circle ── */
.kyc-banner__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kyc-banner--pending  .kyc-banner__icon { background: #f59e0b; }
.kyc-banner--partly   .kyc-banner__icon { background: #2563eb; }
.kyc-banner--rejected .kyc-banner__icon { background: #dc2626; }

/* Pulse for pending state — draws the eye */
.kyc-banner--pending .kyc-banner__icon {
    animation: kycIconPulse 2.6s ease-in-out infinite;
}

@keyframes kycIconPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.45); }
    55%       { box-shadow: 0 0 0 9px rgba(245,158,11,0); }
}

/* ── Text block ── */
.kyc-banner__body {
    flex: 1;
    min-width: 0;
}

.kyc-banner__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;
    margin: 0;
}

.kyc-banner__sub {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 3px;
    line-height: 1.4;
}

/* ── CTA button ── */
.kyc-banner__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: opacity .15s, transform .15s, box-shadow .15s;
}

.kyc-banner__btn:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.kyc-banner--pending  .kyc-banner__btn { background: #f59e0b; color: #fff !important; }
.kyc-banner--partly   .kyc-banner__btn { background: #2563eb; color: #fff !important; }
.kyc-banner--rejected .kyc-banner__btn { background: #dc2626; color: #fff !important; }

/* ── Mobile ── */
@media (max-width: 640px) {
    .kyc-banner { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .kyc-banner__btn { width: 100%; justify-content: center; }
}

/* ── Dark mode ── */
:root.theme-dark .kyc-banner--pending {
    background: linear-gradient(135deg, rgba(245,158,11,.12) 0%, rgba(245,158,11,.07) 100%);
    border-color: rgba(245,158,11,.22);
    border-left-color: #f59e0b;
}
:root.theme-dark .kyc-banner--partly {
    background: linear-gradient(135deg, rgba(37,99,235,.14) 0%, rgba(37,99,235,.08) 100%);
    border-color: rgba(59,130,246,.28);
    border-left-color: #3b82f6;
}
:root.theme-dark .kyc-banner--rejected {
    background: linear-gradient(135deg, rgba(220,38,38,.12) 0%, rgba(220,38,38,.07) 100%);
    border-color: rgba(239,68,68,.24);
    border-left-color: #ef4444;
}
:root.theme-dark .kyc-banner__title { color: #f3f4f6; }
:root.theme-dark .kyc-banner__sub   { color: #9ca3af; }





/* -------------------------------------------------------
   BUTTON LOADING STATE
-------------------------------------------------------- */

.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: .85;
}

.btn-loading::after {
    content: "";
    position: absolute;
    right: 14px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.6);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btnSpin .7s linear infinite;
}

@keyframes btnSpin {
    to { transform: rotate(360deg); }
}


/* -------------------------------------------------------
   PAGE ENTRANCE ANIMATION
-------------------------------------------------------- */

.page-animate > * {
    opacity: 0;
    transform: translateY(24px) scale(.98);
    animation: pageFadeUp .6s cubic-bezier(.22,.61,.36,1) forwards;
}

.page-animate > *:nth-child(1) { animation-delay: .05s; }
.page-animate > *:nth-child(2) { animation-delay: .12s; }
.page-animate > *:nth-child(3) { animation-delay: .18s; }
.page-animate > *:nth-child(4) { animation-delay: .24s; }
.page-animate > *:nth-child(5) { animation-delay: .30s; }

@keyframes pageFadeUp {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dashboard entrance */
.dashboard > * {
    opacity: 0;
    transform: translateY(18px);
    animation: dashFadeUp .6s cubic-bezier(.22,.61,.36,1) forwards;
}

.dashboard > *:nth-child(1) { animation-delay: .05s; }
.dashboard > *:nth-child(2) { animation-delay: .12s; }
.dashboard > *:nth-child(3) { animation-delay: .18s; }
.dashboard > *:nth-child(4) { animation-delay: .24s; }

@keyframes dashFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -------------------------------------------------------
   DARK THEME — FLASH MESSAGES
-------------------------------------------------------- */

:root.theme-dark .bravo-flash--success {
    background: rgba(14,203,129,.10) !important;
    border-color: rgba(14,203,129,.22) !important;
    color: #0ecb81 !important;
}
:root.theme-dark .bravo-flash--success.bravo-flash--banner { border-left-color: #0ecb81 !important; }
:root.theme-dark .bravo-flash--success p,
:root.theme-dark .bravo-flash--success .bravo-flash__text { color: #0ecb81 !important; }
:root.theme-dark .bravo-flash--success .bravo-flash__icon { color: #0ecb81 !important; }
:root.theme-dark .bravo-flash--success .bravo-flash__icon--circle { background: rgba(14,203,129,.18) !important; color: #0ecb81 !important; }

:root.theme-dark .bravo-flash--danger {
    background: rgba(246,70,93,.10) !important;
    border-color: rgba(246,70,93,.22) !important;
    color: #f6465d !important;
}
:root.theme-dark .bravo-flash--danger.bravo-flash--banner { border-left-color: #f6465d !important; }
:root.theme-dark .bravo-flash--danger p,
:root.theme-dark .bravo-flash--danger .bravo-flash__text { color: #f6465d !important; }
:root.theme-dark .bravo-flash--danger .bravo-flash__icon { color: #f6465d !important; }
:root.theme-dark .bravo-flash--danger .bravo-flash__icon--circle { background: rgba(246,70,93,.18) !important; color: #f6465d !important; }

:root.theme-dark .bravo-flash--info {
    background: rgba(59,130,246,.10) !important;
    border-color: rgba(59,130,246,.25) !important;
    color: #93c5fd !important;
}
:root.theme-dark .bravo-flash--info.bravo-flash--banner { border-left-color: #3b82f6 !important; }
:root.theme-dark .bravo-flash--info p,
:root.theme-dark .bravo-flash--info .bravo-flash__text { color: #93c5fd !important; }
:root.theme-dark .bravo-flash--info .bravo-flash__icon { color: #60a5fa !important; }
:root.theme-dark .bravo-flash--info .bravo-flash__icon--circle { background: rgba(59,130,246,.2) !important; color: #60a5fa !important; }

:root.theme-dark .bravo-flash--warning {
    background: rgba(245,158,11,.10) !important;
    border-color: rgba(245,158,11,.25) !important;
    color: #fbbf24 !important;
}
:root.theme-dark .bravo-flash--warning.bravo-flash--banner { border-left-color: #f59e0b !important; }
:root.theme-dark .bravo-flash--warning p,
:root.theme-dark .bravo-flash--warning .bravo-flash__text { color: #fbbf24 !important; }
:root.theme-dark .bravo-flash--warning .bravo-flash__icon { color: #fbbf24 !important; }
:root.theme-dark .bravo-flash--warning .bravo-flash__icon--circle { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; }

:root.theme-dark .bravo-flash__close { background: rgba(255,255,255,.08) !important; }
:root.theme-dark .bravo-flash__close:hover { background: rgba(255,255,255,.16) !important; }

/* Security dot pulse in dark */
:root.theme-dark .security-item__dot--ok {
    animation: dotPulseGreen 3s ease-in-out infinite;
}


/* =========================================================
   IN-APP TOAST NOTIFICATIONS
   ========================================================= */

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(-100%) scale(.95); }
    to   { opacity: 1; transform: translateX(0)      scale(1); }
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(-110%) scale(.9); }
}

.toast-container {
    position: fixed;
    top: 24px;
    left: 24px;
    bottom: unset;
    right: unset;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 48px);
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-left: 5px solid #10b981;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
    animation: toastSlideIn .35s cubic-bezier(.22,1,.36,1) both;
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.toast--withdrawal { border-left-color: #3b82f6; }
.toast--warning    { border-left-color: #f59e0b; }
.toast--info       { border-left-color: #6366f1; }

.toast__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(16,185,129,.25);
}
.toast--withdrawal .toast__icon { background: #dbeafe; box-shadow: 0 2px 8px rgba(59,130,246,.25); }
.toast--warning    .toast__icon { background: #fef3c7; box-shadow: 0 2px 8px rgba(245,158,11,.25); }
.toast--info       .toast__icon { background: #ede9fe; box-shadow: 0 2px 8px rgba(99,102,241,.25); }

.toast__body { flex: 1; min-width: 0; }
.toast__title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 3px;
    line-height: 1.3;
}
.toast__sub {
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.4;
}
.toast__link {
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
    margin-top: 5px;
    display: inline-block;
}
.toast--withdrawal .toast__link { color: #3b82f6; }
.toast--warning    .toast__link { color: #f59e0b; }
.toast--info       .toast__link { color: #6366f1; }
.toast__close {
    flex-shrink: 0;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7280;
    font-size: 14px;
    line-height: 1;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 4px;
    opacity: .7;
    transition: opacity .15s, background .15s;
}
.toast__close:hover { opacity: 1; background: #e5e7eb; }

.toast.is-leaving {
    animation: toastSlideOut .3s ease forwards;
}

/* Dark theme */
:root.theme-dark .toast {
    background: #1e2738;
    border-color: #2d3748;
}
:root.theme-dark .toast__title { color: #f9fafb; }
:root.theme-dark .toast__sub   { color: #9ca3af; }
:root.theme-dark .toast__link  { opacity: .85; }
:root.theme-dark .toast__icon  { background: #064e3b; }
:root.theme-dark .toast--withdrawal .toast__icon { background: #1e3a5f; }
:root.theme-dark .toast--warning    .toast__icon { background: #78350f; }
:root.theme-dark .toast--info       .toast__icon { background: #312e81; }
:root.theme-dark .toast__close { background: #374151; color: #9ca3af; }
:root.theme-dark .toast__close:hover { background: #4b5563; }