/* --- VENDOR NAVIGATION STYLES (FINAL & CORRECTED) --- */

/* Basic body setup to accommodate a fixed header */
body.vendor-page {
    padding-top: 50px; /* Height of the vendor header */
    margin: 0; /* Ensure no default body margin */
}

.vendor-header {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    height: 60px;
}

.vendor-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.vendor-logo a {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}


.vendor-nav-main {
    display: flex;
    align-items: center;
    gap: 30px; /* Creates space between the main nav and the actions */
}
/* --- Core Mobile-First Fix --- */
/* By default (on mobile), the desktop navigation is hidden. */
.vendor-nav-desktop {
    display: none;
}

.vendor-nav-desktop ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.vendor-nav-desktop li a {
    display: block;
    padding: 20px 15px; /* Full height of the header */
    color: #bdc3c7;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.vendor-nav-desktop li a:hover,
.vendor-nav-desktop li a.active { /* Add an .active class for current page */
    color: #fff;
    background-color: #34495e;
}

.vendor-actions {
    display: flex;
    align-items: center;
}

.action-link {
    color: #ecf0f1;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
}

.logout-btn {
    background: none;
    border: 1px solid #c0392b;
    color: #c0392b;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background-color: #c0392b;
    color: #fff;
}

/* Hamburger Menu Icon (Visible on mobile) */
.vendor-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Ensure it's above other header content */
    flex-shrink:0;
}

.vendor-hamburger span {
    width: 30px;
    height: 3px;
    background: #ecf0f1;
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

/* Hamburger "open" state animation */
.vendor-hamburger.open span:nth-child(1) {
    transform: rotate(45deg);
}
.vendor-hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}
.vendor-hamburger.open span:nth-child(3) {
    transform: rotate(-45deg);
}


/* Mobile Navigation Panel (Hidden by default) */
.vendor-mobile-nav {
    position: fixed;
    top: 60px;
    right: -100%; /* --- This rule hides it off-screen --- */
    width: 280px; /* A fixed width is often better for side panels */
    max-width: 80%;
    height: calc(100% - 60px);
    background: #fff;
    z-index: 999;
    transition: right 0.3s ease-in-out;
    padding: 20px;
    overflow-y: auto;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

/* This class, added by JS, makes the panel slide in */
.vendor-mobile-nav.open {
    right: 0;
}

.vendor-mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vendor-mobile-nav li a, .vendor-mobile-nav .logout-btn {
    display: block;
    padding: 15px 0;
    color: #34495e;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    border-bottom: 1px solid #ecf0f1;
}

.vendor-mobile-nav .logout-btn {
    width: 100%;
    text-align: left;
    color: #c0392b;
    border: none;
    background: none;
    padding: 15px 0;
}

/* Desktop Styles - Media Query */
@media (min-width: 992px) {
    .vendor-hamburger {
        display: none; /* Hide hamburger on desktop */
    }
    .vendor-nav-desktop {
        display: flex; /* Show desktop nav items */
        align-items: center;
    }
}
/* Basic body setup to accommodate a fixed header */
body.vendor-page {
    padding-top: 50px; /* Height of the vendor header */
}











body.vendor-page, .vendor-dashboard-container { /* You might need to add vendor-page class to your <body> in vendor_base.html */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f6f9; /* A slightly cooler, more professional background grey */
}

.vendor-dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Dashboard Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 1rem;
    margin-bottom: 2rem;
}

.dashboard-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a252f;
    margin: 0;
}

.dashboard-header .header-subtitle {
    font-size: 1rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Primary Button Style */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}
.btn-primary {
    background-color: #007bff;
    color: #fff;
}
.btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}


/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
}

.stat-card .stat-icon {
    font-size: 1.8rem;
    color: #007bff;
    margin-right: 1.25rem;
    background-color: #e7f3ff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stat-card .stat-info {
    line-height: 1.2;
}

.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    display: block;
}

.stat-card .stat-label {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Special styling for the "Add New" card */
.add-new-card {
    padding: 0; /* Remove padding to let the link fill it */
}

.add-new-card .add-new-link {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border: 2px dashed #ced4da;
    border-radius: 8px;
    color: #6c757d;
    transition: all 0.2s ease;
}

.add-new-card .add-new-link:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
    color: #0056b3;
}

