/* BSV Platform - Main Stylesheet
 * Organized by component type and functionality
 * Using SCSS-like nesting for clarity
 */

/* =============================================================================
   TABLE OF CONTENTS:
   1. Theme Variables
   2. Base Styles
   3. Layout Components
   4. Navigation Components
      4.1 Navbar
      4.2 Category Navigation
      4.3 Language Selector
      4.4 Currency Selector
      4.5 Theme Selector
   5. Form Controls
   6. Dropdown Menus
   7. Cards & Containers
   8. Loaders & Spinners
   9. Payment Elements
   10. Utility Classes
   11. RTL Support
   12. Responsive Styles
   ============================================================================= */

/* =============================================================================
   1. Theme Variables
   ============================================================================= */
:root {
    /* Light Theme (Default) */
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --background-color: #ffffff;
    --text-color: #212529;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --link-color: #0d6efd;
    --link-hover-color: #0a58ca;
    --header-bg: #f8f9fa;
    --footer-bg: #212529;
    --footer-text: #ffffff;
    --navbar-bg: #ffffff;
    --navbar-text: #333333;
    --navbar-hover: #f8f9fa;
    --navbar-active: #e9ecef;
    --navbar-border: #dee2e6;
    --navbar-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --dropdown-bg: #ffffff;
    --hover-bg: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --secondary-text-color: #6c757d;
    --danger-color: #dc3545;
    --danger-color-rgb: 220, 53, 69;
    --primary-color-rgb: 13, 110, 253;
}

[data-theme="dark"] {
    --primary-color: #3d8bfd;
    --secondary-color: #adb5bd;
    --background-color: #1a1d20;
    --text-color: #e9ecef;
    --border-color: #2c3034;
    --card-bg: #212529;
    --input-bg: #2c3034;
    --input-border: #373b3e;
    --link-color: #3d8bfd;
    --link-hover-color: #6ea8fe;
    --header-bg: #212529;
    --footer-bg: #1a1d20;
    --footer-text: #e9ecef;
    --navbar-bg: #1a1a1a;
    --navbar-text: #ffffff;
    --navbar-hover: #2d2d2d;
    --navbar-active: #3d3d3d;
    --navbar-border: #404040;
    --navbar-shadow: 0 2px 4px rgba(0,0,0,0.2);
    --dropdown-bg: #212529;
    --hover-bg: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --secondary-text-color: #adb5bd;
    --danger-color: #dc3545;
    --danger-color-rgb: 220, 53, 69;
    --primary-color-rgb: 61, 139, 253;
}

/* =============================================================================
   2. Base Styles
   ============================================================================= */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-right: 0 !important;
}

main {
    flex: 1;
}

html {
    overflow-y: scroll;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* =============================================================================
   3. Layout Components
   ============================================================================= */
/* Add layout components here if needed */

/* =============================================================================
   4. Navigation Components
   ============================================================================= */

/* 4.1 Navbar */
.navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--navbar-border) !important;
    box-shadow: var(--navbar-shadow) !important;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;

    /* Navbar links */
    .nav-link {
        color: var(--navbar-text) !important;
        padding: 0.5rem 1rem;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        &:hover {
            color: var(--link-color) !important;
            background-color: transparent !important;
}

        &.active {
            color: var(--navbar-text) !important;
            background-color: var(--navbar-active) !important;
        }
    }

    /* Navbar dropdowns */
    .dropdown-menu {
        background-color: var(--dropdown-bg);
        border: 1px solid var(--border-color);
        box-shadow: 0 4px 8px var(--shadow-color);
        padding: 0.5rem 0;
        min-width: 200px;
}

    .dropdown-item {
        color: var(--text-color);
        padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;

        &:hover,
        &:focus,
        &:active {
            background-color: var(--hover-bg) !important;
            color: var(--link-color) !important;
        }

        &.active {
            background-color: rgba(13, 110, 253, 0.2);
            color: var(--primary-color) !important;
}
    }

    /* Search input */
    .form-control {
        background-color: var(--input-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;

        &::placeholder {
            color: var(--secondary-text-color);
            opacity: 0.8;
        }
    }
}

/* Auth buttons styling */
.auth-buttons .btn {
    padding: 0.5rem 1rem;
    color: var(--navbar-text);
    background: transparent;
    border: none;

    &:hover {
        background: var(--navbar-hover);
}
}

