/* Optional dashboard demo utilities layered on top of theme.css. */

.dashboard-period-selector .btn {
    min-height: var(--control-height-sm);
    padding: calc(var(--space-xs) - 1px) var(--space-md);
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-sm);
}

.dashboard-period-selector .btn-outline-primary {
    border-color: rgba(var(--color-primary-rgb), 0.24) !important;
    color: var(--brand-primary) !important;
    background: transparent !important;
}

.dashboard-period-selector .btn-outline-primary:hover,
.dashboard-period-selector .btn-outline-primary:focus,
.dashboard-period-selector .period-btn.active,
.dashboard-period-selector .btn-outline-primary.active,
.dashboard-period-selector .btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--brand-primary-soft) !important;
    color: var(--brand-primary) !important;
    border-color: rgba(var(--color-primary-rgb), 0.36) !important;
    box-shadow: none !important;
}

.stat-card-mini {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-mini:hover {
    transform: translateY(-3px);
    box-shadow: var(--shell-shadow-hover);
}

.stat-icon-mini {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.stat-card-link {
    display: block;
    cursor: pointer;
}

.stat-card-link:hover {
    text-decoration: none;
}

.stat-card-link .fe-chevron-left {
    transition: transform 0.2s ease, color 0.2s ease;
}

.stat-card-link:hover .fe-chevron-left {
    transform: translateX(-4px);
    color: var(--brand-accent-dark);
}

.avatar-circle {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary-dark) 100%);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
}

@media (max-width: 768px) {
    .dashboard-period-selector {
        flex-wrap: wrap;
    }

    .dashboard-period-selector .btn {
        font-size: 0.75rem;
    }
}