.add-new-card .add-new-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
}

.add-new-card .add-new-text strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
}
.add-new-card .add-new-text span {
    font-size: 0.9rem;
}


/* Main Dashboard Sections */
.dashboard-section {
    margin-bottom: 2.5rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
}

.section-header a {
    text-decoration: none;
    color: #007bff;
    font-weight: 500;
}

/* Grid for product cards */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* Empty State Styling */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: #fff;
    border: 2px dashed #e9ecef;
    border-radius: 8px;
}
.empty-state .empty-icon {
    font-size: 3rem;
    color: #ced4da;
    margin-bottom: 1rem;
}
.empty-state h3 {
    font-size: 1.5rem;
    color: #495057;
}
.empty-state p {
    color: #6c757d;
    max-width: 450px;
    margin: 0 auto 1.5rem auto;
}

/* Vendor Notice Styling */
.vendor-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.vendor-notice .alert {
    margin: 0;
    border-radius: 0;
    text-align: center;
    border: none;
    border-top: 1px solid #b8daff;
}
.vendor-notice .alert-info {
    background-color: #cce5ff;
    color: #004085;
}
.vendor-notice .alert-link {
    font-weight: bold;
    color: #004085;
}






/* --- VENDOR INVENTORY PAGE - FULL REDESIGN --- */

/* Overall Page Container */
.vendor-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Page Header */
.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.page-header .header-subtitle {
    font-size: 1rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.breadcrumb {
    padding: 0;
    margin-bottom: 1rem;
    background: none;
    font-size: 0.9rem;
}
.breadcrumb a {
    color: #007bff;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb .active {
    color: #6c757d;
}

/* Filter Card */
.filter-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid #e9ecef;
}

.inventory-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    align-items: end;
}

.filter-item label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #495057;
}

.filter-item label i {
    margin-right: 0.5em;
    color: #adb5bd;
}

