/* Dashboard layout: the owner's store page and the admin review page. */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.muted {
  color: var(--muted);
}

.empty {
  color: var(--muted);
}

/* Bump form on the owner dashboard: message input + submit button. */
.bump-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.bump-form input[type="text"] {
  flex: 1 1 14rem;
  max-width: 24rem;
}

.link-danger {
  color: var(--red);
  font-weight: 600;
}

.link-danger:hover {
  color: var(--red-dark);
}

/* Status badge: a friendly tinted pill, not a chunky plate. */
.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge--active {
  color: var(--green-dark);
  background: var(--green-soft);
  border-color: #b9e0cf;
}

.badge--suspended {
  color: #7a4a02;
  background: var(--amber-soft);
  border-color: #f0d79a;
}

.badge--reactivation_pending {
  color: var(--blue-dark);
  background: var(--blue-soft);
  border-color: #c3d9f4;
}

.badge--blocked {
  color: #4b463f;
  background: #eceae4;
  border-color: #dcd8cd;
}

.badge--open {
  color: var(--red-dark);
  background: var(--red-soft);
  border-color: #f0c6c6;
}

.badge--resolved {
  color: #5a544c;
  background: #eceae4;
  border-color: #dcd8cd;
}

/* Buttons. Only the primary CTA keeps the retro hard shadow; status actions
   stay flat and coloured so the page does not turn into a wall of shadows. */
.btn--primary {
  color: #ffffff;
  background: var(--accent);
  border: var(--border-retro);
  box-shadow: 2px 2px 0 var(--ink);
  font-weight: 700;
}

.btn--primary:hover {
  color: #ffffff;
  background: var(--accent-dark);
  box-shadow: 2px 2px 0 var(--ink);
}

.btn--primary:active {
  color: #ffffff;
  background: var(--accent-dark);
  transform: translate(2px, 2px);
  box-shadow: none;
}

.btn--approve,
.btn--reject,
.btn--danger {
  font-weight: 600;
  border-color: transparent;
}

.btn--approve,
.btn--danger {
  color: #ffffff;
}

.btn--approve {
  background: var(--green);
}

.btn--approve:hover {
  color: #ffffff;
  background: var(--green-dark);
}

.btn--reject {
  color: #3a2b06;
  background: var(--amber);
}

.btn--reject:hover {
  color: #3a2b06;
  background: #e0a91f;
}

.btn--danger {
  background: var(--red);
}

.btn--danger:hover {
  color: #ffffff;
  background: var(--red-dark);
}

/* Cards */
.card {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

.card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.75rem;
}

.card__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Collapsible category heading. Reuses the public store-detail toggle
   classes, but inside the card header it sizes to its content instead of
   stretching across the row. */
.card__header .menu-section__toggle {
  width: auto;
}

/* Centre the title against the row actions instead of aligning baselines,
   and stick the header below the site nav while the items scroll by. The
   trailing space is padding (not margin) so the opaque background covers
   the items sliding underneath. */
.card:has(.menu-section__toggle) .card__header {
  align-items: center;
  position: sticky;
  top: var(--nav-h, 3.15rem);
  z-index: 5;
  margin-bottom: 0;
  padding-bottom: 0.75rem;
  background: var(--surface);
}

/* Collapsed: drop the trailing padding so the title stays vertically centred
   inside the card. */
.card.is-collapsed .card__header {
  padding-bottom: 0;
}

/* Category menu list. Mobile-first: each row is a two-column grid so the
   price hugs the right edge while the name stays on the left. The status and
   actions sit on the second line, actions right-aligned. */
.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.item-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.125rem 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}

.item-list__item:first-child {
  border-top: none;
}

.item-list__name {
  grid-column: 1;
  font-weight: 600;
}

.item-list__price {
  grid-column: 2;
  justify-self: end;
  text-align: right;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
}

.item-list__status {
  grid-column: 1;
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 600;
}

.item-list__actions {
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* On wider screens the row collapses back to a single flex line with the
   actions pushed to the far right. */
@media (min-width: 48rem) {
  .item-list__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }

  .item-list__name,
  .item-list__price,
  .item-list__status,
  .item-list__actions {
    grid-column: auto;
    justify-self: auto;
  }

  .item-list__price {
    text-align: left;
  }

  .item-list__actions {
    margin-left: auto;
  }
}

/* Admin moderation actions */
.review-card__actions {
  display: grid;
  gap: 0.5rem;
}

.review-card__actions form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.review-card__actions input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

@media (min-width: 48rem) {
  .review-card__actions {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Moderation panel on the per-store report page */
.moderation-actions {
  display: grid;
  gap: 0.5rem;
}

.moderation-actions form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.moderation-actions input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

@media (min-width: 48rem) {
  .moderation-actions {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: start;
  }
}

/* Admin table */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--line);
}

.table th {
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--surface-2);
}

.table--reports td {
  vertical-align: top;
}

.table__wrap {
  word-break: break-word;
}

.table__nowrap {
  white-space: nowrap;
}

.table .text-right {
  text-align: right;
}

.table tfoot th,
.table tfoot td {
  color: var(--ink);
  background: var(--surface-2);
  border-top: 1px solid var(--line-strong);
  border-bottom: none;
}