/* Shared card treatment from Operational Analytics. Layout stays owned by each page. */
.content-area .quick-actions > .action-btn {
    border: 1px solid #39754f;
}

:where(.content-area) :is(.stat-card, .stat, .panel, .profile-card, .pet-card, .upcoming-card, .new-pet-box, .guide-box, .card),
:where(.auth-right) .form-card,
.info-card,
body > .card,
.service-card,
.contact-card {
    --oasis-card-glow: rgba(57, 117, 79, .30);
    border: 1px solid #39754f !important;
    box-shadow: 0 10px 26px -12px var(--oasis-card-glow),
                0 3px 10px rgba(30, 59, 43, .04);
    transition: box-shadow .2s ease, transform .2s ease;
}

:where(.content-area) :is(.stat-card, .stat, .panel, .profile-card, .pet-card, .upcoming-card, .new-pet-box, .guide-box, .card):hover,
:where(.auth-right) .form-card:hover,
.info-card:hover,
body > .card:hover,
.service-card:hover,
.contact-card:hover {
    box-shadow: 0 16px 32px -12px var(--oasis-card-glow),
                0 5px 14px rgba(30, 59, 43, .06);
    transform: translateY(-2px);
}

:where(.content-area) :is(.stats-grid, .stats-grid-3, .stats-grid-4, .stats) > :is(.stat-card, .stat) {
    border-left: 4px solid #39754f;
}

:where(.content-area) :is(.stats-grid, .stats-grid-3, .stats-grid-4, .stats) > :is(.stat-card, .stat):nth-child(2) {
    --oasis-card-glow: rgba(75, 112, 167, .35);
    border-left-color: #4b70a7;
}

:where(.content-area) :is(.stats-grid, .stats-grid-3, .stats-grid-4, .stats) > :is(.stat-card, .stat):nth-child(3) {
    --oasis-card-glow: rgba(146, 101, 167, .35);
    border-left-color: #9265a7;
}

:where(.content-area) :is(.stats-grid, .stats-grid-3, .stats-grid-4, .stats) > :is(.stat-card, .stat):nth-child(4) {
    --oasis-card-glow: rgba(209, 152, 23, .35);
    border-left-color: #d19817;
}

:where(.content-area) :is(.stats-grid, .stats-grid-3, .stats-grid-4, .stats) > :is(.stat-card, .stat):nth-child(5) {
    --oasis-card-glow: rgba(195, 74, 65, .32);
    border-left-color: #c34a41;
}

:where(.content-area) > :is(.panel, .card):nth-of-type(even),
:where(.content-area) :is(.grid-2, .cards-grid, .analytics-overview) > :is(.panel, .card):nth-child(2) {
    --oasis-card-glow: rgba(75, 112, 167, .30);
}

:where(.content-area) :is(.grid-2, .cards-grid, .analytics-overview) > :is(.panel, .card):nth-child(3),
.service-card:nth-child(3n + 2),
.contact-card:nth-child(3n + 2) {
    --oasis-card-glow: rgba(209, 152, 23, .30);
}

.service-card:nth-child(3n),
.contact-card:nth-child(3n) {
    --oasis-card-glow: rgba(75, 112, 167, .30);
}

@media (prefers-reduced-motion: reduce) {
    :where(.content-area) :is(.stat-card, .stat, .panel, .profile-card, .pet-card, .upcoming-card, .new-pet-box, .guide-box, .card),
    :where(.auth-right) .form-card,
    .info-card,
    body > .card,
    .service-card,
    .contact-card {
        transition: none;
    }

    :where(.content-area) :is(.stat-card, .stat, .panel, .profile-card, .pet-card, .upcoming-card, .new-pet-box, .guide-box, .card):hover,
    :where(.auth-right) .form-card:hover,
    .info-card:hover,
    body > .card:hover,
    .service-card:hover,
    .contact-card:hover {
        transform: none;
    }
}

/* Restore the shared KPI/card hover treatment over page-specific polish styles. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    body .content-area :is(.stat-card, .stat, .panel, .profile-card, .pet-card, .upcoming-card, .card, .action-btn):not(#dashboardNotifications):not(.dashboard-notifications) {
        transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
    }
    body .content-area :is(.stat-card, .stat, .panel, .profile-card, .pet-card, .upcoming-card, .card, .action-btn):not(#dashboardNotifications):not(.dashboard-notifications):hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px -8px rgba(30, 59, 43, .22), 0 3px 10px rgba(30, 59, 43, .06) !important;
    }
}