.filter-item select,
.filter-item input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-item select:focus,
.filter-item input[type="text"]:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.search-input-group {
    display: flex;
}
.search-input-group input {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.search-input-group .btn-search {
    border: 1px solid #ced4da;
    background-color: #f8f9fa;
    padding: 0 0.75rem;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    cursor: pointer;
    color: #495057;
}
.search-input-group .btn-search:hover {
    background-color: #e2e6ea;
}

/* --- Responsive Inventory List --- */

/* Mobile-First Card Layout */
.responsive-inventory-list {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
}
.inventory-header { display: none; } /* Hide desktop header on mobile */

.inventory-item {
    background-color: #fff;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}
.inventory-item:last-child {
    border-bottom: none;
}

.item-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}
.item-cell::before {
    content: attr(data-label);
    font-weight: 600;
    color: #495057;
}

.item-cell.product-info {
    font-size: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed #e9ecef;
}
.item-cell.product-info::before { display: none; }
.item-thumbnail {
    width: 50px; height: 50px;
    object-fit: cover; border-radius: 6px; margin-right: 1rem;
}
.info-text strong { display: block; }
.info-text small { color: #6c757d; }

.status-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    margin-left: 0.25rem;
}
.status-badge.status-active { background-color: #d4edda; color: #155724; }
.status-badge.status-inactive { background-color: #f8d7da; color: #721c24; }
.status-badge.stock-status-in-stock { background-color: #d1ecf1; color: #0c5460; }
.status-badge.stock-status-low-stock { background-color: #fff3cd; color: #856404; }
.status-badge.stock-status-out-of-stock { background-color: #e2e3e5; color: #383d41; }

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ced4da;
    border-radius: 50%;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-action:hover {
    background-color: #e9ecef;
    color: #0056b3;
}
.btn-action i {
    font-size: 0.9rem;
}

/* Desktop Table Layout */
@media (min-width: 992px) {
    .responsive-inventory-list {
        border: 1px solid #e9ecef;
    }
    .inventory-header {
        display: block;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }
    .inventory-header .inventory-item {
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #495057;
        letter-spacing: 0.5px;
    }
    .inventory-item {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr 1.5fr 1.5fr 1.5fr;
        gap: 1rem;
        padding: 0.75rem 1rem;
        margin-bottom: 0;
        border-radius: 0;
    }
    .inventory-body .inventory-item:hover {
        background-color: #f8f9fa;
    }
    .item-cell {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        border: none;
    }
    .item-cell::before { display: none; }
    .item-cell.status { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .item-cell.actions { justify-content: center; }
}

/* Pagination Styling */
.pagination-container {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
.pagination {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.page-item .page-link {
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}
.page-item:first-child .page-link {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.page-item:last-child .page-link {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.page-item .page-link:hover {
    background-color: #e9ecef;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    cursor: default;
}





/* --- VENDOR BROWSE CATALOG PAGE STYLES --- */

/* Main layout grid */
.browse-layout-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 2rem;
}

/* On larger screens, switch to two columns */
@media (min-width: 992px) {
    .browse-layout-grid {
        /* 1fr for the product list, max 350px for the category browser */
        grid-template-columns: minmax(0, 350px) 1fr;
    }
}

/* Styling for the category browser card on the left */
.category-browser-card {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden; /* Important for the rounded corners on the inner component */
}

/* Styling for the product listing card on the right */
.product-listing-card {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    min-height: 400px; /* Give it some default height */
    display: flex;
    flex-direction: column;
}

.product-list-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.product-list-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.product-list-content {
    padding: 1.5rem;
    flex-grow: 1;
    position: relative; /* For positioning the loader */
}

/* Initial state prompt */
.initial-prompt {
    text-align: center;
    color: #6c757d;
    padding: 3rem 1rem;
}

.initial-prompt i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #ced4da;
}

/* Loading spinner */
.loader-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex; /* Use flex to center the loader */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #495057;
    font-weight: 500;
}

.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #007bff; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styling for the dynamically loaded product list partial */
/* (This assumes your partial uses these classes) */
#product-list-container .list-group {
    border: none;
}
#product-list-container .list-group-item {
    border-left: none;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
}
#product-list-container .list-group-item:first-child {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#product-list-container .list-group-item:last-child {
    border-bottom: none;
}
#product-list-container .list-group-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 1rem;
}


/* --- VENDOR BROWSE - PRODUCT WITH VARIANTS STYLES (RESPONSIVE) --- */

.product-variant-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; 
}

.product-entry-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    /* We don't need margin-bottom if the parent .product-variant-list is using gap */
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* --- Mobile-First Header Layout --- */
.product-entry-header {
    display: flex;
    flex-direction: column; /* Stack elements vertically on mobile */
    align-items: flex-start;  /* Align to the left */
    gap: 0.5rem; /* Space between title/brand and the button */
    padding: 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.product-entry-header h3 {
    margin: 0;
    font-size: 1.1rem; /* Slightly smaller for mobile */
    font-weight: 600;
}

.product-entry-header .brand-name {
    font-size: 0.9rem;
    color: #6c757d;
}

.product-entry-header .product-header-actions {
    width: 100%; /* Make the button container take full width */
}

.product-entry-header .btn {
    width: 100%; /* Make the button itself full-width on mobile */
    text-align: center;
}

/* --- Mobile-First Variant Item Layout --- */
.variant-options-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.variant-option-item {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    align-items: center;
    gap: 0.5rem 1rem; /* 0.5rem vertical gap, 1rem horizontal */
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.variant-options-list .variant-option-item:last-child {
    border-bottom: none;
}

.variant-swatch-image {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    flex-shrink: 0; /* Prevent image from shrinking */
}

.variant-name {
    font-weight: 500;
    color: #343a40;
    flex-grow: 1; /* Allow name to take available space */
}

/* We don't need margin-left: auto on mobile because the button will wrap */
.variant-option-item .ms-auto {
    margin-left: 0;
    width: 100%; /* Make the add button full-width on a new line */
}

.btn-success {
    background-color: #28a745;
    color: #fff;
    border: none;
    text-align: center;
    display: block; /* Ensure it takes full width */
}
.btn-success:hover {
    background-color: #218838;
}
.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}
.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #fff;
}

.no-variants {
    justify-content: center;
    color: #6c757d;
    font-style: italic;
    padding: 1rem;
}


.variant-option-item .variant-info {
    /* This will hold the variant name and price */
    display: flex;
    flex-direction: column; /* Stack name and price vertically */
    justify-content: center;
}

.variant-option-item .variant-name {
    font-weight: 500;
    color: #343a40;
}

.variant-option-item .variant-price {
    font-size: 0.9em;
    font-weight: 600; /* Make the price bold */
    color: #007bff; /* Use a distinct color like your primary theme color */
}

/* Optional: A bit more spacing between the image and the info */
.variant-option-item .variant-swatch-image {
    margin-right: 10px;
}

/* --- DESKTOP OVERRIDES (using a media query) --- */
@media (min-width: 768px) {
    /* Restore the side-by-side header layout */
    .product-entry-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
    }
    .product-entry-header h3 {
        font-size: 1.25rem;
    }
    .product-entry-header .product-header-actions,
    .product-entry-header .btn {
        width: auto; /* Revert to auto-width on desktop */
    }

    /* Restore the side-by-side variant item layout */
    .variant-option-item {
        flex-wrap: nowrap; /* Prevent wrapping on desktop */
        padding: 1rem 1.5rem;
    }
    .variant-swatch-image {
        width: 50px;
        height: 50px;
    }
    /* This pushes the button to the far right on desktop */
    .variant-option-item .ms-auto {
        margin-left: auto;
        width: auto; /* Revert to auto-width on desktop */
    }
}


/* Style for variant rows that are already stocked */
.variant-option-item.stocked {
    background-color: #f8f9fa; /* A subtle grey to differentiate */
    opacity: 0.8;
}

.variant-option-item.stocked .variant-name {
    color: #6c757d;
}

/* General badge styling */
.badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    margin-right: 0.5rem;
}

.bg-secondary {
    background-color: #6c757d;
}

.badge i {
    margin-right: 0.3em;
}

/* Specific button style for managing existing variants */
.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #ced4da;
}
.btn-light:hover {
    background-color: #e2e6ea;
}




