/* =========================================================
   DASHBOARD / "MY LISTINGS" COMPONENT — scoped rewrite
   -----------------------------------------------------------
   This replaces BOTH of the old blocks in list.css:
     1) the original ".layout / .sidebar / .card / .tags / .tab /
        .col / .status / .dots" block (near the top of the file)
     2) the later ".dashboard-card / .product-row / .col-product /
        .status / .dots-menu" block (under "DESKTOP DESIGN")
   Those two blocks re-used the exact same class names for two
   different versions of this component — and ".card", ".status",
   ".col", ".main", ".layout", ".sidebar", ".tabs", ".tab" are all
   generic enough to also collide with Bootstrap and other pages
   (e.g. every Bootstrap ".card" in sell.php was being overridden
   by the old flex ".card" rule here).

   RENAME MAP (update the HTML for this page to match):
     .layout        -> .dash-layout
     .sidebar       -> .dash-sidebar
     .main          -> .dash-main
     .main-header   -> .dash-main-header
     .primary-btn   -> .dash-primary-btn
     .tags          -> .dash-tags
     .tag           -> .dash-tag
     .tabs          -> .dash-tabs
     .tab           -> .dash-tab
     .search-box    -> .dash-search-box
     .dashboard-card-> .dash-card            (the outer white panel)
     .product-row   -> .dash-row             (one listing row)
     .product-image -> .dash-row-image
     .col-product   -> .dash-col-product
     .col           -> .dash-col
     .product-title -> .dash-row-title
     .status        -> .dash-status
     .pending       -> .dash-pending
     .dots-menu     -> .dash-dots-menu
   ========================================================= */

.dash-card {
  width: 100%;
  max-width: 1120px;
  background: #ffffff;
  padding: 24px 28px;
}

.dash-layout {
  display: flex;
  gap: 32px;
}

.dash-sidebar {
  width: 260px;
  flex-shrink: 0;
}

.dash-main {
  flex: 1;
}

.dash-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-primary-btn {
  background: #7323a8;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}
.dash-primary-btn:hover {
  background: #5e1d8a;
}

.dash-tags {
  margin: 20px 0 25px;
}
.dash-tag {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #7323a8;
  color: #7323a8;
  border-radius: 20px;
  font-size: 14px;
  margin-right: 10px;
}

.dash-tabs {
  display: flex;
  gap: 40px;
}
.dash-tab {
  font-size: 18px;
  cursor: pointer;
  padding-bottom: 8px;
}
.dash-tab.active {
  color: #7323a8;
  border-bottom: 3px solid #7323a8;
}

.dash-search-box input {
  padding: 10px 18px;
  border-radius: 25px;
  border: 1px solid #ccc;
  width: 220px;
}

/* One listing row */
.dash-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #edeff2;
}
.dash-row:last-of-type {
  border-bottom: none;
}

.dash-row-image {
  width: 80px;
  height: 80px;
  background-color: #e7e9ed;
  border-radius: 14px;
  background-image: url("https://via.placeholder.com/80/e7e9ed/8a8f99?text=img");
  background-size: cover;
  background-position: center;
}

.dash-col-product {
  flex: 2.2;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-col {
  flex: 1;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-row-title {
  font-size: 16px;
  font-weight: 600;
  color: #121926;
}

.dash-status {
  display: inline-block;
  background: linear-gradient(0deg, #f0f2f6, #ffffff);
  color: #2c3e5c;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 40px;
  min-width: 80px;
  text-align: center;
  border: 1px solid #e0e4ea;
}
.dash-pending {
  color: brown;
}

.dash-dots-menu {
  font-size: 22px;
  color: #7a8699;
  width: 28px;
  text-align: right;
  transform: translateY(-6px);
}

/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {

  .dash-layout {
    flex-direction: column;
  }
  .dash-sidebar,
  .dash-main {
    width: 100%;
  }
  .dash-card {
    padding: 18px;
  }

  .dash-main-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .dash-primary-btn {
    width: 100%;
  }

  .dash-tabs {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    white-space: nowrap;
    padding-bottom: 8px;
  }
  .dash-tabs::-webkit-scrollbar {
    display: none;
  }

  .dash-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    margin-bottom: 14px;
  }
  .dash-row-image {
    width: 100%;
    height: 180px;
    border-radius: 16px;
  }

  .dash-col-product,
  .dash-col {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .dash-col-product span:first-child,
  .dash-col span:first-child {
    font-size: 13px;
    color: #7a8699;
  }
  .dash-col-product span:last-child,
  .dash-col span:last-child {
    text-align: right;
    font-weight: 600;
  }

  .dash-dots-menu {
    align-self: flex-end;
    transform: none;
  }

  .dash-tags {
    flex-wrap: wrap;
    gap: 8px;
  }

  .dash-search-box input {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .dash-row-image {
    height: 150px;
  }
  .dash-row-title {
    font-size: 14px;
  }
  .dash-status {
    font-size: 12px;
    padding: 5px 10px;
  }
}