.content-header h1 {
    font-weight: 800;
    letter-spacing: 0.1px;
    color: var(--csci-brand-900);
    font-size: clamp(1.4rem, 2vw, 2rem);
}

.content-header .text-muted {
    font-size: 0.95rem;
    color: var(--csci-brand-500) !important;
}

.content-wrapper {
    background: linear-gradient(180deg, #ffffff 0%, var(--csci-surface-alt) 100%);
}

.info-box {
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 73, 30, 0.08);
    border: 1px solid rgba(0, 73, 30, 0.1);
    background-color: #fff;
    overflow: hidden;
}

.info-box .info-box-number {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--csci-brand-900);
}

.card {
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 73, 30, 0.07);
    border: 1px solid rgba(0, 73, 30, 0.1);
}

.card .card-header {
    border-bottom: 1px solid rgba(0, 73, 30, 0.08);
    background-color: rgba(145, 159, 2, 0.1);
}

.card-title {
    color: var(--csci-brand-900);
}

.table thead th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--csci-brand-900);
    white-space: nowrap;
}

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

.btn-sm {
    border-radius: 8px;
}

.row .col-md-3 .info-box,
.row .col-lg-3 .info-box {
    animation: csci-fade-up 0.38s ease both;
}

.row .col-md-3:nth-child(2) .info-box,
.row .col-lg-3:nth-child(2) .info-box {
    animation-delay: 0.05s;
}

.row .col-md-3:nth-child(3) .info-box,
.row .col-lg-3:nth-child(3) .info-box {
    animation-delay: 0.1s;
}

.row .col-md-3:nth-child(4) .info-box,
.row .col-lg-3:nth-child(4) .info-box {
    animation-delay: 0.15s;
}

@keyframes csci-fade-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}