body {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

.left-sidebar,
.navbar {
    background-color: var(--color-primary);
}

.card {
    background-color: var(--bg-card) !important;
    border-radius: 0.75rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.card.hoverable {
    position: relative;
    overflow: hidden; /* ensures the ::after stays clipped within rounded corners */
}

.card.hoverable:hover {
    background-color: var(--color-primary-light) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: var(--text-hover);
}

.card.hoverable::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: transparent;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    transition: background-color 0.2s ease-in-out;
    z-index: 2;
}

.card.hoverable:hover::after {
    background-color: var(--color-accent);
}