/* ==================================
   Dark Mode Styles
   ================================== */
:root {
    --bg-color: #ffffff;
    --text-color: #212529;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
}

[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #1e1e1e;
    --border-color: #333333;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: #242424;
    border-color: var(--border-color);
}
[data-theme="dark"] .table {
    color: var(--text-color);
}
[data-theme="dark"] .table-light {
    background-color: #2c2c2c;
    color: #e0e0e0;
}
[data-theme="dark"] .bg-light {
    background-color: #1a1a1a !important;
}
[data-theme="dark"] .text-dark {
    color: #e0e0e0 !important;
}
[data-theme="dark"] .navbar {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid var(--border-color);
}

/* ==================================
   Animations & Hover Effects
   ================================== */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}
[data-theme="dark"] .product-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
}

/* Toast Animation */
.toast-container {
    z-index: 1060;
}
.toast {
    animation: slideInRight 0.5s ease forwards;
}
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}