/* --- VENDOR ADD INVENTORY PAGE STYLES --- */

/* Main layout grid */
.add-inventory-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 2rem;
}

/* Switch to two columns on larger screens */
@media (min-width: 992px) {
    .add-inventory-grid {
        grid-template-columns: 2fr 1fr; /* Form takes up 2/3, list takes up 1/3 */
    }
}

/* Card Styling for both form and inventory list */
.form-card-header {
    display: flex;
    align-items: flex-start; /* Align to the top */
    gap: 1rem; /* Space between icon and text */
    padding: 1.25rem 1.5rem;

}

.form-card-header i {
    font-size: 1.25rem;
    color: #007bff;
    margin-top: 0.25rem; /* Align icon nicely with text */
}

.form-card-header h3 {
    margin: 0;
    line-height: 1.2;
}


.form-card,
.inventory-list-card {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.form-card-header,
.inventory-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.form-card-header h3,
.inventory-card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.form-card-header i,
.inventory-card-header i {
    color: #007bff;
}

.form-card-body,
.inventory-card-body {
    padding: 1.5rem;
}
.form-card-body > p {
    font-size: 0.95rem;
    color: #6c757d;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Form specific styling */
.inventory-add-form .form-group {
    margin-bottom: 1.25rem;
}
.inventory-add-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.inventory-add-form .form-select,
.inventory-add-form input[type="text"],
.inventory-add-form input[type="number"] {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
}
.inventory-add-form .invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}
.form-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

/* Current Inventory List Styling */
.inventory-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.inventory-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: background-color 0.2s;
}

/* Highlight the variant being edited */
.inventory-item-row.current-variant {
    background-color: #e7f3ff;
    border-color: #b8daff;
}

.inventory-item-row .item-details {
    line-height: 1.4;
}
.inventory-item-row .item-details strong {
    display: block;
}
.inventory-item-row .item-sku {
    font-size: 0.8rem;
    color: #6c757d;
}

