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

:root {
    --primary-green: #2C5F2D;
    --light-green: #97BC62;
    --cream: #FAF9F6;
    --dark-green: #1F4220;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--cream);
    color: #2D3748;
}

.bg-primary { background-color: var(--primary-green); }
.text-primary { color: var(--primary-green); }
.border-primary { border-color: var(--primary-green); }
.bg-cream { background-color: var(--cream); }
.bg-light-green { background-color: var(--light-green); }

.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(44, 95, 45, 0.2);
}

.sidebar-link {
    transition: all 0.3s ease;
    border-radius: 0.5rem;
}
.sidebar-link:hover, .sidebar-link.active {
    background-color: var(--light-green);
    color: #fff;
}

.btn-primary {
    background-color: var(--primary-green);
    color: white;
    transition: background-color 0.3s;
}
.btn-primary:hover {
    background-color: var(--dark-green);
}

.table-row-hover:hover {
    background-color: #f1f5f9;
}

/* --- Mobile Responsiveness --- */

/* Sidebar Overlay */
@media (max-width: 1023px) {
    aside {
        position: fixed !important;
        left: -100%;
        top: 0;
        z-index: 50;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100vh;
        width: 280px;
    }
    
    aside.active {
        left: 0;
        display: flex !important;
    }

    #sidebarOverlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        z-index: 40;
    }

    #sidebarOverlay.active {
        display: block;
    }

    main {
        padding-top: 5rem !important; /* Space for mobile header */
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Brand Gradient for components */
.brand-gradient {
    background: linear-gradient(135deg, #166534 0%, #15803d 100%);
}

.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

/* Table container fix */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}