.card-stat {
    border: none;
    border-radius: 0.7rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.custom-header {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
}

.custom-body {
    padding: 0.75rem 0.5rem;
}

.custom-form-control {
    font-size: 12px;
    border-radius: 0.4rem;
    border: 1px solid #ccc;
}

.custom-form-control:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25);
}

.custom-btn {
    font-size: 12px;
    padding: 0.35rem 0.9rem;
    border-radius: 0.5rem;
}

/* Card Colors - subtle gradients */
.bg-total {
    background: linear-gradient(135deg, #1f7437, #267a3f);
    color: #fff;
}

.bg-complaint {
    background: linear-gradient(135deg, #edb106, #d79b00);
    color: #fff;
}

.bg-inquiry {
    background: linear-gradient(135deg, #935661, #804c57);
    color: #fff;
}

.bg-other {
    background: linear-gradient(135deg, #567193, #4c678a);
    color: #fff;
}

.bg-inprogress {
    background: linear-gradient(135deg, #838ca1, #747d92);
    color: #fff;
}

.bg-waiting {
    background: linear-gradient(135deg, #ad7c69, #9b6e5d);
    color: #fff;
}

.bg-onhold {
    background: linear-gradient(135deg, #8f798c, #7c6a7a);
    color: #fff;
}

.bg-research {
    background: linear-gradient(135deg, #0a3d62, #093553);
    color: #fff;
}
.bg-resolved {
    background: linear-gradient(135deg, #e94b4b, #c4474b);
    color: #fff;
}
.bg-problemsolved {
    background: linear-gradient(135deg, #ED7D3A, #ED7D3A);
    color: #fff;
}
.bg-informationprovided {
    background: linear-gradient(135deg, #810E1B, #810E1B);
    color: #fff;
}
.bg-cancelled {
    background: linear-gradient(135deg, #E71D36, #E71D36);
    color: #fff;
}
.bg-merged {
    background: linear-gradient(135deg, #C5D86D, #C5D86D);
    color: #fff;
}
.bg-active {
    background: linear-gradient(135deg, #810E1B, #810E1B);
    color: #fff;
}
.bg-resolved {
    background: linear-gradient(135deg, #08D946, #08D946);
    color: #fff;
}
.bg-cancelled {
    background: linear-gradient(135deg, #28262C, #28262C);
    color: #fff;
}
.bg-tat {
    background: linear-gradient(135deg, #f1d821, #f1d821);
    color: #fff;
}
.bg-resolution {
    background: linear-gradient(135deg, #695FAB, #695FAB);
    color: #fff;
}
.bg-fcr {
    background: linear-gradient(135deg, #418706, #418706);
    color: #fff;
}

.bg-fcrcases {
    background-color:#fa9b9b;
    color:white;
}
.bg-nonfcrcases {
    background-color:#9ba2fd;
    color:white;
}
.stats-footer {
    background: linear-gradient(135deg, #157093, #157093);
    color: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 0.8rem 1.2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 13px;
}

.stats-footer div {
    margin: 0.2rem 0;
}

.chart-card {
    border: none;
    border-radius: 0.7rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    background: #fff;
    height: 100%;
}