/* 4.2 Category Navigation */
.category-nav {
    /* Base Container */
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-color);
    padding: 0;

    /* Nav Item Container */
    .nav-item {
        position: relative;
        
        /* Main Category Link */
        .nav-link {
    color: var(--text-color);
            transition: all 0.2s ease !important;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 2px;
    position: relative;
    display: block;
    cursor: pointer;
            
            &:hover, 
            &:focus,
            &:active {
                background-color: var(--hover-bg) !important;
    color: var(--primary-color) !important;
            }
}

        /* Dropdown Container */
        .dropdown-menu {
    border: 1px solid var(--border-color);
            box-shadow: 0 4px 8px var(--shadow-color);
    padding: 0.5rem 0;
    border-radius: 0.25rem;
    background-color: var(--card-bg);
            margin-top: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-top: none;
            min-width: 200px;
            
            /* Subcategory Items */
            .dropdown-item {
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    position: relative;
    color: var(--text-color);
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
                white-space: nowrap;
                
                &:hover,
                &:focus,
                &:active {
                    background-color: var(--hover-bg) !important;
                    color: var(--primary-color) !important;
                }
            }
        }
    }
    
    /* Dark Mode Specific Styles */
    [data-theme="dark"] & {
        background-color: var(--header-bg) !important;
        
        .nav-link:hover {
            background-color: var(--hover-bg) !important;
        }
        
        .dropdown-menu {
            background-color: var(--dropdown-bg);
            border-color: var(--border-color);
        }
        
        .dropdown-item:hover {
            background-color: var(--hover-bg) !important;
        }
}

    /* RTL Support */
    [dir="rtl"] & {
        .dropdown-item {
            text-align: right;
        }
    }
}

/* 4.3 Language Selector */
.language-selector {
    /* Base Container */
    position: relative;
    display: inline-block;

    /* Nav Link Styles */
    .nav-link {
    transition: all 0.2s ease;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
        gap: 0.35rem;
        background: transparent;
        border: none;
        text-decoration: none;

        &:hover,
        &:focus,
        &:active {
            background-color: var(--hover-bg);
            color: var(--link-color);
            text-decoration: none;
        }
    }

    /* Dropdown Toggle Button */
    .dropdown-toggle {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.5rem 0.75rem;
        color: var(--text-color);
        background: transparent;
        border: none;
        transition: all 0.2s ease;
        border-radius: 0.375rem;
        cursor: pointer;

        &::after {
            margin-left: 0.25rem;
            vertical-align: middle;
        }

        &:hover,
        &:focus,
        &:active {
            background-color: var(--hover-bg);
            color: var(--link-color);
            text-decoration: none;
        }
    }

    /* Dropdown Menu Container */
    .dropdown-menu {
        min-width: 140px;
        padding: 0;
        margin-top: 0.25rem;
        background-color: var(--card-bg);
    border: 1px solid var(--border-color);
        box-shadow: 0 0.25rem 0.5rem var(--shadow-color);
        border-radius: 0.375rem;
        z-index: 1000;

        &.show {
            display: block;
}
    }

    /* Dropdown Items */
    .dropdown-item {
        padding: 0.625rem 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-color);
        background: transparent;
    transition: all 0.2s ease;
    position: relative;
    width: 100%;
    text-align: left;
    cursor: pointer;
        text-decoration: none;

        &:last-child {
            border-bottom: none;
}

        /* Language Flag */
        .language-flag {
            width: 24px;
            height: 18px;
            object-fit: cover;
            border-radius: 2px;
            flex-shrink: 0;
            margin-top: -2px;
}

        /* Language Name */
        .language-name {
            flex: 1;
            font-size: 0.95rem;
        }

        /* Hover & Active States */
        &:hover,
        &:focus,
        &:active {
            background-color: var(--hover-bg);
            color: var(--link-color);
            text-decoration: none;
}

        &.active {
    background-color: rgba(13, 110, 253, 0.2);
    color: var(--primary-color);
}
}

    /* Dark Mode Styles */
    [data-theme="dark"] & {
        .nav-link:hover,
        .dropdown-toggle:hover,
        .dropdown-item:hover {
            background-color: var(--hover-bg);
        }

        .dropdown-item.active {
            background-color: rgba(61, 139, 253, 0.2);
    color: var(--primary-color);
}

.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
        }
    }

    /* RTL Support */
    [dir="rtl"] & {
        .dropdown-toggle::after {
            margin-left: 0;
            margin-right: 0.25rem;
}

.dropdown-item {
            text-align: right;
}
    }
}