.inventory-item-row .item-stock {
    text-align: right;
    flex-shrink: 0;
    margin-left: 1rem;
}
.inventory-item-row .item-stock span {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}
.inventory-item-row .item-stock small {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
}

.empty-inventory-prompt {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
}



nav[aria-label="breadcrumb"] {
    margin-bottom: 1.5rem; /* Space below the breadcrumb */
    font-size: 0.9rem;
}

/* The <ol> list itself */
nav[aria-label="breadcrumb"] .breadcrumb {
    display: flex; /* This is the key: lay out list items horizontally */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    padding: 0; /* Remove default list padding */
    margin: 0;
    list-style: none; /* Remove the numbers or bullet points */
}

/* Each <li> list item */
nav[aria-label="breadcrumb"] .breadcrumb-item {
    display: flex; /* Align the separator with the link */
    align-items: center;
}

/* The links <a> inside the list items */
nav[aria-label="breadcrumb"] .breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease;
}

nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* The separator ">" that comes after each link */
nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
    content: "›"; /* Use the › character for a nicer arrow */
    padding: 0 0.75rem; /* Space around the separator */
    color: #6c757d;
}

/* The final, non-link item */
nav[aria-label="breadcrumb"] .breadcrumb-item.active {
    color: #495057;
    font-weight: 500;
}


/* NEW: Style for the variant context text */
.variant-context-text {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: #6c757d;
}
.variant-context-text strong {
    color: #212529;
    font-weight: 600;
}



/* --- VENDOR ORDER LIST STYLES --- */
.card-table-container {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}

.responsive-table {
    width: 100%;
}

.table-header {
    display: none; /* Hidden on mobile */
    background-color: #f8f9fa;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #495057;
    letter-spacing: 0.5px;
}

.table-row {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.table-row:last-child {
    border-bottom: none;
}

.table-body .table-row:hover {
    background-color: #f8f9fa;
}

.table-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    text-align: right;
}

.table-cell::before {
    content: attr(data-label);
    font-weight: 600;
    padding-right: 1rem;
    text-align: left;
}

.table-cell a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

.table-cell .product-col {
    text-align: left;
}
.table-cell .product-col strong {
    display: block;
}

