/* ==========================================================================
   硅基办公 · 网站导航（常用网站收藏）样式
   类名统一 sites- 前缀，避免和既有页面冲突；数据来自 assets/js/sites.js
   ========================================================================== */

.sites-view { padding: 0; display: flex; flex-direction: column; min-height: 0; }

/* ---------- 工具条：搜索 + 排序 ---------- */

.sites-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex: none;
}
.sites-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--wb-glass);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .1);
}
.sites-search .wb-icon { width: 15px; height: 15px; color: var(--wb-ink-45); flex: none; }
.sites-search .wb-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 12.5px;
}
.sites-search .wb-input:focus { background: none; border: 0; }
.sites-seg { flex: none; }

/* ---------- 分类筛选 ---------- */

.sites-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex: none;
}
.sites-cats { flex: 1; min-width: 0; gap: 6px; }
.sites-cats .wb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  background: rgba(var(--wb-ink-rgb), .09);
}
.sites-cats .wb-chip:hover { background: rgba(var(--wb-ink-rgb), .18); }
.sites-cats .wb-chip.is-on {
  background: rgba(var(--wb-ink-rgb), .92);
  color: #16241f;
  font-weight: 600;
}
.sites-cats .wb-chip em {
  font-style: normal;
  font-size: 12.5px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(var(--wb-ink-rgb), .16);
  color: var(--wb-ink-60);
}
.sites-cats .wb-chip.is-on em { background: rgba(20, 40, 34, .12); color: #2c4a41; }
.sites-hit {
  flex: none;
  font-style: normal;
  font-size: 11.5px;
  color: var(--wb-ink-45);
}

/* ---------- 竖排清单：一行一个网站，从上往下排（用户：网站导航希望竖着排版） ---------- */

.sites-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* 只留一列 —— 网站一个压一个往下排 */
  gap: 8px;
  align-content: start;
  padding: 2px 4px 10px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--wb-ink-rgb), .24) transparent;
}
.sites-grid::-webkit-scrollbar { width: 7px; }
.sites-grid::-webkit-scrollbar-thumb { background: rgba(var(--wb-ink-rgb), .22); border-radius: 999px; }

.sites-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border-radius: 16px;
  background: rgba(var(--wb-ink-rgb), .07);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .09);
  backdrop-filter: blur(var(--wb-blur));
  -webkit-backdrop-filter: blur(var(--wb-blur));
  transition: background-color .18s var(--wb-ease), box-shadow .18s var(--wb-ease);
}
.sites-card:hover { background: rgba(var(--wb-ink-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .18); }
.sites-card.is-armed { box-shadow: inset 0 0 0 1px rgba(255, 127, 109, .55); background: rgba(255, 127, 109, .1); }
.sites-card__ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--wb-ink);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.sites-card__ico--rose { background: linear-gradient(155deg, #ffb2a3, #cc3f2e); }
.sites-card__ico--sky { background: linear-gradient(155deg, #7ecbff, #1c5dbd); }
.sites-card__ico--flame { background: linear-gradient(155deg, #ffb877, #b83d05); }
.sites-card__ico--mint { background: linear-gradient(155deg, #63e6c6, #0b8a71); }
.sites-card__ico--violet { background: linear-gradient(155deg, #c9b2ff, #5c3cc4); }
.sites-card__ico--slate { background: linear-gradient(155deg, #cfdae6, #4f6478); }

.sites-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sites-card__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sites-card__sub { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; }
.sites-card__host { flex: none; color: var(--wb-ink-45); }
.sites-card__dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: rgba(var(--wb-ink-rgb), .26); }
.sites-card__cat { flex: none; font-size: 12px; padding: 2px 8px; background: rgba(var(--wb-ink-rgb), .08); color: var(--wb-ink-75); }

.sites-card__note {
  min-width: 0;
  color: var(--wb-ink-75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sites-card__note.is-empty { color: var(--wb-ink-45); font-style: italic; }

.sites-card__meta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--wb-ink-45);
  white-space: nowrap;
}
.sites-card__meta .wb-icon { width: 12px; height: 12px; flex: none; }
.sites-card__acts { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sites-card__acts .wb-icon { width: 13px; height: 13px; }

/* 窗口窄了：先收起「最近打开」，再让按钮换到第二行，别把名字挤没了 */
@media (max-width: 1180px) {
  .sites-card__meta { display: none; }
}
@media (max-width: 900px) {
  .sites-card { flex-wrap: wrap; }
  .sites-card__acts { flex: 1 1 100%; justify-content: flex-end; }
}

/* ---------- 空状态 ---------- */

.sites-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 46px 20px 40px;
  text-align: center;
  border-radius: 22px;
  background: rgba(var(--wb-ink-rgb), .05);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .08);
}
.sites-empty .wb-icon { width: 26px; height: 26px; color: var(--wb-ink-45); }
.sites-empty b { font-size: 14px; color: var(--wb-ink); }
.sites-empty p { margin: 0; max-width: 420px; font-size: 12px; line-height: 1.7; color: var(--wb-ink-60); }
.sites-empty .wb-btn { margin-top: 6px; }

/* ---------- 新增 / 编辑弹窗 ---------- */

.sites-form { width: min(520px, 100%); gap: 12px; }
.sites-fld { display: flex; flex-direction: column; gap: 6px; }
.sites-fld > span, .sites-fld > label { font-size: 11.5px; color: var(--wb-ink-60); }
.sites-fld .wb-input { width: 100%; }
.sites-formcats { gap: 6px; }
.sites-formcats .wb-chip { padding: 5px 12px; font-size: 12px; background: rgba(var(--wb-ink-rgb), .09); }
.sites-formcats .wb-chip:hover { background: rgba(var(--wb-ink-rgb), .18); }
.sites-formcats .wb-chip.is-on { background: rgba(127, 216, 195, .24); color: #d7fff4; box-shadow: inset 0 0 0 1px rgba(127, 216, 195, .38); }

@media (max-width: 1080px) {
  .sites-bar { flex-direction: column; align-items: stretch; }
  .sites-seg { align-self: flex-start; }
  .sites-filters { flex-direction: column; align-items: flex-start; }
  .sites-grid { grid-template-columns: minmax(0, 1fr); }
}