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

:root {
    --aspb-green: #4A7c44;
    --aspb-green-dark: #3d6638;
    --aspb-red: #B22222;
    --aspb-cream: #F5F5DC;
    --aspb-dark: #2c3e50;
    --aspb-light-bg: #f8fafc;
    --aspb-white: #FFFFFF;
    --aspb-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--aspb-light-bg) !important;
    color: #1e293b;
}

/* Modern Navbar */
.navbar, .navbar-inverse, .bg-primary {
    background-color: var(--aspb-green) !important;
    border: none !important;
    box-shadow: var(--aspb-shadow);
}

.navbar-brand {
    font-weight: 700 !important;
    letter-spacing: 1px;
    color: var(--aspb-white) !important;
}

/* Modern Cards */
.card-counter {
    border-radius: 12px !important;
    box-shadow: var(--aspb-shadow) !important;
    padding: 25px 20px !important;
    border: none !important;
    transition: transform 0.2s ease;
}

.card-counter:hover {
    transform: translateY(-5px);
}

.panel {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: var(--aspb-shadow) !important;
    overflow: hidden;
}

.panel-heading {
    border-bottom: 1px solid #f1f5f9 !important;
    font-weight: 600 !important;
}

/* Modern Buttons */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--aspb-green) !important;
    border: none !important;
}

.btn-primary:hover {
    background-color: var(--aspb-green-dark) !important;
    box-shadow: 0 4px 12px rgba(74, 124, 68, 0.3);
}

/* Sidebar SaaS Style */
.sidebar {
    background-color: #fff !important;
    border-right: 1px solid #e2e8f0 !important;
    padding-top: 20px !important;
}

.sidebar a {
    color: #64748b !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    margin: 4px 10px !important;
    display: block !important;
    transition: all 0.2s;
}

.sidebar a:hover, .sidebar a.active {
    background-color: #f1f5f9 !important;
    color: var(--aspb-green) !important;
    font-weight: 600;
}

.sidebar i {
    margin-right: 10px;
}

/* Form Inputs */
.form-control {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 15px !important;
}

.form-control:focus {
    border-color: var(--aspb-green) !important;
    box-shadow: 0 0 0 3px rgba(74, 124, 68, 0.1) !important;
}