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

/* Brand color overrides — all .bg-indigo-600 elements use settings primary color */
.bg-indigo-600 { background-color: var(--app-primary) !important; }
.hover\:bg-indigo-700:hover { background-color: color-mix(in srgb, var(--app-primary) 85%, black) !important; }
.text-indigo-600 { color: var(--app-primary) !important; }
.text-indigo-700 { color: var(--app-primary) !important; }
.hover\:text-indigo-600:hover { color: var(--app-primary) !important; }
.ring-indigo-200 { --tw-ring-color: color-mix(in srgb, var(--app-primary) 30%, transparent) !important; }
.ring-indigo-100 { --tw-ring-color: color-mix(in srgb, var(--app-primary) 20%, transparent) !important; }
.focus\:ring-indigo-200:focus { --tw-ring-color: color-mix(in srgb, var(--app-primary) 40%, transparent) !important; }
.focus\:ring-indigo-100:focus { --tw-ring-color: color-mix(in srgb, var(--app-primary) 25%, transparent) !important; }
.bg-indigo-50 { background-color: color-mix(in srgb, var(--app-primary) 12%, white) !important; }
.hover\:bg-indigo-50:hover { background-color: color-mix(in srgb, var(--app-primary) 10%, white) !important; }
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body { background-color: #f1f5f9; }
main { flex: 1; }

/* Toast notification */
#toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    color: #fff;
    font-size: 0.875rem;
    max-width: 22rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#toast.show {
    opacity: 1;
    transform: translateY(0);
}
#toast.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

/* Animations */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.slide-up { animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* Safe area for bottom nav on iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pb-safe { padding-bottom: env(safe-area-inset-bottom); }
    .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
}

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

/* Input focus ring */
input:focus, select:focus, textarea:focus {
    outline: none;
    ring-width: 2px;
    ring-color: #6366f1;
}

/* Card hover effect */
.card-hover {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-hover:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* Scanner container */
#scanner-container video {
    border-radius: 0.75rem;
    width: 100% !important;
}

/* Bottom bar spacing on mobile */
@media (max-width: 768px) {
    .has-bottom-nav {
        padding-bottom: 5rem;
    }
}