@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    /* CuraHealthLine palette */
    --color-brand: #1d5bbf; /* primary blue */
    --color-teal: #27b1a2;  /* caring teal */
    --color-green: #4bc3a3; /* supporting green */
    --color-ink: #2c3e50;   /* neutral dark */
    --color-soft: #f7f9fb;  /* light gray for surfaces */
    --color-cream: #ffffff; /* white base */
    --shadow-card: 0 18px 60px -24px rgb(17 24 39 / 0.18);
}

body {
    background: radial-gradient(circle at 20% 20%, rgba(39, 177, 162, 0.10), transparent 30%),
        radial-gradient(circle at 80% 0%, rgba(29, 91, 191, 0.12), transparent 35%),
        linear-gradient(180deg, #f7f9fb 0%, #ffffff 60%, #f7f9fb 100%);
}

.font-heading {
    font-family: 'Montserrat', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.bg-brand { background-color: var(--color-brand) !important; }
.text-brand { color: var(--color-brand) !important; }
.bg-teal { background-color: var(--color-teal) !important; }
.text-teal { color: var(--color-teal) !important; }
.bg-soft { background-color: var(--color-soft) !important; }
.bg-ink { background-color: var(--color-ink) !important; }
.text-ink { color: var(--color-ink) !important; }

.bg-hero {
    background: radial-gradient(circle at 18% 20%, rgba(39, 177, 162, 0.16), transparent 32%),
        radial-gradient(circle at 80% 10%, rgba(29, 91, 191, 0.20), transparent 40%),
        linear-gradient(135deg, #eef5ff 0%, #f7fbff 55%, #ffffff 100%);
}

.bg-sky-panel {
    background: linear-gradient(135deg, #f7f9fb 0%, #ffffff 100%);
}

.glow-card {
    box-shadow: 0 20px 60px -24px rgba(29, 91, 191, 0.2);
}

/* Admin-like card styles (global) */
.admin-card {
    background: var(--color-cream);
    border-radius: 12px;
    border: 1px solid rgba(14, 16, 19, 0.06);
    box-shadow: 0 12px 36px -18px rgba(29,91,191,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.admin-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(29,91,191,0.08);
}
/* Active state variant for admin cards - stronger shadow to indicate selection */
.admin-card.is-active {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card);
}
.admin-card.is-active:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card);
}
.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(14, 16, 19, 0.04);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.card-body {
    padding: 1rem 1.25rem;
}
.card-footer {
    padding: 0.75rem 1.25rem;
}

/* === MODERN NAVIGATION STYLES === */

/* Navigation pill style for desktop */
.nav-pill {
    @apply flex items-center px-4 py-2 text-sm font-medium text-slate-600 rounded-full transition-all duration-200;
}

.nav-pill:hover {
    @apply text-brand bg-white shadow-sm;
}

.nav-pill.active {
    @apply text-white bg-gradient-to-r from-brand to-teal shadow-md;
}

/* Hamburger menu animation */
.hamburger-line {
    @apply block w-full h-0.5 bg-slate-700 rounded-full transition-all duration-300;
}

#hamburger.open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translateY(6px);
}

#hamburger.open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#hamburger.open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translateY(-6px);
}

/* Mobile menu links */
.mobile-menu-link {
    @apply flex items-center gap-3 px-4 py-3 text-sm font-medium text-slate-700 rounded-xl transition-all duration-200;
}

.mobile-menu-link:hover {
    @apply bg-slate-100 text-brand;
}

.mobile-menu-link.active {
    @apply bg-gradient-to-r from-brand/10 to-teal/10 text-brand;
}

.mobile-menu-link svg {
    @apply text-slate-400 transition-colors duration-200;
}

.mobile-menu-link:hover svg,
.mobile-menu-link.active svg {
    @apply text-brand;
}

/* Navbar scroll state */
#navbar.scrolled > div:first-child {
    @apply shadow-lg;
}

/* === END NAVIGATION STYLES === */

@keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Logo animations */
.logo-link:hover .logo-text {
    background: linear-gradient(90deg, var(--color-brand), var(--color-teal), var(--color-brand));
    background-size: 200% auto;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Mobile drawer items animation (stagger with bounce) */
@keyframes drawerSlideIn {
    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
    60% { transform: translateY(-3px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.drawer-item {
    animation: drawerSlideIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: all 200ms ease;
}

.drawer-item:nth-child(1) { animation-delay: 0ms; }
.drawer-item:nth-child(2) { animation-delay: 80ms; }
.drawer-item:nth-child(3) { animation-delay: 160ms; }
.drawer-item:nth-child(4) { animation-delay: 240ms; }
.drawer-item:nth-child(5) { animation-delay: 320ms; }
.drawer-item:nth-child(6) { animation-delay: 400ms; }
.drawer-item:nth-child(7) { animation-delay: 480ms; }
.drawer-item:nth-child(8) { animation-delay: 560ms; }

.active\:scale-98:active {
    transform: scale(0.98);
}

/* Custom scrollbar for mobile menu */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--color-brand), var(--color-teal));
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--color-brand);
}

/* Notification badge pulse */
@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.notification-badge {
    animation: badge-pulse 2s ease-in-out infinite;
}

/* Animated blob backgrounds for modern dashboard */
@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;
}

.animation-delay-4000 {
    animation-delay: 4s;
}