/* ============================
   Avoflow — "Financial Zen"
   Custom Component Layer
   ============================ */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #13131b; }
::-webkit-scrollbar-thumb { background: #34343d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #454559; }

/* Selection */
::selection { background: #e2c97e; color: #231b00; }

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-overlay.active {
    display: flex;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 300;
    animation: toastIn 0.35s ease forwards;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.toast-success {
    background: #81c784;
    color: #1a1a2c;
}
.toast-error {
    background: #ef9a9a;
    color: #1a1a2c;
}

@keyframes toastIn {
    from { transform: translateX(-50%) translateY(16px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes toastOut {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* Staggered fade-in */
.stagger-fade > * {
    opacity: 0;
    animation: fadeUp 0.4s ease forwards;
}
.stagger-fade > *:nth-child(1) { animation-delay: 0.03s; }
.stagger-fade > *:nth-child(2) { animation-delay: 0.07s; }
.stagger-fade > *:nth-child(3) { animation-delay: 0.11s; }
.stagger-fade > *:nth-child(4) { animation-delay: 0.15s; }
.stagger-fade > *:nth-child(5) { animation-delay: 0.19s; }
.stagger-fade > *:nth-child(6) { animation-delay: 0.23s; }
.stagger-fade > *:nth-child(7) { animation-delay: 0.27s; }
.stagger-fade > *:nth-child(8) { animation-delay: 0.31s; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fade-in on page load */
.fade-in {
    animation: fadeIn 0.4s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Grain noise overlay */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Left accent border for cards */
.left-accent-green::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #81c784;
    border-radius: 12px 0 0 12px;
}
.left-accent-red::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ef9a9a;
    border-radius: 12px 0 0 12px;
}
.left-accent-orange::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ffb74d;
    border-radius: 12px 0 0 12px;
}
.left-accent-blue::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #99d1ff;
    border-radius: 12px 0 0 12px;
}
.left-accent-gold::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #e2c97e;
    border-radius: 12px 0 0 12px;
}

/* Progress bar base */
.progress-track {
    height: 6px;
    background: #292932;
    border-radius: 9999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: #e2c97e;
    border-radius: 9999px;
    transition: width 0.6s ease;
}

/* Pulse dot for live indicator */
.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #81c784;
    position: relative;
}
.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: #81c784;
    opacity: 0.3;
    animation: pulseRing 2s ease infinite;
}
@keyframes pulseRing {
    0%   { transform: scale(1); opacity: 0.3; }
    50%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

/* Bottom nav shadow */
.bottom-nav-shadow {
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}

/* Smooth hover scale */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Active scale press */
.active-press:active {
    transform: scale(0.96);
}

/* Number transition */
.num-transition {
    transition: all 0.3s ease;
}

/* Focus ring utility */
.focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #e2c97e;
    border-color: #e2c97e;
}