/* === 20-search.css — 搜尋首頁(sidebar/分類/結果卡)+常駐搜尋 bar+site-footer === 保序拆分自 styles.css(3753 行 > 2500 行鐵則)；cascade 順序 = 檔名數字序，index.html 依序載入 */
/* ─── 搜尋首頁：左 sidebar（7 大類）+ 中 subcategory（細類）+ 右主區（search + results） ─── */
.search-layout {
  display: grid;
  grid-template-columns: 210px 210px 1fr;
  gap: var(--space-3, 0.75rem);
  align-items: stretch;
  margin-top: var(--space-2, 0.5rem);
}
.results-count { margin-bottom: var(--space-2, 0.5rem); color: var(--color-text-muted, #9aa3b8); font-weight: 600; }

.category-sidebar,
.subcategory-sidebar {
  background: var(--gradient-tablet, var(--color-surface, #232a3d));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--color-border, #2f3650));
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.25));
  padding: var(--space-3, 0.75rem);
  position: sticky;
  /* 50px (header + 2px gap) + 82px 預留（search-bar ~65px + 12px margin + 5px buffer）→ scroll 時跟搜尋框 ~12px gap */
  top: calc(50px + 82px);
  max-height: calc(100vh - 50px - 82px - var(--space-3, 0.75rem));
  overflow-y: auto;
}
/* sub-main 距離靠 sub 自己 margin-right 維持（grid gap=2px 太擠時補上） */
.subcategory-sidebar {
  margin-right: var(--space-2, 0.5rem);
}
.sidebar-title {
  /* 字體 / 字距 / 大寫 / 顏色由 .codex-label .codex-label--gold (portal CDN) 接管，只留 sidebar 內定位用 */
  margin: 0 0 var(--space-2, 0.5rem) 0;
  padding: 0 var(--space-2, 0.5rem) var(--space-2, 0.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--color-border, #2f3650));
}
.cat-btn,
.sub-btn {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2, 0.5rem);
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-card, 8px);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  color: inherit;
  font-family: inherit; 
  text-align: left; cursor: pointer;
  margin-bottom: 2px;
  transition: background var(--transition-fast, .15s ease), color var(--transition-fast, .15s ease), border-color var(--transition-fast, .15s ease);
}
.cat-btn:hover,
.sub-btn:hover {
  background: color-mix(in srgb, var(--accent, #4ec9d0) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent, #4ec9d0) 25%, transparent);
}
.cat-btn.active,
.sub-btn.active {
  background: var(--color-accent-cyan-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count {
  font-family: var(--font-mono, monospace);
  
  opacity: 0.6;
  flex-shrink: 0;
}
.cat-btn.active .cat-count,
.sub-btn.active .cat-count { opacity: 0.9; }

.ilv-range {
  display: flex; align-items: center; gap: var(--space-1, 0.25rem);
  padding: 0 var(--space-2, 0.5rem);
}
.ilv-range input {
  flex: 1; min-width: 0; width: 100%;
  background: rgba(15, 20, 32, 0.6);
  color: inherit;
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-card, 6px);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  font-family: var(--font-mono, monospace);
  
  outline: none;
  text-align: center;
  -moz-appearance: textfield;
}
.ilv-range input::-webkit-outer-spin-button,
.ilv-range input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.ilv-range input:focus { border-color: var(--accent); }
.ilv-sep { color: var(--color-text-muted, #9aa3b8); }

.toggle-group {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 var(--space-2, 0.5rem);
}
.toggle-btn {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-card, 6px);
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  color: inherit;
  font-family: inherit; 
  text-align: left; cursor: pointer;
  transition: background var(--transition-fast, .15s ease), color var(--transition-fast, .15s ease), border-color var(--transition-fast, .15s ease);
}
.toggle-btn::before {
  content: "○"; margin-right: 0.4em; opacity: 0.5;
}
.toggle-btn:hover {
  border-color: var(--accent);
}
.toggle-btn.active {
  background: var(--color-accent-cyan-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.toggle-btn.active::before { content: "●"; opacity: 1; }

.search-main { min-width: 0; }

@media (max-width: 900px) {
  .container { margin-top: 0; }  /* mobile 還原正常 margin（不擠 portal breathing 空間） */
  .search-layout { grid-template-columns: 1fr; align-items: start; }
  .category-sidebar,
  .subcategory-sidebar { position: static; max-height: none; }
}

/* ─── 全頁面常駐搜尋 bar — 版面與外觀由 10-base 的 .mb-stage .search-bar 規則定義；
       舊 frosted/sticky/金框樣式已清除（2026-06-10 E 清理）。以下只留 input 行為 hack。 ─── */
/* 防 Chrome / Edge autofill 套淺色背景（box-shadow inset hack） */
.search-bar input:-webkit-autofill,
.search-bar input:-webkit-autofill:hover,
.search-bar input:-webkit-autofill:focus,
.search-bar input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text, #f5f5f5);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  caret-color: var(--color-text, #f5f5f5);
  transition: background-color 9999s ease 0s;
}
/* 拿掉 search input 的瀏覽器 default × 清除鈕（背景對比也差） */
.search-bar input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em; width: 1em;
  background:
    linear-gradient(45deg, transparent 45%, var(--color-text-muted, #9aa3b8) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--color-text-muted, #9aa3b8) 45% 55%, transparent 55%);
  cursor: pointer; opacity: 0.6;
}
.search-bar input::-webkit-search-cancel-button:hover { opacity: 1; }

/* ─── 「最近搜尋」自訂 suggestion dropdown（modules/search_history.js）───
       取代原生 autofill 黑窗：底色用站內常用面板色 + accent 框，跟 sidebar/卡片一致 */
.mb-stage .search-bar { position: relative; }
.q-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: min(560px, 100%);  /* 短關鍵字清單不需全寬；上限內跟輸入框左緣對齊 */
  background: var(--color-surface, #101824);  /* 不透明 — 半透明 gradient-tablet 當 overlay 會透出底下內容 */
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--color-border, #2b3f56));
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-mystical-cyan, 0 8px 20px rgba(0, 0, 0, 0.4));
  z-index: var(--z-dropdown, 100);
  padding: var(--space-1, 0.25rem);
}
.q-suggest-label {
  display: block;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--color-border, #2b3f56));
  margin-bottom: var(--space-1, 0.25rem);
}
.q-suggest-item {
  display: flex; align-items: center; gap: var(--space-2, 0.5rem);
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-2, 0.5rem);
  color: inherit;
  font-family: inherit;
  text-align: left; cursor: pointer;
  transition: background var(--transition-fast, .15s ease), color var(--transition-fast, .15s ease), border-color var(--transition-fast, .15s ease);
}
/* 圖示+文字並排鐵則：icon 不縮、文字可縮 + ellipsis */
.q-suggest-icon { flex: 0 0 auto; opacity: 0.7; }
.q-suggest-ic { flex: 0 0 auto; width: 24px; height: 24px; image-rendering: pixelated; }
.q-suggest-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 物品建議右側 meta（iLv · 細類）— 補充註記，比照 .shop-add-suggest-meta 用 muted */
.q-suggest-meta {
  flex: 0 0 auto; margin-left: auto;
  color: var(--color-text-muted, #c0c9da);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}
.q-suggest-item:hover,
.q-suggest-item.active {
  background: var(--color-accent-cyan-soft, rgba(78, 201, 208, 0.18));
  border-color: color-mix(in srgb, var(--accent, #4ec9d0) 25%, transparent);
  color: var(--accent, #4ec9d0);
}

.search-category {
  background: rgba(15, 20, 32, 0.6);
  color: inherit;
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-family: inherit; 
  outline: none; cursor: pointer;
  max-width: 240px;
  transition: border-color var(--transition-fast, .15s ease);
}
.search-category:hover, .search-category:focus { border-color: var(--accent); }

@media (max-width: 600px) {
  .search-bar { flex-wrap: wrap; }
  .search-category { width: 100%; max-width: none; }
}

.results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3, 0.75rem);
  /* 拿掉 margin-top，跟 sidebar top 對齊（sidebar 沒 margin-top，是 grid track 起點） */
}

.item-card {
  display: flex; flex-direction: column; gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--gradient-tablet, var(--color-surface, #232a3d));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--color-border, #2f3650));  /* 比 sidebar 18% 明顯，卡片邊框跳出來 */
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.25));
  position: relative;  /* for .item-card-badge */
  transition: transform var(--transition-slow, .4s cubic-bezier(0.22, 0.61, 0.36, 1)),
              box-shadow var(--transition-slow, .4s cubic-bezier(0.22, 0.61, 0.36, 1)),
              border-color var(--transition-fast, .15s ease);
}
.item-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-mystical-cyan, 0 8px 20px rgba(0, 0, 0, 0.4));
}
/* 卡片資訊區（圖+名+細項）— 整塊點擊跳來源頁；原 .item-card 橫向 row 佈局移到這 */
.item-card-body {
  display: flex; gap: var(--space-3, 0.75rem); align-items: center;
  text-decoration: none; color: inherit; min-width: 0;
}
.item-card img { width: 44px; height: 44px; flex-shrink: 0; image-rendering: pixelated; }
.item-card .meta { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.item-card .name {
  display: flex;
  align-items: center;  /* 用 center 而非 baseline，pill chip 不會下沉 */
  gap: var(--space-2, 0.5rem);
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  min-width: 0;  /* let flex children shrink + ellipsis 生效 */
}
.item-card-name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 物品名稱依稀有度上色（FFXIV 遊戲內標準色階；dark bg 提高飽和度避免太暗）
 * ra=1 白色（一般 / 多數武防具）/ ra=2 綠 / ra=3 藍 / ra=4 紫 / ra=7 粉（收藏 / aetherial）
 * token 在 portal tokens.css `--color-rarity-*`（2026-05-23） */
.item-card-name-text[data-ra="1"] { color: var(--color-rarity-common, #f5f5f5); }
.item-card-name-text[data-ra="2"] { color: var(--color-rarity-uncommon, #4fd66b); }
.item-card-name-text[data-ra="3"] { color: var(--color-rarity-rare, #5ab2ff); }
.item-card-name-text[data-ra="4"] { color: var(--color-rarity-epic, #c884ff); }
.item-card-name-text[data-ra="7"] { color: var(--color-rarity-relic, #ff8ad8); }
/* Patch 標籤 — name 行右側小 pill；亮色文字 + 明顯邊框，跟可製作 chip 視覺平衡 */
.item-card-patch {
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.72em;
  color: var(--color-text, #f5f5f5);
  background: rgba(180, 200, 230, 0.15);
  border: 1px solid rgba(180, 200, 230, 0.45);
  border-radius: var(--radius-sm, 6px);
  padding: 1px 7px;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.item-card .extra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
  min-width: 0;
}
.item-card-extra-left {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 裝備等級 — extra 行右側，accent 強調（vs muted 細類 left） */
.item-card-equiplv {
  flex-shrink: 0;
  color: var(--accent, #4ec9d0);
  font-weight: 600;
}
/* 「可製作」chip — inline 進 name 行右側（避免跟 patch 標籤撞）；gold accent vs patch 的中性色 */
.item-card-badge {
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.72em;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--color-accent-cyan-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm, 6px);
  padding: 1px 7px;
  line-height: 1.3;
  pointer-events: none;
}
/* 不可交易 — 紅色 danger 變體，跟金色「可製作」對比明顯，一眼辨識 */
.item-card-badge--untradable {
  color: var(--color-danger, #e57373);
  background: var(--color-danger-soft, rgba(229, 115, 115, 0.18));
  border-color: var(--color-danger, #e57373);
}
/* 能力按鈕列（查價/採集/製作/來源）— 等寬填滿卡片、compact padding；
 * 態由 codex-btn 提供：--primary(當前分頁實心) / --ghost(可用外框) / :disabled(不可用 .45 灰、not-allowed) */
.item-card-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
}
.item-card-actions .codex-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;                              /* 比 header codex-btn 38px 矮，卡片內不臃腫 */
  padding-inline: var(--space-2, 0.5rem);
  font-size: var(--fs-small, 0.75rem);
}

.loading {
  display: flex; justify-content: center; align-items: center;
  gap: var(--space-2, 8px);
  text-align: center; padding: var(--space-6, 2rem);
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);
  letter-spacing: var(--tracking-wide, 0.16em);
}
/* spinner 在 .loading 內縮 18px（預設 24 太大跟字級不協調） */
.loading .codex-spinner { width: 18px; height: 18px; }
.error {
  color: var(--color-danger, #e57373);
  padding: var(--space-3, 0.75rem);
  background: var(--color-danger-soft, rgba(229, 115, 115, 0.18));
  border: 1px solid var(--color-danger, #e57373);
  border-radius: var(--radius-card, 12px);
}

.site-footer {
  text-align: center; padding: var(--space-6, 2rem);
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);
  
  letter-spacing: 0.04em;
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-cyan-hover, #7fd6dc); }