/**
 * SUBTLE ENHANCEMENTS
 * Light improvements inspired by Baccabucci - keeps existing design, just enhances it
 * These are ADDITIVE styles that work with your current theme
 */

/* ========================================
   Improved Card Shadows & Hover Effects
   ======================================== */

.card:hover,
.stat-card:hover,
.content-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

/* ========================================
   Better Product/Image Display
   ======================================== */

.product-card img,
.card img {
    transition: transform 0.4s ease;
}

.product-card:hover img,
.card:hover img {
    transform: scale(1.05);
}

/* ========================================
   Cleaner Table Hover States
   ======================================== */

tbody tr:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ========================================
   Better Button Hover Effects
   ======================================== */

.btn:hover,
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active,
button:active {
    transform: translateY(0);
}

/* ========================================
   Improved Status Badges
   ======================================== */

.badge,
.status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* ========================================
   Smoother Transitions (Performance Optimized)
   ======================================== */

/* Removed wildcard transition - causes performance issues */
/* Apply transitions only to specific elements that need them */

/* ========================================
   Better Focus States for Inputs
   ======================================== */

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #4361ee;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

/* ========================================
   Product Grid Improvements
   ======================================== */

.product-grid,
.grid {
    gap: 20px;
}

/* ========================================
   Improved Image Containers
   ======================================== */

.product-image,
.image-container {
    overflow: hidden;
    border-radius: 8px;
}

/* ========================================
   Better Spacing for Content
   ======================================== */

.content-section {
    margin-bottom: 32px;
}

h2 {
    margin-bottom: 20px;
}

/* ========================================
   Subtle Animation on Page Load
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card,
.stat-card {
    animation: fadeIn 0.5s ease;
}

.card:nth-child(1) {
    animation-delay: 0.05s;
}

.card:nth-child(2) {
    animation-delay: 0.1s;
}

.card:nth-child(3) {
    animation-delay: 0.15s;
}

.card:nth-child(4) {
    animation-delay: 0.2s;
}

/* ========================================
   Better Image Presentation
   ======================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   Improved Link Hover
   ======================================== */

a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* ========================================
   Mobile Responsive Improvements
   ======================================== */

@media (max-width: 768px) {
    .card:hover {
        transform: none;
    }
}