/* 4.4 Currency Selector */
.currency-selector {
    /* Base Container */
    position: relative;
    display: inline-block;
    
    /* Toggle Button */
    .dropdown-toggle {
    display: flex;
    align-items: center;
        gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-color);
        background: transparent;
        border: none;
        transition: all 0.2s ease;
        cursor: pointer;
        
        &:hover,
        &:focus,
        &:active {
            background-color: var(--hover-bg);
            color: var(--link-color);
        }
    }
    
    /* Dropdown Menu Container */
    .dropdown-menu {
        min-width: 140px;
}

    /* Dropdown Items */
    .dropdown-item {
        padding: 0.625rem 0.75rem;
    display: flex;
    align-items: center;
        gap: 0.75rem;
        font-size: 0.95rem;

        .currency-symbol {
            font-weight: 500;
            min-width: 30px;
        }
    }
}

/* 4.5 Theme Selector */
.theme-selector {
    /* Base Container */
    position: relative;
    display: flex;
    align-items: center;

    /* Toggle Button */
    .dropdown-toggle,
    button {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-color);
        background: transparent;
        border: none;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: transparent;
            color: var(--primary-color);
        }
    }

    /* Dropdown Menu Container */
    .dropdown-menu {
        min-width: 140px;
        padding: 0.5rem 0;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        box-shadow: 0 0.5rem 1rem var(--shadow-color);
        border-radius: 0.375rem;
        z-index: 1000;
        margin-top: 0.5rem;
        transform: translateY(0) !important;
        top: 100% !important;
    }

    /* Dropdown Items */
    .dropdown-item {
        padding: 0.625rem 0.75rem;
    display: flex;
    align-items: center;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-color);
        background: transparent;
        transition: all 0.2s ease;
        position: relative;
        width: 100%;
        cursor: pointer;
        font-size: 0.95rem;

        &:last-child {
            border-bottom: none;
}

        i:not(.fa-check) {
            width: 30px;
    text-align: center;
            font-size: 16px;
            transition: color 0.2s ease;
        }

        .theme-name {
            flex: 1;
            color: var(--text-color);
            transition: color 0.2s ease;
        }

        &:hover,
        &:focus,
        &:active {
            background-color: var(--hover-bg) !important;
            
            .theme-name,
            i:not(.fa-check) {
                color: var(--primary-color) !important;
            }
        }
    }

    /* Theme icons - Light Theme */
    [data-theme="light"] & {
        .fa-moon,
        .fa-desktop {
            color: #495057;
        }

        .theme-item[data-theme="dark"] {
            .theme-name {
                color: #212529;
            }
        }
        .theme-item.active {
            &:hover {
                background-color: var(--hover-bg) !important;
            }
        }
    }

    /* Theme icons - Dark Theme */
    [data-theme="dark"] & {
        .fa-sun {
            color: #adb5bd;
        }

        .fa-moon {
            color: #6ea8fe;
        }

        .fa-desktop {
            color: #adb5bd;
        }

        .theme-item[data-theme="dark"] {
            .fa-moon {
                color: #ced4da;
            }

            .theme-name {
                color: #e9ecef;
            }
        }
    }
}

/* =============================================================================
   5. Form Controls
   ============================================================================= */
.form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    transition: all 0.2s ease;

    &:focus {
        background-color: var(--input-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

    &::placeholder {
        color: var(--secondary-text-color);
        opacity: 0.8;
    }
}

/* Form validation */
.invalid-feedback {
    display: none;
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.is-invalid {
    border-color: var(--danger-color) !important;

    &:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--danger-color-rgb), 0.25);
    }

    & ~ .invalid-feedback {
        display: block;
    }
}

/* Form elements in dark mode */
[data-theme="dark"] {
    .form-control,
    .form-select,
    .form-check-input,
    textarea,
    select {
        color: var(--text-color) !important;
        background-color: var(--input-bg) !important;
        border-color: var(--border-color) !important;
    }

    .form-control:focus,
    .form-select:focus,
    .form-check-input:focus,
    textarea:focus,
    select:focus,
    input:focus {
        border-color: var(--link-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(61, 139, 253, 0.25) !important;
    }
}

/* =============================================================================
   6. Dropdown Menus
   ============================================================================= */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 8px var(--shadow-color);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
    z-index: 1000;
    
    &.show {
    display: block;
}

    /* Positioning variants */
    &.dropdown-menu-end {
    right: 0;
    left: auto;
}
}