/* Status badges for orders */
.status-badge.status-order-1 { background-color: #ffc107; color: #333; } /* Submitted */
.status-badge.status-order-2 { background-color: #17a2b8; color: #fff; } /* Processing */
.status-badge.status-order-3 { background-color: #007bff; color: #fff; } /* Dispatched */
.status-badge.status-order-4 { background-color: #28a745; color: #fff; } /* Delivered */
.status-badge.status-order-5 { background-color: #e2e3e5; color: #383d41; } /* Completed */
.status-badge.status-order-6 { background-color: #dc3545; color: #fff; } /* Cancelled */


/* Desktop view */
@media (min-width: 992px) {
    .table-header, .table-row {
        display: grid;
        /* Adjust columns based on whether the customer column is shown */
        /* This is a placeholder; you'll adjust it based on the `if` in the template */
        grid-template-columns: 1fr 1fr 1.5fr 2.5fr 0.5fr 1fr 1fr 1fr;
        padding: 0.75rem 1rem;
    }

    .table-cell {
        display: flex;
        justify-content: flex-start;
        text-align: left;
    }

    .table-cell::before {
        display: none;
    }
}

/* 
Self-correction: The grid layout for desktop is tricky because one column 
is conditional. A simpler approach is to use flex properties or set the grid 
template columns via an inline style in the template if needed. The provided 
CSS will work but may need column width adjustments.
 */



/* --- VENDOR ORDER DETAIL PAGE STYLES --- */

.order-detail-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 2rem;
}

@media (min-width: 992px) {
    .order-detail-grid {
        grid-template-columns: 2fr 1fr; /* Items list is wider */
    }
}

.card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header {
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}
.card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}
.card-body {
    padding: 1.5rem;
}

/* Items List Styling */
.order-item-detail-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.order-item-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.order-item-detail-row:first-child {
    padding-top: 0;
}

.order-item-detail-row .item-info {
    flex-grow: 1;
    line-height: 1.4;
}

.order-item-detail-row .item-status {
    flex-shrink: 0;
    text-align: right;
}

.order-item-detail-row .item-status .form-select-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* Customer/Shipping Info Styling */
.info-group {
    margin-bottom: 1.5rem;
}
.info-group:last-child {
    margin-bottom: 0;
}
.info-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.info-group p, .info-group address {
    margin: 0;
    font-style: normal;
}

.redacted-info {
    text-align: center;
    padding: 2rem 1rem;
    background-color: #f8f9fa;
    border-radius: 6px;
}
.redacted-info i {
    font-size: 2.5rem;
    color: #ced4da;
    margin-bottom: 1rem;
}
.redacted-info h4 {
    font-size: 1.2rem;
    color: #495057;
}
.redacted-info p {
    color: #6c757d;
    font-size: 0.9rem;
    max-width: 300px;
    margin: 0.5rem auto 0 auto;
}


/* Add margin to the bottom of the new card */
.card.mb-4 {
    margin-bottom: 2rem;
}

/* Style the horizontal rule inside the card */
.card-body hr {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border: 0;
    border-top: 1px solid #e9ecef;
}

/* Add an icon to the card headers */
.card-header h3 i {
    margin-right: 0.75rem;
    color: #adb5bd; /* A subtle color for the icon */
    font-size: 1rem;
}

/* Add styles for the new payment status badges */
.status-badge.payment-status-pending {
    background-color: #fff3cd; /* Yellow */
    color: #856404;
}
.status-badge.payment-status-completed {
    background-color: #d4edda; /* Green */
    color: #155724;
}
.status-badge.payment-status-failed {
    background-color: #f8d7da; /* Red */
    color: #721c24;
}
.status-badge.payment-status-refunded {
    background-color: #e2e3e5; /* Grey */
    color: #383d41;
}





  
/*VENDOR PANELS*/
/* --- CASCADING CATEGORY MENU STYLES (FINAL, SIMPLIFIED) --- */

.cascading-nav-container {
    position: relative;
    width: 100%;
    background-color: #fff;
    overflow: hidden; /* This is crucial for the slide animation */
}

/* Panel Wrapper and Animation Control */
.cascading-nav-panels-wrapper {
    position: relative;
    display: flex;
    transition: transform 0.3s ease-in-out;
}

/* Individual Panel Styling */
.cascading-nav-panel {
    width: 100%;
    background-color: #fff;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* NEW Panel Header Styling */
.panel-header {
    display: flex;
    align-items: center;
    padding: 0 10px; /* Adjust padding */
    border-bottom: 1px dotted var(--border-color, #d1d1d1);
    min-height: 48px;
    box-sizing: border-box;
    
}

.nav-panel-back {
    background: none;
    border: none;
    padding: 10px;
    margin-right: 10px;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%; /* Make the hover effect a circle */
    transition: background-color 0.2s ease;
}

.nav-panel-back:hover {
    background-color: #e9e9e9; /* A subtle background on hover */
}

.nav-panel-back svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-dark);
    stroke-width: 2;
    display:block;
}

.panel-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-dark);
}

/* The rest of the list and item styles are the same */
.panel-list-container {
    max-height: calc(100vh - 200px); 
    overflow-y: auto;
}
.panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-category-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}
.nav-category-item:last-child {
    border-bottom: none;
}
.nav-category-item .nav-category-link,
.nav-category-item .nav-category-label {
    flex-grow: 1;
    padding: 14px 15px;
    text-decoration: none;
    color: var(--text-dark);
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
}
.nav-category-item .nav-category-link:hover {
    background-color: #f8f9fa;
}
.nav-panel-trigger {
    padding: 14px 15px;
    color: #b0b0b0;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0; 
    transition: color 0.2s ease;
}

.nav-panel-trigger:hover {
    color: var(--primary-color);
}

.nav-panel-trigger svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    display: block;
}





/* --- VENDOR FULFILLMENT STATUS CARD STYLES --- */

.fulfillment-card {
    border-left-width: 5px; /* Creates a colored accent bar */
    transition: all 0.2s ease-in-out;
}

.fulfillment-card .card-body {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
}

