/* ============================
   Responsive Filters Alignment
   ============================ */

@media (min-width: 769px) {
  .seller-products-filters,
  .vendor-orders-filters {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100%;
  }

  .seller-products-filters > *,
  .vendor-orders-filters > * {
    flex: 0 0 auto !important;
  }
}



/* --- Mobile optimization --- */
@media (max-width: 768px) {
  .seller-products-filters,
  .vendor-orders-filters {
    flex-direction: column;     /* stack vertically */
    align-items: stretch;       /* full width */
  }

  .seller-products-filters select,
  .seller-products-filters button,
  .seller-products-filters a,
  .vendor-orders-filters select,
  .vendor-orders-filters button,
  .vendor-orders-filters a {
    width: 100%;
    min-width: 0;
  }

  /* Optional: center the Reset link button-style */
  .seller-products-filters a,
  .vendor-orders-filters a {
    text-align: center;
  }
}

/* ===============================
   🔧 Firefox Mobile Flexbox Fix
   =============================== */

/* 1. Ensure flex wraps inside form */
.seller-products-filters,
.vendor-orders-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

/* 2. Force Firefox to treat selects as block in flex container */
.seller-products-filters select,
.vendor-orders-filters select {
  display: block;
  flex: 1 1 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 3. On small screens: stack vertically, 100% width */
@supports (-moz-appearance: none) {  /* Only applies to Firefox */
  @media (max-width: 768px) {
    .seller-products-filters,
    .vendor-orders-filters {
      display: block !important;      /* drop flex, force normal flow */
      width: 100%;
    }
    .seller-products-filters select,
    .seller-products-filters button,
    .seller-products-filters a,
    .vendor-orders-filters select,
    .vendor-orders-filters button,
    .vendor-orders-filters a {
      display: block !important;
      width: 100% !important;
      margin-bottom: 8px;
    }
  }
}

/* ====================================
   📱 Mobile: vertical table card layout
   ==================================== */

@media (max-width: 768px) {
  /* Make both seller products table and vendor orders table responsive */
  .seller-products,
  .sx-vendor-orders-table {
    border: 0;
    width: 100%;
    border-collapse: collapse;
  }

  .seller-products thead,
  .sx-vendor-orders-table thead {
    display: none; /* hide header row on mobile */
  }

  .seller-products tr,
  .sx-vendor-orders-table tr {
    display: block;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    padding: 10px;
  }

  .seller-products td,
  .sx-vendor-orders-table td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid #f5f5f5;
  }

  .seller-products td:last-child,
  .sx-vendor-orders-table td:last-child {
    border-bottom: none;
  }

  /* Optional: labels before values using data-label */
  .seller-products td::before,
  .sx-vendor-orders-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #555;
    flex: 1;
    text-align: left;
    padding-right: 10px;
  }

  .seller-products td > *,
  .sx-vendor-orders-table td > * {
    flex: 2;
    text-align: right;
  }
}


/* =========================================
   🛠 Mobile card layout: image cell fix
   ========================================= */
@media (max-width: 768px) {
  /* 1) Don't turn the first cell into a flex row */
  .seller-products tr td:first-child,
  .sx-vendor-orders-table tr td:first-child {
    display: block;              /* not flex */
    padding: 8px 0;
  }

  /* 2) Remove the mobile label on the first cell */
  .seller-products tr td:first-child::before,
  .sx-vendor-orders-table tr td:first-child::before {
    content: none !important;
  }

  /* 3) Make the thumbnail a true square (no flex growth) */
  .seller-products tr td:first-child img,
  .sx-vendor-orders-table tr td:first-child img {
    display: block;
    width: 56px !important;
    height: 56px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    margin: 0;                   /* align to left of card */
    max-width: none !important;  /* ignore theme img rules */
    max-height: none !important;
    flex: 0 0 auto !important;   /* just in case */
  }

  /* 4) Ensure other cells don't try to flex the image */
  .seller-products td > img,
  .sx-vendor-orders-table td > img {
    flex: 0 0 auto !important;
  }
}

  /* Center the thumbnail itself */
  .seller-products tr td:first-child img,
  .sx-vendor-orders-table tr td:first-child img {
    display: block;
    margin: 0 auto;             /* centers horizontally */
    width: 56px !important;
    height: 56px !important;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

 /* Hide product type filter (auction-only for now) */
.seller-products-filters select[name="product_type"] {
  display: none;
}

/* Mobile: prevent status & action buttons from stretching full width */
@media (max-width: 768px) {

  /* Status badge */
  .sx-vendor-orders-table td .order-status,
  .sx-vendor-orders-table td .status,
  .sx-vendor-orders-table td .wc-order-status {
    display: inline-block !important;
    width: auto !important;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Action button */
  .sx-vendor-orders-table td .button,
  .sx-vendor-orders-table td a.button {
    display: inline-block !important;
    width: auto !important;
    padding: 6px 14px;
    white-space: nowrap;
  }

  /* Stop flex-grow inside mobile cards */
  .sx-vendor-orders-table td > * {
    flex: 0 0 auto !important;
  }
}

/* =========================================
   Mirror Orders status style → Products
   ========================================= */

/* Make auction status behave exactly like order status */
.seller-products .auction-status {
  all: unset; /* reset previous product styles */
  display: inline-block;
}

/* Inherit Orders badge styling */
.seller-products .auction-status {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* Reuse Orders colors by status name */
.seller-products .auction-status.cancelled,
.seller-products .auction-status.fail {
  background: #ff4d3a;
  color: #fff;
}

.seller-products .auction-status.processing,
.seller-products .auction-status.live {
  background: #1e90ff;
  color: #fff;
}

.seller-products .auction-status.completed,
.seller-products .auction-status.paid {
  background: #2ecc71;
  color: #fff;
}

.seller-products .auction-status.sold {
  background: #7e3ff2;
  color: #fff;
}

.seller-products .auction-status.ended {
  background: #e5e5e5;
  color: #555;
}

/* ======================================
   Products → Action "View" pill (fixed)
   ====================================== */

@media (max-width: 768px) {

  /* Stop flex stretching inside action cell */
  .seller-products td[data-label="Actions"] {
    justify-content: flex-start !important;
  }

  .seller-products td[data-label="Actions"] > * {
    flex: 0 0 auto !important;
  }
}

/* View button pill */
.seller-products td[data-label="Actions"] a {
  display: inline-flex !important;   /* key fix */
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 6px 14px;
  border-radius: 8px;
  background: #9335B6;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.auction-status.live\ \(pending\) {
    opacity: 0.75;
    border-style: dashed;
}

/* Seller Products → Auction Status (Mobile) — FINAL FIX */
@media (max-width: 768px) {

  /* Wrap status value as a single flex item */
  .seller-products td[data-label="Auction Status"] {
    justify-content: space-between;
  }

  /* Stop flex-grow on inner elements */
  .seller-products td[data-label="Auction Status"] .auction-status,
  .seller-products td[data-label="Auction Status"] .auction-pending-text {
    flex: none !important;
    text-align: right;
    white-space: nowrap;
  }

  /* Tight spacing between Live and (Pending) */
  .seller-products td[data-label="Auction Status"] .auction-pending-text {
    margin-left: 4px;
  }
}