:root {
    --wc-green-900: #0d3b2e;
    --wc-green-800: #115a43;
    --wc-green-700: #147a57;
    --wc-green-600: #1e9f6e;
    --wc-green-500: #2db67f;
    --wc-green-100: #dff6eb;
    --wc-bg: #f3faf6;
    --wc-surface: #ffffff;
    --wc-text: #10271f;
    --wc-muted: #587268;
}

body {
    color: var(--wc-text);
    background:
        radial-gradient(circle at 0% 0%, rgba(45, 182, 127, 0.08), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(30, 159, 110, 0.07), transparent 28%),
        var(--wc-bg) !important;
    padding-top: 72px;
}

.navbar.bg-dark {
    background: linear-gradient(90deg, var(--wc-green-900), var(--wc-green-700)) !important;
    box-shadow: 0 8px 20px rgba(13, 59, 46, 0.25);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.2px;
}

.nav-link {
    opacity: 0.92;
}

.nav-link:hover,
.nav-link:focus {
    opacity: 1;
    color: #ecfff5 !important;
}

.card {
    border: 1px solid #d9ede3;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(17, 90, 67, 0.08);
}

.card-header {
    border-bottom: 1px solid #e5f3ec;
    font-weight: 600;
}

.card-header.bg-primary,
.card-header.bg-info {
    background: linear-gradient(90deg, var(--wc-green-700), var(--wc-green-500)) !important;
    color: #fff !important;
    border-bottom: 0;
}

.btn-primary {
    background-color: var(--wc-green-700);
    border-color: var(--wc-green-700);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--wc-green-800);
    border-color: var(--wc-green-800);
}

.btn-outline-primary {
    color: var(--wc-green-700);
    border-color: var(--wc-green-700);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--wc-green-700);
    border-color: var(--wc-green-700);
}

.btn-success {
    background-color: var(--wc-green-600);
    border-color: var(--wc-green-600);
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--wc-green-700);
    border-color: var(--wc-green-700);
}

.form-control:focus,
.form-select:focus {
    border-color: #8ad6b6;
    box-shadow: 0 0 0 0.2rem rgba(30, 159, 110, 0.18);
}

.table > :not(caption) > * > * {
    border-bottom-color: #e2efe8;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f1faf5;
}

.badge.bg-success {
    background-color: var(--wc-green-700) !important;
}

.alert-success {
    background-color: var(--wc-green-100);
    border-color: #bfe8d3;
    color: #154a38;
}

small.text-muted,
.text-muted {
    color: var(--wc-muted) !important;
}

footer.bg-dark {
    background: linear-gradient(90deg, var(--wc-green-900), var(--wc-green-800)) !important;
}