@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
    --csci-brand-900: #00491e;
    --csci-brand-700: #02681e;
    --csci-brand-500: #919f02;
    --csci-accent: #ffc600;
    --csci-surface: #ffffff;
    --csci-surface-alt: #e9ecef;
    --csci-text-strong: #000000;
    --csci-text-muted: #4f6356;
    --csci-border-soft: rgba(0, 73, 30, 0.12);
    --csci-shadow-soft: 0 12px 28px rgba(0, 73, 30, 0.1);
    --csci-shadow-hover: 0 18px 34px rgba(0, 73, 30, 0.14);
}

body,
.content-wrapper,
.main-header,
.main-sidebar,
.content-header,
.content,
.card,
.info-box,
.table,
.btn,
.form-control,
.form-select,
.nav-link {
    font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
}

.wrapper,
.content-wrapper {
    background:
        radial-gradient(circle at 12% 10%, rgba(145, 159, 2, 0.16) 0, rgba(145, 159, 2, 0) 36%),
        radial-gradient(circle at 92% 2%, rgba(2, 104, 30, 0.09) 0, rgba(2, 104, 30, 0) 28%),
        linear-gradient(180deg, #f8faf7 0%, #eef3ee 100%);
}

.main-sidebar {
    background: linear-gradient(180deg, #003b18 0%, var(--csci-brand-900) 52%, #012f12 100%);
    box-shadow: 6px 0 24px rgba(0, 45, 18, 0.18);
}

.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(4px);
}

.brand-link .brand-text,
.main-sidebar .nav-header,
.main-sidebar .nav-link {
    color: #f5f9f2 !important;
}

.main-sidebar .nav-link {
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin: 2px 8px;
    min-height: 44px;
    transition: all 0.2s ease;
}

.main-sidebar .nav-sidebar .nav-link .nav-icon {
    width: 1.25rem;
    margin-right: 0.55rem;
    text-align: center;
    flex-shrink: 0;
}

.main-sidebar .nav-sidebar .nav-link p {
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.main-sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--csci-brand-500), #b4c228) !important;
    color: var(--csci-text-strong) !important;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(145, 159, 2, 0.3);
}

.main-sidebar .nav-link:hover {
    transform: translateX(3px);
    background-color: rgba(255, 198, 0, 0.2) !important;
    color: #ffffff !important;
}

.main-header.navbar {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(145, 159, 2, 0.35);
}

.main-header .nav-link,
.main-header .navbar-nav .nav-link {
    color: var(--csci-brand-900) !important;
}

.card,
.info-box {
    border: 1px solid var(--csci-border-soft);
    box-shadow: var(--csci-shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.info-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--csci-shadow-hover);
}

.card {
    border-radius: 16px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
}

.card-header {
    background: linear-gradient(135deg, rgba(145, 159, 2, 0.18), rgba(2, 104, 30, 0.08)) !important;
    border-bottom: 1px solid rgba(0, 73, 30, 0.1) !important;
}

.card-title,
.content-header h1 {
    color: var(--csci-brand-900);
    letter-spacing: 0.2px;
}

.text-muted {
    color: var(--csci-text-muted) !important;
}

.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
}

.btn:hover,
.btn:focus {
    transform: translateY(-1px);
}

.btn-primary,
.btn-success {
    background: linear-gradient(135deg, var(--csci-brand-700), var(--csci-brand-900)) !important;
    border-color: var(--csci-brand-700) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, var(--csci-brand-900), #003114) !important;
    border-color: var(--csci-brand-900) !important;
}

.btn-outline-secondary {
    color: var(--csci-brand-500) !important;
    border-color: var(--csci-brand-500) !important;
    background-color: rgba(255, 255, 255, 0.8);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--csci-text-strong) !important;
    background-color: var(--csci-brand-500) !important;
    border-color: var(--csci-brand-500) !important;
}

.btn-outline-primary {
    color: var(--csci-brand-700) !important;
    border-color: var(--csci-brand-700) !important;
    background-color: rgba(255, 255, 255, 0.8);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--csci-brand-700) !important;
    border-color: var(--csci-brand-700) !important;
}

.table {
    border-radius: 10px;
    overflow: hidden;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f2f7f2;
}

.table tbody tr {
    transition: background-color 0.18s ease;
}

.table tbody tr:hover {
    background-color: rgba(145, 159, 2, 0.1) !important;
}

.bg-primary {
    background-color: var(--csci-brand-700) !important;
    color: #fff !important;
}

.bg-info {
    background-color: var(--csci-brand-500) !important;
    color: var(--csci-text-strong) !important;
}

.bg-success {
    background-color: var(--csci-brand-700) !important;
    color: #fff !important;
}

.bg-secondary {
    background-color: var(--csci-brand-900) !important;
    color: #fff !important;
}

.bg-warning {
    background-color: var(--csci-accent) !important;
    color: var(--csci-text-strong) !important;
}

.badge {
    border-radius: 999px;
    padding: 0.4rem 0.58rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.badge-primary {
    background-color: var(--csci-brand-700) !important;
}

.badge-success {
    background-color: var(--csci-brand-700) !important;
}

.badge-info {
    background-color: var(--csci-brand-500) !important;
    color: var(--csci-text-strong) !important;
}

.badge-secondary {
    background-color: var(--csci-brand-900) !important;
}

.badge-warning {
    background-color: var(--csci-accent) !important;
    color: var(--csci-text-strong) !important;
}

.form-control,
.form-select {
    border-radius: 10px;
    border-color: rgba(0, 73, 30, 0.2);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--csci-brand-500);
    box-shadow: 0 0 0 0.2rem rgba(145, 159, 2, 0.18);
}

a {
    color: var(--csci-brand-700);
}

a:hover {
    color: var(--csci-brand-900);
}

.csci-bg-brand-900 {
    background: linear-gradient(135deg, var(--csci-brand-900), #012f12) !important;
    color: #fff !important;
}

.csci-bg-brand-700 {
    background: linear-gradient(135deg, var(--csci-brand-700), var(--csci-brand-900)) !important;
    color: #fff !important;
}

.csci-bg-brand-500 {
    background: linear-gradient(135deg, var(--csci-brand-500), #b5c427) !important;
    color: var(--csci-text-strong) !important;
}

.csci-row-highlight {
    background: linear-gradient(90deg, rgba(255, 198, 0, 0.24), rgba(255, 198, 0, 0.08)) !important;
}

@media (max-width: 768px) {
    .card,
    .info-box {
        border-radius: 12px;
    }
}