.fulfillment-card .fulfillment-icon {
    font-size: 2rem;
    margin-right: 1.25rem;
}

.fulfillment-card .fulfillment-info strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
}

.fulfillment-card .fulfillment-info p {
    margin: 0.1rem 0;
    font-size: 0.9rem;
}

.fulfillment-card .fulfillment-info small {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Status-specific colors */
.fulfillment-card.status-on_time {
    border-left-color: #28a745; /* Green */
}
.fulfillment-card.status-on_time .fulfillment-icon {
    color: #28a745;
}

.fulfillment-card.status-due_soon {
    border-left-color: #ffc107; /* Yellow */
}
.fulfillment-card.status-due_soon .fulfillment-icon {
    color: #ffc107;
}

.fulfillment-card.status-overdue {
    border-left-color: #dc3545; /* Red */
    background-color: #fbebeb;
}
.fulfillment-card.status-overdue .fulfillment-icon {
    color: #dc3545;
}

.fulfillment-card.status-resolved,
.fulfillment-card.status-na {
    border-left-color: #e2e3e5; /* Grey */
}
.fulfillment-card.status-resolved .fulfillment-icon,
.fulfillment-card.status-na .fulfillment-icon {
    color: #6c757d;
}




/* vendors/static/css/vendor.css */
.vendor-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 15px;
  }
  
  .product-card {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
  }
  
  .colour-options {
    display: flex;
    gap: 8px;
    margin: 10px 0;
  }
  

  
  .btn-manage, .btn-add {
    display: inline-block;
    padding: 8px 15px;
    margin-top: 10px;
    text-decoration: none;
    border-radius: 4px;
  }
  
  .btn-manage {
    background: #e3f2fd;
    color: #1976d2;
  }
  
  .btn-add {
    background: #e8f5e9;
    color: #388e3c;
  }





  /* vendors/static/css/vendor.css */
.variant-selection {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .colour-selection {
    margin-bottom: 30px;
  }
  
  .option-group {
    margin-bottom: 20px;
  }

  

  .option-button input:checked + span {
    background-color: #e3f2fd;
    font-weight: bold;
  }
  
  .inventory-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0;
  }
  
 
.alert {
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
}
.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}



/* Ensure color swatches are visible */
.colour-swatch {
  display: inline-block;
  padding: 8px 12px;
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f8f8;
  color: #333;
  text-decoration: none;
}

.colour-swatch.active {
  background: #007bff;
  color: white;
  border-color: #006fe6;
}

/* Style the option buttons */
.option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.option-button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.option-button input {
  margin-right: 5px;
}

/* Style the inventory table */
.existing-inventory table {
  width: 100%;
  border-collapse: collapse;
}

.existing-inventory td, .existing-inventory th {
  padding: 8px;
  border: 1px solid #ddd;
}





  .inventory-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
  }

  .inventory-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  }

  .inventory-header {
  padding: 1.5rem;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  }

  .inventory-header h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
  }

  .product-info {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
  }

  .inventory-body {
  padding: 1.5rem;
  }

  .alert {
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  }

  .alert-success {
  background: #d4edda;
  color: #155724;
  }

  .alert-error {
  background: #f8d7da;
  color: #721c24;
  }

  .inventory-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  }

  .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  }

  .form-group label {
  font-weight: 600;
  color: #333;
  }

  .form-input {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  }

  .form-input:focus {
  border-color: #80bdff;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
  }

  .checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  }

  .form-checkbox {
  width: auto;
  margin: 0;
  }

  .form-textarea {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  min-height: 100px;
  resize: vertical;
  }

  .error {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  }

  .form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  }

  .btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  }

  .btn-primary {
  background: #007bff;
  color: white;
  }

  .btn-primary:hover {
  background: #0069d9;
  }

  .btn-secondary {
  background: #6c757d;
  color: white;
  }

  .btn-secondary:hover {
  background: #5a6268;
  }

  .icon {
  font-size: 1rem;
  }

  .inventory-footer {
  padding: 1rem 1.5rem;
  background: #f8f9fa;
  border-top: 1px solid #eee;
  color: #6c757d;
  font-size: 0.875rem;
  }