.dropdown-item {
    color: var(--text-color);
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
    background-color: transparent;
    border: none;
    
    &:hover,
    &:focus,
    &:active {
        background-color: var(--hover-bg);
        color: var(--link-color);
    }
    
    &.active {
        background-color: rgba(13, 110, 253, 0.2);
        color: var(--primary-color);
    }
}

.dropdown-toggle::after {
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* =============================================================================
   7. Cards & Containers
   ============================================================================= */
/* Add card styles here if needed */

/* Dark mode specific styles */
[data-theme="dark"] .category-section,
[data-theme="dark"] .review-section,
[data-theme="dark"] .popular-categories {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .category-card,
[data-theme="dark"] .review-card,
[data-theme="dark"] .popular-category-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Home page info cards dark mode fix */
[data-theme="dark"] .card {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}
[data-theme="dark"] .card .card-body h4,
[data-theme="dark"] .card .card-body p,
[data-theme="dark"] .card .card-body {
    color: var(--text-color) !important;
}
[data-theme="dark"] .bg-primary.bg-opacity-10 {
    background-color: rgba(61, 139, 253, 0.10) !important;
}

/* =============================================================================
   8. Loaders & Spinners
   ============================================================================= */
.global-loading-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.spinner-container {
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;

    [data-theme="dark"] & {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }
}

.spinner-text {
    margin-top: 1rem;
    color: var(--text-color);
    transition: color 0.3s ease;
}

/* =============================================================================
   9. Payment Elements
   ============================================================================= */
.payment-method-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
        background-color: var(--hover-bg);
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    img,
    .network-badge {
        width: 24px;
        height: 24px;
        object-fit: contain;
        margin-right: 0.5rem;
        border: none !important;
        background: none !important;
    }

    .network-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-color);
        color: white;
        border-radius: 50%;
        font-size: 0.75rem;
        font-weight: bold;
    }
}

/* Payment Icons Container */
.payment-icons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.payment-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background-color: var(--card-bg);
    transition: all 0.2s ease;
    
    &:hover {
        border-color: var(--primary-color);
        transform: scale(1.1);
    }
}

/* =============================================================================
   10. Utility Classes
   ============================================================================= */
.cursor-pointer {
    cursor: pointer;
}

.btn-outline-secondary {
    border-color: var(--navbar-border) !important;
    color: var(--navbar-text) !important;
    
    &:hover {
        background-color: var(--navbar-hover) !important;
        border-color: var(--navbar-border) !important;
        color: var(--navbar-text) !important;
    }
}

/* =============================================================================
   11. RTL Support
   ============================================================================= */
[dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
}

[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .dropdown-toggle::after { margin-left: 0; margin-right: 0.255em; }
[dir="rtl"] .text-md-end { text-align: left !important; }
[dir="rtl"] .text-md-start { text-align: right !important; }

/* =============================================================================
   12. Responsive Styles
   ============================================================================= */
/* Add responsive styles here if needed */

[data-theme="dark"] .text-dark {
    color: var(--text-color) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--card-bg) !important;
}
[data-theme="dark"] .text-muted {
    color: #adb5bd !important;
}

/* ======= Category Page & Product Card Styles (moved from Blade) ======= */
.custom-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem;
    font-size: 0.85rem;
}
.custom-breadcrumb a {
    color: #fff;
    font-weight: 400;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
    outline: none;
}
.custom-breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}
.custom-breadcrumb a:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.custom-breadcrumb .separator {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0.5rem;
}
.custom-breadcrumb .active {
    font-weight: 600;
    color: #fff;
}
.product-card .card-img-top,
.product-card .card-title,
.product-card .product-image-container,
.category-card .card-img-top,
.category-card .card-title {
    cursor: pointer;
    transition: all 0.2s;
}
.product-card .card-img-top:hover,
.category-card .card-img-top:hover {
    opacity: 0.9;
}
.product-card a,
.category-card a {
    text-decoration: none;
    border: none;
    outline: none;
}
.product-card a:focus,
.category-card a:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.product-card a:hover .card-title,
.category-card a:hover .card-title {
    color: #0d6efd !important;
}
.card-title {
    font-weight: 500;
    font-size: 0.95rem;
}
.category-card .card-title {
    font-size: 0.9rem;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
.text-muted {
    font-size: 0.85rem;
}
/* Image placeholder icons styling */
i.fas.fa-image.text-muted,
i.fa-image.text-muted,
i.fas.fa-folder.text-secondary {
    font-size: 42px !important;
    width: 56px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.7;
}

/* Product/category image and placeholder aspect ratio and centering */
.product-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--card-bg);
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* List view specific adjustments */
.product-card .row.g-0 .product-image-container {
    height: 100%;
}

