/* ==================== ADDITIONAL CUSTOM STYLES ==================== */

/* Hide Vue templates before compile */
[v-cloak] {
    display: none !important;
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Google Font overrides */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
}

/* Glassmorphism panel styling */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Checkbox spring/bounce effect */
.checkbox-bounce {
    animation: bounce 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.9); }
}

/* Bottom sheet drawer animation */
.animate-drawer {
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Spinner loader styling */
.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

.btn-secondary .spinner {
    border-color: rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
}

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

/* Responsive grid padding tweaks */
@media (max-width: 640px) {
    .animate-drawer {
        border-radius: 24px 24px 0 0;
    }
}

/* Infinite Ticker Marquee Animation */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Ink-Saving Clean Print Stylesheet */
@media print {
    /* Hide all non-printable UI elements */
    header, 
    footer, 
    .fixed, 
    button, 
    .no-print {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 12pt;
    }

    #app, main {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .border, .border-b, .border-t {
        border-color: #e2e8f0 !important;
    }

    /* Keep items legible with clear check circles */
    .line-through {
        text-decoration: line-through !important;
        color: #64748b !important;
    }

    /* Avoid page breaks inside category cards */
    .rounded-2xl {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}