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

.seller-products-filters,
.vendor-orders-filters {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;              /* allow wrapping */
  justify-content: flex-start;  /* align left on desktop */
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.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: inline-block;
  min-width: 140px;
  padding: 6px 8px;
  font-size: 14px;
  flex: 1 1 auto;               /* flexible width */
}

/* --- 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;
  }