.placeholder-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
}

.placeholder-image i {
    font-size: 2.5rem;
    color: var(--secondary-text-color);
    opacity: 0.7;
}

/* Align product text with image in list view */
.product-card .row.g-0 {
    align-items: flex-start;
}
.product-card .card-body {
    padding-top: 0.50rem !important; /* Reduce if needed */
    
}
.product-card .card-body > .d-flex,
.product-card .card-body > .d-flex > div {
    margin-top: 0 !important;
}

/* Clamp product description to 2 lines with ellipsis for compact cards */
.product-card .card-text,
.product-card .product-description,
.product-card .card-body p.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.8em;
    font-size: 0.93rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}
.product-card .card-body {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Hide product description in product cards on category page */
.product-card .product-description {
    display: none !important;
}

/* Strong dark mode fixes for login/register/auth pages */
[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .card-body,
[data-theme="dark"] .bg-white {
    background-color: var(--card-bg, #23272b) !important;
    color: var(--text-color, #f8f9fa) !important;
    border: none !important;
}
[data-theme="dark"] .form-control {
    background-color: #181a1b !important;
    color: #f8f9fa !important;
    border: 1px solid #343a40 !important;
}
[data-theme="dark"] .form-control:focus {
    background-color: #23272b !important;
    color: #f8f9fa !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 0.2rem rgba(59,130,246,.25) !important;
}
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label {
    color: #f8f9fa !important;
}
[data-theme="dark"] .form-control::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
[data-theme="dark"] .alert {
    background-color: #23272b !important;
    color: #f8f9fa !important;
    border: 1px solid #343a40 !important;
}
[data-theme="dark"] .btn-primary {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

[data-theme="dark"] hr {
    border-color: var(--border-color, #343a40) !important;
    opacity: 0.5;
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .card-body {
    border: 1px solid var(--border-color, #343a40) !important;
}

/* Dark mode fixes for Forgot Your Password modal and all modals */
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg, #23272b) !important;
    color: var(--text-color, #f8f9fa) !important;
    border: 1px solid var(--border-color, #343a40) !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
    background-color: var(--card-bg, #23272b) !important;
    color: var(--text-color, #f8f9fa) !important;
    border: none !important;
}
[data-theme="dark"] .modal-header:not(:last-child),
[data-theme="dark"] .modal-body:not(:last-child) {
    border-bottom: 1px solid var(--border-color, #343a40) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .bg-white {
    background-color: var(--card-bg, #23272b) !important;
    color: var(--text-color, #f8f9fa) !important;
    border: 1px solid var(--border-color, #343a40) !important;
}
[data-theme="dark"] .form-control {
    background-color: #181a1b !important;
    color: #f8f9fa !important;
    border: 1px solid #343a40 !important;
}
[data-theme="dark"] .form-control:focus {
    background-color: #23272b !important;
    color: #f8f9fa !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 0.2rem rgba(59,130,246,.25) !important;
}
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label {
    color: #f8f9fa !important;
}
[data-theme="dark"] .form-control::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
[data-theme="dark"] .alert {
    background-color: #23272b !important;
    color: #f8f9fa !important;
    border: 1px solid #343a40 !important;
}
[data-theme="dark"] .btn-primary {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Search autocomplete styling */
.search-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
}

.search-autocomplete.active {
    display: block;
}

/* Search container positioning */
.navbar form {
    position: relative;
}

/* Make sure the input group is positioned properly */
.navbar .input-group {
    width: 100%;
}

/* Make search results appear below input */
#searchResults {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1050;
}

.navbar .search-form {
    position: relative;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .navbar .search-form {
        max-width: 100%;
        margin: 0.5rem 0;
    }
    
    #searchResults {
        top: calc(100% - 1px);
        border-top: none;
    }
    
    .search-autocomplete {
        position: fixed;
        left: 0;
        right: 0;
        width: 100vw;
        max-height: 50vh;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* Prevent search results from being hidden by other elements */
.navbar .search-form, 
#searchResults {
    z-index: 1050;
}

/* Improved search bar styling */
.navbar .input-group {
    transition: all 0.2s ease;
}

.navbar .input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-radius: 0.375rem;
}

.navbar .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.navbar .input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Message page dark mode fixes */
[data-theme="dark"] .message-list {
    background-color: var(--card-bg);
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .message-item {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .message-item:hover {
    background-color: var(--hover-bg);
}

[data-theme="dark"] .message-item.active {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

[data-theme="dark"] .message-content {
    background-color: var(--card-bg);
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .message-header {
    border-color: var(--border-color) !important;
    background-color: var(--card-bg);
}

[data-theme="dark"] .message-body {
    background-color: var(--card-bg);
}

[data-theme="dark"] .message-footer {
    border-color: var(--border-color) !important;
    background-color: var(--card-bg);
}

[data-theme="dark"] .message-bubble {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .message-bubble.outgoing {
    background-color: rgba(var(--primary-color-rgb), 0.15);
    color: var(--text-color);
}

[data-theme="dark"] .message-timestamp {
    color: var(--secondary-text-color);
}

[data-theme="dark"] .message-sender {
    color: var(--text-color);
}

[data-theme="dark"] .message-input {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .message-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

[data-theme="dark"] .message-empty-state {
    color: var(--secondary-text-color);
}

[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-color);
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: rgba(var(--primary-color-rgb), 0.2);
    color: var(--primary-color);
}

[data-theme="dark"] .nav-pills .nav-link:hover:not(.active) {
    background-color: var(--hover-bg);
}

/* Fix for message attachment buttons in dark mode */
[data-theme="dark"] .message-attachment-btn {
    color: var(--text-color);
    background-color: var(--input-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .message-attachment-btn:hover {
    background-color: var(--hover-bg);
}

/* Fix for badges in dark mode */
[data-theme="dark"] .badge.bg-secondary {
    background-color: #495057 !important;
}

/* Fix for list groups in dark mode */
[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .list-group-item-action:hover {
    background-color: var(--hover-bg);
}

/* Fix for message date dividers */
[data-theme="dark"] .message-date-divider {
    border-color: var(--border-color);
}

[data-theme="dark"] .message-date-divider span {
    background-color: var(--card-bg);
    color: var(--secondary-text-color);
}

/* General dark mode fixes */
[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] hr {
    border-color: var(--border-color);
    opacity: 0.2;
}

/* Fix for tabs in dark mode */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-color);
    border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover:not(.active) {
    border-color: var(--hover-bg) var(--hover-bg) var(--border-color);
    background-color: var(--hover-bg);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

/* Fix for tables in dark mode */
[data-theme="dark"] .table {
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .table thead th {
    border-bottom-color: var(--border-color);
    background-color: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .table td, 
[data-theme="dark"] .table th {
    border-color: var(--border-color);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--hover-bg);
}

/* Fix for modals in dark mode */
[data-theme="dark"] .offcanvas {
    background-color: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .offcanvas-footer {
    border-top-color: var(--border-color);
}

/* Fix search autocomplete in dark mode */
[data-theme="dark"] .search-autocomplete {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .search-autocomplete .dropdown-header {
    color: var(--secondary-text-color);
}

[data-theme="dark"] .search-autocomplete .dropdown-item {
    color: var(--text-color);
}

[data-theme="dark"] .search-autocomplete .dropdown-item:hover {
    background-color: var(--hover-bg);
}

[data-theme="dark"] .search-autocomplete .dropdown-divider {
    border-color: var(--border-color);
}

[data-theme="dark"] .search-autocomplete .text-muted {
    color: var(--secondary-text-color) !important;
}

/* Fix breadcrumbs in dark mode */
[data-theme="dark"] .breadcrumb {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--text-color);
}

[data-theme="dark"] .breadcrumb-item {
    color: var(--text-color);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--primary-color);
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--text-color);
}

[data-theme="dark"] .breadcrumb-item a:hover {
    color: var(--primary-color);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--secondary-text-color);
}

/* Fix subject area in dark mode */
[data-theme="dark"] .message-subject,
[data-theme="dark"] .message-thread-subject {
    color: var(--text-color);
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .message-subject h5,
[data-theme="dark"] .message-thread-subject h5 {
    color: var(--text-color);
}

/* Fix message info areas with white backgrounds */
[data-theme="dark"] .message-info,
[data-theme="dark"] .message-thread-info,
[data-theme="dark"] .message-metadata,
[data-theme="dark"] .message-details,
[data-theme="dark"] .thread-participants {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .message-info h6,
[data-theme="dark"] .message-thread-info h6,
[data-theme="dark"] .message-metadata h6,
[data-theme="dark"] .message-details h6 {
    color: var(--text-color);
}

[data-theme="dark"] .message-info small,
[data-theme="dark"] .message-thread-info small,
[data-theme="dark"] .message-metadata small,
[data-theme="dark"] .message-details small {
    color: var(--secondary-text-color);
}

/* Fix text in all message-related containers */
[data-theme="dark"] .message-container,
[data-theme="dark"] .thread-container,
[data-theme="dark"] .message-panel,
[data-theme="dark"] .thread-panel {
    background-color: var(--card-bg);
    color: var(--text-color);
}

/* Fix specific elements with white/light background in messages */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-body,
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"] {
    background-color: var(--card-bg) !important;
}

/* Fix all card backgrounds in messages */
[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-footer {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Fix all alert backgrounds in messages */
[data-theme="dark"] .alert-light,
[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-secondary {
    background-color: rgba(var(--primary-color-rgb), 0.1) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Fix custom breadcrumb elements */
[data-theme="dark"] .custom-breadcrumb {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .custom-breadcrumb a,
[data-theme="dark"] .custom-breadcrumb span,
[data-theme="dark"] .custom-breadcrumb .separator {
    color: var(--text-color) !important;
}

[data-theme="dark"] .custom-breadcrumb .active {
    color: var(--primary-color) !important;
}

/* Fix thread headers and subject lines */
[data-theme="dark"] .thread-header,
[data-theme="dark"] .thread-subject,
[data-theme="dark"] .thread-title,
[data-theme="dark"] .message-header-subject {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Fix file upload information text in dark mode */
[data-theme="dark"] .file-upload-info,
[data-theme="dark"] .form-text,
[data-theme="dark"] .text-muted,
[data-theme="dark"] small.text-muted,
[data-theme="dark"] .small.text-muted,
[data-theme="dark"] .form-file-text,
[data-theme="dark"] .form-file-button,
[data-theme="dark"] .form-helper-text {
    color: #adb5bd !important;
}

/* Make file upload info text more visible */
[data-theme="dark"] .file-upload-info {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-color);
    margin-top: 0.25rem;
}

/* Improve contrast for form helper text */
[data-theme="dark"] .form-text strong,
[data-theme="dark"] .file-upload-info strong,
[data-theme="dark"] .form-helper-text strong {
    color: #e9ecef;
    font-weight: 600;
}

/* Fix form file input styling */
[data-theme="dark"] .form-control[type="file"] {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .form-control[type="file"]::file-selector-button {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-control[type="file"]:hover::file-selector-button {
    background-color: var(--hover-bg);
}

/* More specific selectors for contact support file upload info */
[data-theme="dark"] .contact-form .form-text,
[data-theme="dark"] .contact-form small,
[data-theme="dark"] .contact-form .small,
[data-theme="dark"] .support-form .form-text,
[data-theme="dark"] .support-form small,
[data-theme="dark"] .support-form .small,
[data-theme="dark"] .message-form .form-text,
[data-theme="dark"] .message-form small,
[data-theme="dark"] .message-form .small,
[data-theme="dark"] .thread-form .form-text,
[data-theme="dark"] .thread-form small,
[data-theme="dark"] .thread-form .small,
[data-theme="dark"] .file-upload-container .form-text,
[data-theme="dark"] .file-upload-container small,
[data-theme="dark"] .file-upload-container .small {
    color: #ced4da !important;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.25rem;
    display: inline-block;
}

/* Ensure all file upload related elements are properly styled */
[data-theme="dark"] [class*="file-upload"] .text-muted,
[data-theme="dark"] [class*="upload-info"] .text-muted,
[data-theme="dark"] [class*="upload-text"] .text-muted,
[data-theme="dark"] [id*="file-upload"] .text-muted,
[data-theme="dark"] [id*="upload-info"] .text-muted,
[data-theme="dark"] label[for*="file"] + small,
[data-theme="dark"] label[for*="attachment"] + small,
[data-theme="dark"] input[type="file"] + small {
    color: #e9ecef !important;
    font-weight: 500;
}

/* Dashboard Dark Mode Styles - Enhanced Background Fixes */
[data-theme="dark"] .alert {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: #fff3cd !important;
}

[data-theme="dark"] .alert-warning .alert-heading {
    color: #fff3cd !important;
}

[data-theme="dark"] .alert-warning .btn {
    background-color: rgba(255, 193, 7, 0.8) !important;
    border-color: rgba(255, 193, 7, 0.8) !important;
    color: #000 !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
    color: #f8d7da !important;
}

[data-theme="dark"] .alert-danger .alert-heading {
    color: #f8d7da !important;
}

[data-theme="dark"] .alert-danger .btn {
    background-color: rgba(220, 53, 69, 0.8) !important;
    border-color: rgba(220, 53, 69, 0.8) !important;
    color: #fff !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border-color: rgba(13, 202, 240, 0.4) !important;
    color: #d1ecf1 !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15) !important;
    border-color: rgba(25, 135, 84, 0.4) !important;
    color: #d4edda !important;
}

/* Dashboard Cards - Enhanced */
[data-theme="dark"] .card.bg-primary {
    background-color: rgba(13, 110, 253, 0.25) !important;
    border-color: rgba(13, 110, 253, 0.4) !important;
}

[data-theme="dark"] .card.bg-primary .card-body {
    background-color: rgba(13, 110, 253, 0.25) !important;
}

[data-theme="dark"] .card.bg-success {
    background-color: rgba(25, 135, 84, 0.25) !important;
    border-color: rgba(25, 135, 84, 0.4) !important;
}

[data-theme="dark"] .card.bg-success .card-body {
    background-color: rgba(25, 135, 84, 0.25) !important;
}

[data-theme="dark"] .card.bg-info {
    background-color: rgba(13, 202, 240, 0.25) !important;
    border-color: rgba(13, 202, 240, 0.4) !important;
}

[data-theme="dark"] .card.bg-info .card-body {
    background-color: rgba(13, 202, 240, 0.25) !important;
}

[data-theme="dark"] .card.bg-warning {
    background-color: rgba(255, 193, 7, 0.25) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
}

[data-theme="dark"] .card.bg-danger {
    background-color: rgba(220, 53, 69, 0.25) !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
}

/* Force override for any remaining white backgrounds */
[data-theme="dark"] .alert.alert-warning,
[data-theme="dark"] .alert.alert-danger,
[data-theme="dark"] .alert.alert-info,
[data-theme="dark"] .alert.alert-success {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .alert.alert-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05)) !important;
}

[data-theme="dark"] .alert.alert-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.05)) !important;
}

[data-theme="dark"] .alert.alert-info {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.15), rgba(13, 202, 240, 0.05)) !important;
}

/* Override Bootstrap's !important declarations */
[data-theme="dark"] .bg-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
}

[data-theme="dark"] .bg-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

[data-theme="dark"] .bg-info {
    background-color: rgba(13, 202, 240, 0.2) !important;
}

[data-theme="dark"] .bg-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
}

[data-theme="dark"] .bg-primary {
    background-color: rgba(13, 110, 253, 0.2) !important;
}

/* Seller Pages Dark Mode Fixes */
[data-theme="dark"] .card-header {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .card-header h1,
[data-theme="dark"] .card-header h2,
[data-theme="dark"] .card-header h3,
[data-theme="dark"] .card-header h4,
[data-theme="dark"] .card-header h5,
[data-theme="dark"] .card-header h6 {
    color: var(--text-color) !important;
}

[data-theme="dark"] .card-header .btn {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

[data-theme="dark"] .card-header .btn:hover {
    background-color: var(--link-hover-color) !important;
    border-color: var(--link-hover-color) !important;
}

/* Table Headers */
[data-theme="dark"] .table thead th {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 2px solid var(--border-color) !important;
    color: var(--text-color) !important;
    font-weight: 600;
}

[data-theme="dark"] .table th {
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .table td {
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Table Striped Rows */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Table Hover Effect */
[data-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > th {
    background-color: var(--hover-bg) !important;
}

/* Seller Page Specific Elements */
[data-theme="dark"] .seller-page .card,
[data-theme="dark"] .products-page .card,
[data-theme="dark"] .seller-dashboard .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .seller-page .card-body,
[data-theme="dark"] .products-page .card-body,
[data-theme="dark"] .seller-dashboard .card-body {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Action Buttons in Tables */
[data-theme="dark"] .table .btn-sm {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

[data-theme="dark"] .table .btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .table .btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

[data-theme="dark"] .table .btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .table .btn-outline-danger:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

/* Pagination */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--hover-bg) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--secondary-text-color) !important;
}