@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
body { font-family: 'Inter', sans-serif; transition: background-color 0.2s; -webkit-tap-highlight-color: transparent; }

/* Premium Background Animations for Login */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }

/* Scrollbar Hiding */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@media print { .no-print { display: none !important; } body { background: white !important; } }

/* Custom Styled Select Dropdowns */
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.1em; padding-right: 2.5rem; appearance: none; }

.hidden-modal { opacity: 0; pointer-events: none; }
.filtered-out { display: none !important; }

/* Header Nav Slider (Updated from Dock) */
#navSlider {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    will-change: left, width;
}

.nav-pill:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}

/* Top Progress Bar */
#topLoadingBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: #2563eb; 
    width: 0%;
    z-index: 100;
    transition: width 0.4s ease;
    pointer-events: none;
}

/* Smooth Page Fade-In */
main {
    opacity: 0;
    transition: opacity 0.4s ease;
}

main.opacity-100 {
    opacity: 1;
}

/* Stability */
html { overflow-y: scroll; }

/* iOS / iPad Safe Area Adjustments */
header {
    /* Keeps p-4 horizontal padding while respecting status bar */
    padding-top: calc(1rem + env(safe-area-inset-top)) !important;
}

/* Standard Footer Safe Area */
footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
}

/* Add Item FAB - Back to standard corner positioning */
#addItemFAB {
    bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
    right: 1.5rem;
}

/* "Bulletproof" Tutorial Overlay */
#spotlightOverlay {
    z-index: 99999 !important;
    position: fixed;
    inset: 0;
}

#spotlightHole {
    z-index: 100000;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
}

#spotlightLabel {
    z-index: 100001;
}

/* The Tutorial Focus Effect */
.tutorial-focus {
    position: relative !important;
    z-index: 100 !important; /* Above the overlay */
    pointer-events: none; /* Prevent accidental clicks during tour */
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.4), 0 0 40px rgba(37, 99, 235, 0.6) !important;
    border-color: #2563eb !important;
    background-color: white !important;
    transition: all 0.3s ease;
}

.dark .tutorial-focus {
    background-color: #0f172a !important; /* Match slate-900 */
}

/* Ensure the modal is ALWAYS on top */
#onboardingModal {
    z-index: 200;
}