/* FinanceiroPlus — Custom Styles */

/* ── Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Sidebar gradient ──────────────────────────────────────── */
.sidebar-gradient {
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 40%, #4c1d95 100%);
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: #f1f5f9; border-radius: 100px; }
::-webkit-scrollbar-thumb    { background: #cbd5e1; border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Smooth transitions ────────────────────────────────────── */
*, *::before, *::after { transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: 150ms; transition-timing-function: ease; }

/* ── Page enter animation ──────────────────────────────────── */
main { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Card hover lift ───────────────────────────────────────── */
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,.08); }

/* ── Toast notifications ───────────────────────────────────── */
.toast {
    pointer-events: all;
    padding: 12px 16px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    max-width: 380px;
    animation: toastIn .3s ease forwards;
}
.toast.out { animation: toastOut .3s ease forwards; }
.toast-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.toast-error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.toast-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(20px); } }

/* ── Progress bar animation ────────────────────────────────── */
.progress-fill {
    animation: progressFill 1s ease forwards;
    transform-origin: left;
}
@keyframes progressFill { from { width: 0 !important; } }

/* ── Badge pulse ───────────────────────────────────────────── */
.badge-pulse { animation: pulseBadge 2s ease-in-out infinite; }
@keyframes pulseBadge { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── Print styles ──────────────────────────────────────────── */
@media print {
    aside, header, .no-print { display: none !important; }
    .lg\:pl-64 { padding-left: 0 !important; }
    main { padding: 0 !important; }
    body { background: white !important; }
}

/* ── Focus visible ─────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Number input arrow hide ───────────────────────────────── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ── Stat counter animation ────────────────────────────────── */
.count-up { animation: countUp .8s ease; }
@keyframes countUp { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Sidebar link active indicator ────────────────────────── */
.sidebar-active { position: relative; }
.sidebar-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: #fbbf24;
    border-radius: 0 3px 3px 0;
}

/* ── Alpine.js x-collapse ──────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Mobile touch improvements ─────────────────────────────── */
.touch-manipulation { touch-action: manipulation; }

/* Smooth scroll for horizontal tables */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* Touch-friendly minimum targets */
@media (max-width: 767px) {
    button, a { -webkit-tap-highlight-color: transparent; }

    /* Ensure table containers scroll smoothly */
    .overflow-x-auto { overscroll-behavior-x: contain; }
}

/* ── Responsive chart containers ───────────────────────────── */
.chart-h-sm { height: 180px; }
.chart-h-md { height: 220px; }
@media (min-width: 640px) {
    .chart-h-sm { height: 220px; }
    .chart-h-md { height: 260px; }
}

/* ── Mobile transaction card ───────────────────────────────── */
.trans-card { transition: background-color .15s; }
.trans-card:active { background-color: #f8fafc; }

/* ── Filter collapse smooth ────────────────────────────────── */
[x-show][x-transition] { transition: opacity .2s, transform .2s; }

/* ── Sidebar items bigger on mobile for fat-finger ─────────── */
@media (max-width: 1023px) {
    aside nav a { min-height: 48px; }
    aside a[href*="logout"] { min-height: 48px; }
}

/* ── Make modals scroll on small screens ───────────────────── */
@media (max-width: 640px) {
    .modal-scroll { max-height: 85vh; overflow-y: auto; }
}