/* admin_community_v 组（admin/community-badges、admin/community-slots、admin/community-slot-edit）專屬樣式。
 * 全部用 app.css 的 token；class 用 acv- 前缀。兼容 iOS Safari 14：不用 inset / flex gap / aspect-ratio / :is() / dvh / color-mix。
 */

/* ---- 工具行與搜尋 ---- */
.acv-top {
  padding: var(--sp-2) var(--gutter) 0;
}
.acv-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-2);
}
.acv-toolbar .btn {
  flex: 0 0 auto;
  width: auto;
  display: inline-flex;
}
.acv-search {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--sp-2);
}
.acv-search .input {
  width: 100%;
}

/* ---- 篩選 chips（自有樣式，不借用別組的 cap-chip / imp-chip）---- */
.acv-chips {
  display: flex;
  flex-wrap: wrap;
  padding: 0 var(--gutter);
}
.acv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin: 0 var(--sp-2) var(--sp-2) 0;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--label-2);
  border: none;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}
.acv-chip.is-selected {
  background: var(--tint);
  color: var(--on-tint);
  font-weight: 600;
}

/* ---- 列表項（徽章記錄 / 貼片卡）---- */
.acv-item {
  margin: 0 var(--gutter) var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--radius);
  background: var(--fill);
}
.acv-item__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}
.acv-item__meta {
  margin-top: 2px;
  color: var(--label-2);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}
.acv-item__tags {
  margin-top: var(--sp-1);
}
.acv-item__tags .tag {
  margin-right: var(--sp-2);
  margin-bottom: 2px;
}
.acv-item__acts {
  display: flex;
  margin-top: var(--sp-1);
  margin-right: calc(-1 * var(--sp-2));
}
.acv-item__acts .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- 貼片卡（縮圖 + 信息 + 並排動作區）---- */
.acv-slot {
  margin: 0 var(--gutter) var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--radius);
  background: var(--fill);
}
.acv-slot__main {
  display: flex;
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
}
.acv-thumb {
  flex: 0 0 auto;
  display: block;
  width: 56px;
  height: 56px;
  margin-right: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--fill-strong);
  overflow: hidden;
}
.acv-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acv-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-2);
  font-size: 12px;
}
.acv-slot__info {
  flex: 1 1 auto;
  min-width: 0;
}
.acv-slot__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.acv-slot__meta {
  display: block;
  margin-top: 2px;
  color: var(--label-2);
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}
.acv-slot__tags {
  display: block;
  margin-top: var(--sp-1);
}
.acv-slot__tags .tag {
  margin-right: var(--sp-2);
  margin-bottom: 2px;
}
.acv-slot__acts {
  display: flex;
  margin-top: var(--sp-1);
  margin-right: calc(-1 * var(--sp-2));
}
.acv-slot__acts .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- 彈層（授予 / 選會員）---- */
.acv-sheetdesc {
  margin-bottom: var(--sp-2);
  color: var(--label-2);
  font-size: 13px;
  line-height: 1.5;
}
.acv-picklist {
  max-height: 260px;
  overflow-y: auto;
  margin-top: var(--sp-2);
}
.acv-pickempty {
  padding: var(--sp-2) 0;
  color: var(--label-2);
  font-size: 13px;
  text-align: center;
}
.acv-sheeterr {
  margin-top: var(--sp-2);
  color: var(--red-ink);
  font-size: 13px;
  line-height: 1.45;
}
.acv-imgpick {
  display: flex;
  flex-wrap: wrap;
}
.acv-imgprev {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  background: var(--fill-strong);
  object-fit: cover;
}
.acv-imgempty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  background: var(--fill);
  color: var(--label-2);
  font-size: 12px;
}
.acv-imgbtns {
  display: flex;
  flex-wrap: wrap;
  margin-left: var(--sp-2);
}
.acv-imgbtns .btn {
  margin-bottom: var(--sp-1);
}

@media (prefers-reduced-motion: reduce) {
  .acv-chip,
  .acv-item,
  .acv-slot {
    transition: none;
  }
}