<template>
  <div class="oil-reference">
    <!-- Knowledge Cards at Top -->
    <div class="knowledge-cards">
      <div class="kcard" @click="showDilution = true">
        <span class="kcard-icon">💧</span>
        <span class="kcard-title">稀释比例</span>
        <span class="kcard-arrow">›</span>
      </div>
      <div class="kcard" @click="showContra = true">
        <span class="kcard-icon">⚠️</span>
        <span class="kcard-title">使用禁忌</span>
        <span class="kcard-arrow">›</span>
      </div>
    </div>

    <!-- Dilution Ratio Modal -->
    <div v-if="showDilution" class="modal-overlay" @click.self="showDilution = false">
      <div class="modal-panel">
        <div class="modal-header">
          <h3>💧 稀释比例参考</h3>
          <button class="btn-close" @click="showDilution = false">✕</button>
        </div>
        <div class="modal-body">
          <table class="info-table">
            <thead>
              <tr><th>用途</th><th>比例</th><th>每10ml基底油</th></tr>
            </thead>
            <tbody>
              <tr><td>面部护肤</td><td>1%</td><td>2滴精油</td></tr>
              <tr><td>身体按摩</td><td>2-3%</td><td>4-6滴精油</td></tr>
              <tr><td>局部疼痛</td><td>3-5%</td><td>6-10滴精油</td></tr>
              <tr><td>急救用途</td><td>5-10%</td><td>10-20滴精油</td></tr>
              <tr><td>儿童(2-6岁)</td><td>0.5-1%</td><td>1-2滴精油</td></tr>
              <tr><td>婴儿(&lt;2岁)</td><td>0.25%</td><td>0.5滴精油</td></tr>
            </tbody>
          </table>
          <p class="info-note">* 1ml 约等于 {{ DROPS_PER_ML }} 滴</p>
          <button class="btn-save-img" @click="saveDilutionImage">💾 保存图片</button>
        </div>
      </div>
    </div>

    <!-- Safety Cautions Modal -->
    <div v-if="showContra" class="modal-overlay" @click.self="showContra = false">
      <div class="modal-panel">
        <div class="modal-header">
          <h3>⚠️ 使用禁忌</h3>
          <button class="btn-close" @click="showContra = false">✕</button>
        </div>
        <div class="modal-body">
          <div class="contra-section">
            <h4>光敏性精油（涂抹后12小时内避免阳光直射）</h4>
            <p>柠檬、佛手柑、葡萄柚、莱姆、甜橙、野橘</p>
          </div>
          <div class="contra-section">
            <h4>孕妇慎用</h4>
            <p>快乐鼠尾草、迷迭香、肉桂、丁香、百里香、牛至、冬青</p>
          </div>
          <div class="contra-section">
            <h4>儿童慎用</h4>
            <p>椒样薄荷（6岁以下避免）、尤加利（10岁以下慎用）、冬青、肉桂</p>
          </div>
          <div class="contra-section">
            <h4>宠物禁用</h4>
            <p>茶树、尤加利、肉桂、丁香、百里香、冬青（对猫有毒）</p>
          </div>
          <button class="btn-save-img" @click="saveContraImage">💾 保存图片</button>
        </div>
      </div>
    </div>

    <!-- Add Oil Form (admin/senior_editor only) -->
    <div v-if="auth.canEdit" class="add-oil-form">
      <h3 class="section-title">添加精油</h3>
      <div class="form-row">
        <input v-model="newOilName" class="form-input" placeholder="精油名称" />
        <input v-model.number="newBottlePrice" class="form-input-sm" type="number" placeholder="瓶价 ¥" />
        <select v-model="newVolume" class="form-select">
          <option value="2.5">2.5ml (46滴)</option>
          <option value="5">5ml (93滴)</option>
          <option value="10">10ml (186滴)</option>
          <option value="15">15ml (280滴)</option>
          <option value="115">115ml (2146滴)</option>
          <option value="custom">自定义</option>
        </select>
        <input
          v-if="newVolume === 'custom'"
          v-model.number="newCustomDrops"
          class="form-input-sm"
          type="number"
          placeholder="滴数"
        />
        <input v-model.number="newRetailPrice" class="form-input-sm" type="number" placeholder="零售价 ¥" />
        <button class="btn-primary" @click="addOil" :disabled="!newOilName.trim()">添加</button>
      </div>
    </div>

    <!-- Search + View Toggle + PDF -->
    <div class="toolbar">
      <div class="search-box">
        <input
          class="search-input"
          v-model="searchQuery"
          placeholder="搜索精油..."
        />
        <button v-if="searchQuery" class="search-clear-btn" @click="searchQuery = ''">✕</button>
      </div>
      <div class="view-toggle">
        <button
          class="toggle-btn"
          :class="{ active: viewMode === 'bottle' }"
          @click="viewMode = 'bottle'"
        >瓶价</button>
        <button
          class="toggle-btn"
          :class="{ active: viewMode === 'drop' }"
          @click="viewMode = 'drop'"
        >滴价</button>
      </div>
      <button v-if="auth.canManage" class="btn-pdf" @click="exportPDF" title="导出PDF">
        📄
      </button>
    </div>

    <!-- Oil Grid -->
    <div class="oil-grid">
      <div
        v-for="name in filteredOilNames"
        :key="name"
        class="oil-chip"
        :class="{ 'oil-chip--inactive': getMeta(name)?.isActive === false }"
        @click="openOilDetail(name)"
      >
        <span v-if="getOilCard(name)" class="oil-badge" title="有知识卡片">📖</span>
        <div class="oil-chip-name">{{ name }}</div>
        <div class="oil-chip-en">{{ getEnglishName(name) }}</div>
        <div class="oil-chip-price" v-if="viewMode === 'bottle'">
          <template v-if="getMeta(name)?.bottlePrice != null">
            ¥ {{ getMeta(name).bottlePrice.toFixed(2) }}
          </template>
          <template v-else>--</template>
        </div>
        <div class="oil-chip-price" v-else>
          <template v-if="oils.pricePerDrop(name)">
            ¥ {{ oils.pricePerDrop(name).toFixed(4) }}<span class="oil-unit">/滴</span>
          </template>
          <template v-else>--</template>
        </div>
        <div
          v-if="getMeta(name)?.retailPrice && getMeta(name).retailPrice !== getMeta(name).bottlePrice"
          class="oil-chip-retail"
        >
          <s>零售 ¥ {{ getMeta(name).retailPrice.toFixed(2) }}</s>
        </div>
        <div v-else-if="getMeta(name)?.retailPrice" class="oil-chip-retail">
          零售 ¥ {{ getMeta(name).retailPrice.toFixed(2) }}
        </div>
        <div class="oil-chip-volume" v-if="getMeta(name)?.dropCount">
          {{ volumeLabel(getMeta(name).dropCount) }}
        </div>
        <div class="oil-actions" v-if="auth.canManage" @click.stop>
          <button class="btn-icon-sm" @click="editOil(name)" title="编辑">✏️</button>
          <button class="btn-icon-sm" @click="removeOil(name)" title="删除">🗑️</button>
        </div>
      </div>
      <div v-if="filteredOilNames.length === 0" class="empty-hint">未找到精油</div>
    </div>

    <!-- Oil Knowledge Card Modal -->
    <div v-if="activeCard && activeCardName" class="modal-overlay" @click.self="closeOilModal">
      <div class="oil-card-modal">
        <div class="oil-card-header">
          <div class="oil-card-header-content">
            <span class="oil-card-emoji">{{ activeCard.emoji }}</span>
            <div>
              <h2 class="oil-card-title">{{ activeCardName }}</h2>
              <div class="oil-card-en">{{ activeCard.en }}</div>
              <div class="oil-card-price-info" v-if="getMeta(activeCardName)">
                ¥ {{ (getMeta(activeCardName).bottlePrice || 0).toFixed(2) }}
                <span v-if="oils.pricePerDrop(activeCardName)">
                  &middot; ¥ {{ oils.pricePerDrop(activeCardName).toFixed(4) }}/滴
                </span>
              </div>
            </div>
          </div>
          <button class="btn-close btn-close-light" @click="closeOilModal">✕</button>
        </div>
        <!-- Method badges -->
        <div class="oil-card-methods">
          <span
            v-for="badge in parseMethodBadges(activeCard.method)"
            :key="badge.label"
            class="method-badge"
            :class="badge.cls"
          >{{ badge.label }}</span>
        </div>
        <div class="oil-card-body">
          <!-- Effects -->
          <div class="oil-card-section">
            <h4 class="oil-card-section-title">✨ 主要功效</h4>
            <ul class="oil-card-list">
              <li v-for="(line, i) in splitLines(activeCard.effects)" :key="i">{{ line }}</li>
            </ul>
          </div>
          <!-- Usage -->
          <div class="oil-card-section">
            <h4 class="oil-card-section-title">📖 使用方法</h4>
            <ul class="oil-card-list">
              <li v-for="(line, i) in splitLines(activeCard.usage)" :key="i">{{ line }}</li>
            </ul>
          </div>
          <!-- Caution -->
          <div v-if="activeCard.caution" class="oil-card-caution">
            <h4 class="oil-card-caution-title">⚠️ 注意事项</h4>
            <p>{{ activeCard.caution }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Simple Oil Detail Panel (for oils without a knowledge card) -->
    <div v-if="selectedOilName && !activeCard" class="modal-overlay" @click.self="selectedOilName = null">
      <div class="oil-detail-panel">
        <div class="detail-header">
          <div>
            <h3>{{ selectedOilName }}</h3>
            <div class="detail-en">{{ getEnglishName(selectedOilName) }}</div>
          </div>
          <button class="btn-close" @click="selectedOilName = null">✕</button>
        </div>
        <div class="detail-body">
          <div class="detail-row">
            <span class="detail-label">瓶价</span>
            <span class="detail-value">{{ getMeta(selectedOilName)?.bottlePrice != null ? ('¥ ' + getMeta(selectedOilName).bottlePrice.toFixed(2)) : '--' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">总滴数</span>
            <span class="detail-value">{{ getMeta(selectedOilName)?.dropCount || '--' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">每滴价格</span>
            <span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + oils.pricePerDrop(selectedOilName).toFixed(4)) : '--' }}</span>
          </div>
          <div class="detail-row" v-if="getMeta(selectedOilName)?.retailPrice">
            <span class="detail-label">零售价</span>
            <span class="detail-value">¥ {{ getMeta(selectedOilName).retailPrice.toFixed(2) }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">每ml价格</span>
            <span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + (oils.pricePerDrop(selectedOilName) * DROPS_PER_ML).toFixed(2)) : '--' }}</span>
          </div>

          <h4 style="margin:16px 0 8px">含此精油的配方</h4>
          <div v-if="recipesWithOil.length" class="detail-recipes">
            <div v-for="r in recipesWithOil" :key="r._id" class="detail-recipe-item">
              <span class="dr-name">{{ r.name }}</span>
              <span class="dr-drops">{{ getDropsForOil(r, selectedOilName) }}滴</span>
            </div>
          </div>
          <div v-else class="empty-hint">暂无使用此精油的配方</div>
        </div>
      </div>
    </div>

    <!-- Edit Oil Overlay -->
    <div v-if="editingOilName" class="modal-overlay" @click.self="editingOilName = null">
      <div class="modal-panel" style="max-width:400px">
        <div class="modal-header">
          <h3>编辑精油: {{ editingOilName }}</h3>
          <button class="btn-close" @click="editingOilName = null">✕</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>瓶价 (¥)</label>
            <input v-model.number="editBottlePrice" class="form-input" type="number" />
          </div>
          <div class="form-group">
            <label>容量</label>
            <select v-model="editVolume" class="form-select">
              <option value="2.5">2.5ml (46滴)</option>
              <option value="5">5ml (93滴)</option>
              <option value="10">10ml (186滴)</option>
              <option value="15">15ml (280滴)</option>
              <option value="115">115ml (2146滴)</option>
              <option value="custom">自定义</option>
            </select>
          </div>
          <div class="form-group" v-if="editVolume === 'custom'">
            <label>自定义滴数</label>
            <input v-model.number="editDropCount" class="form-input" type="number" />
          </div>
          <div class="form-group">
            <label>零售价 (¥)</label>
            <input v-model.number="editRetailPrice" class="form-input" type="number" />
          </div>
          <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:16px">
            <button class="btn-outline" @click="editingOilName = null">取消</button>
            <button class="btn-primary" @click="saveEditOil">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useOilsStore, VOLUME_DROPS, DROPS_PER_ML } from '../stores/oils'
import { useAuthStore } from '../stores/auth'
import { useUiStore } from '../stores/ui'
import { useRecipesStore } from '../stores/recipes'
import { oilEn } from '../composables/useOilTranslation'
import { getOilCard } from '../composables/useOilCards'
import { showConfirm } from '../composables/useDialog'

const auth = useAuthStore()
const oils = useOilsStore()
const recipeStore = useRecipesStore()
const ui = useUiStore()

// Modal states
const showDilution = ref(false)
const showContra = ref(false)

// Search & view
const searchQuery = ref('')
const viewMode = ref('bottle')

// Oil detail
const selectedOilName = ref(null)
const activeCardName = ref(null)
const activeCard = ref(null)

// Add oil form
const newOilName = ref('')
const newBottlePrice = ref(null)
const newVolume = ref('5')
const newCustomDrops = ref(null)
const newRetailPrice = ref(null)

// Edit oil
const editingOilName = ref(null)
const editBottlePrice = ref(0)
const editVolume = ref('5')
const editDropCount = ref(0)
const editRetailPrice = ref(null)

// Volume-to-drops mapping
const VOLUME_OPTIONS = {
  '2.5': 46,
  '5': 93,
  '10': 186,
  '15': 280,
  '115': 2146,
}

// Reverse lookup: drops to volume label
const DROPS_TO_VOLUME = {}
for (const [ml, drops] of Object.entries(VOLUME_OPTIONS)) {
  DROPS_TO_VOLUME[drops] = ml + 'ml'
}

function volumeLabel(dropCount) {
  return DROPS_TO_VOLUME[dropCount] || (dropCount + '滴')
}

function getEffectiveDropCount() {
  if (newVolume.value === 'custom') return newCustomDrops.value || 0
  return VOLUME_OPTIONS[newVolume.value] || 0
}

// When editing, sync volume dropdown from drop count
function dropCountToVolume(dc) {
  for (const [ml, drops] of Object.entries(VOLUME_OPTIONS)) {
    if (drops === dc) return ml
  }
  return 'custom'
}

function getEditDropCount() {
  if (editVolume.value === 'custom') return editDropCount.value
  return VOLUME_OPTIONS[editVolume.value] || 0
}

// Computed
const filteredOilNames = computed(() => {
  if (!searchQuery.value.trim()) return oils.oilNames
  const q = searchQuery.value.trim().toLowerCase()
  return oils.oilNames.filter(n => {
    const en = getEnglishName(n).toLowerCase()
    return n.toLowerCase().includes(q) || en.includes(q)
  })
})

const recipesWithOil = computed(() => {
  const name = selectedOilName.value || activeCardName.value
  if (!name) return []
  return recipeStore.recipes.filter(r =>
    r.ingredients.some(i => i.oil === name)
  )
})

// Helpers
function getMeta(name) {
  return oils.oilsMeta[name]
}

function getEnglishName(name) {
  // First check the oil card for English name
  const card = getOilCard(name)
  if (card && card.en) return card.en
  return oilEn(name)
}

function getDropsForOil(recipe, oilName) {
  const ing = recipe.ingredients.find(i => i.oil === oilName)
  return ing ? ing.drops : 0
}

function splitLines(text) {
  if (!text) return []
  return text.split('\n').filter(l => l.trim())
}

function parseMethodBadges(methodStr) {
  if (!methodStr) return []
  const badges = []
  if (methodStr.includes('香薰') || methodStr.includes('熏香')) {
    badges.push({ label: '香薰', cls: 'method-aroma' })
  }
  if (methodStr.includes('内用')) {
    badges.push({ label: '内用', cls: 'method-internal' })
  }
  if (methodStr.includes('涂抹')) {
    badges.push({ label: '涂抹', cls: 'method-topical' })
  }
  return badges
}

// Actions
function openOilDetail(name) {
  const card = getOilCard(name)
  if (card) {
    activeCardName.value = name
    activeCard.value = card
    selectedOilName.value = null
  } else {
    activeCard.value = null
    activeCardName.value = null
    selectedOilName.value = name
  }
}

function closeOilModal() {
  activeCard.value = null
  activeCardName.value = null
  selectedOilName.value = null
}

async function addOil() {
  if (!newOilName.value.trim()) return
  const dropCount = getEffectiveDropCount()
  try {
    await oils.saveOil(
      newOilName.value.trim(),
      newBottlePrice.value || 0,
      dropCount,
      newRetailPrice.value || null
    )
    ui.showToast(`已添加: ${newOilName.value}`)
    newOilName.value = ''
    newBottlePrice.value = null
    newVolume.value = '5'
    newCustomDrops.value = null
    newRetailPrice.value = null
  } catch (e) {
    ui.showToast('添加失败: ' + (e.message || ''))
  }
}

function editOil(name) {
  editingOilName.value = name
  const meta = oils.oilsMeta[name]
  editBottlePrice.value = meta?.bottlePrice || 0
  const dc = meta?.dropCount || 0
  editVolume.value = dropCountToVolume(dc)
  editDropCount.value = dc
  editRetailPrice.value = meta?.retailPrice || null
}

async function saveEditOil() {
  const dropCount = getEditDropCount()
  try {
    await oils.saveOil(
      editingOilName.value,
      editBottlePrice.value,
      dropCount,
      editRetailPrice.value
    )
    ui.showToast('已更新')
    editingOilName.value = null
  } catch (e) {
    ui.showToast('更新失败')
  }
}

async function removeOil(name) {
  const ok = await showConfirm(`确定删除精油 "${name}"？`)
  if (!ok) return
  try {
    await oils.deleteOil(name)
    ui.showToast('已删除')
  } catch {
    ui.showToast('删除失败')
  }
}

// PDF Export
function exportPDF() {
  const sortedNames = [...oils.oilNames].sort((a, b) => a.localeCompare(b, 'zh'))
  let rows = ''
  for (const name of sortedNames) {
    const meta = getMeta(name)
    if (!meta) continue
    const bp = meta.bottlePrice != null ? '¥ ' + meta.bottlePrice.toFixed(2) : '--'
    const rp = meta.retailPrice != null ? '¥ ' + meta.retailPrice.toFixed(2) : '--'
    const vol = volumeLabel(meta.dropCount)
    const dc = meta.dropCount || '--'
    const ppd = oils.pricePerDrop(name) ? '¥ ' + oils.pricePerDrop(name).toFixed(4) : '--'
    rows += `<tr>
      <td>${name}</td>
      <td>${bp}</td>
      <td>${rp}</td>
      <td>${vol}</td>
      <td>${dc}</td>
      <td>${ppd}</td>
    </tr>`
  }
  const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>精油价格表</title>
<style>
  body { font-family: 'Noto Sans SC', sans-serif; padding: 20px; }
  h1 { font-family: 'Noto Serif SC', serif; font-size: 20px; color: #2c2416; margin-bottom: 16px; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #e0d4c0; }
  th { background: #eef4ee; color: #5a7d5e; font-weight: 600; }
  tr:hover { background: #f9f7f4; }
  @media print { body { padding: 0; } }
</style>
</head>
<body>
<h1>精油价格表</h1>
<table>
  <thead>
    <tr><th>精油</th><th>每瓶价格</th><th>零售价</th><th>容量</th><th>滴数</th><th>单价/滴</th></tr>
  </thead>
  <tbody>${rows}</tbody>
</table>
</body>
</html>`
  const w = window.open('', '_blank')
  w.document.write(html)
  w.document.close()
  w.onload = () => w.print()
}

// Placeholder save image functions
function saveDilutionImage() {
  ui.showToast('保存图片功能开发中')
}
function saveContraImage() {
  ui.showToast('保存图片功能开发中')
}
</script>

<style scoped>
.oil-reference {
  padding: 0 12px 24px;
}

/* ===== Knowledge Cards ===== */
.knowledge-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.kcard {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--sage-mist, #eef4ee), #f0eeeb);
  border: 1.5px solid var(--border, #e0d4c0);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.kcard:hover {
  border-color: var(--sage, #7a9e7e);
  background: linear-gradient(135deg, #e8f5e9, #eef4ee);
  box-shadow: var(--shadow, 0 4px 20px rgba(90,60,30,0.08));
}

.kcard-icon {
  font-size: 22px;
}

.kcard-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark, #2c2416);
  flex: 1;
  font-family: 'Noto Sans SC', sans-serif;
}

.kcard-arrow {
  color: var(--text-light, #9a8570);
  font-size: 18px;
}

/* ===== Modal Overlay ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-panel {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-family: 'Noto Serif SC', serif;
  color: var(--text-dark, #2c2416);
}

.modal-body {
  font-size: 14px;
  color: var(--text-dark, #2c2416);
  line-height: 1.7;
}

/* ===== Info Table ===== */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.info-table th,
.info-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e0d4c0);
  font-size: 13px;
}

.info-table th {
  font-weight: 600;
  color: var(--sage-dark, #5a7d5e);
  background: var(--sage-mist, #eef4ee);
}

.info-note {
  font-size: 12px;
  color: var(--text-light, #9a8570);
  margin-top: 8px;
}

.btn-save-img {
  display: block;
  margin: 16px auto 0;
  padding: 8px 20px;
  background: var(--sage-mist, #eef4ee);
  border: 1.5px solid var(--sage, #7a9e7e);
  border-radius: 8px;
  color: var(--sage-dark, #5a7d5e);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-save-img:hover {
  background: var(--sage, #7a9e7e);
  color: #fff;
}

/* ===== Contra sections ===== */
.contra-section {
  margin-bottom: 14px;
}

.contra-section h4 {
  font-size: 14px;
  margin: 0 0 4px;
  color: #e65100;
  font-family: 'Noto Sans SC', sans-serif;
}

.contra-section p {
  font-size: 13px;
  color: var(--text-light, #9a8570);
  margin: 0;
}

/* ===== Add Oil Form ===== */
.add-oil-form {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--sage-mist, #eef4ee);
  border-radius: 12px;
  border: 1.5px solid var(--border, #e0d4c0);
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark, #2c2416);
  margin: 0 0 10px;
  font-family: 'Noto Serif SC', serif;
}

.form-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.form-input {
  flex: 1;
  min-width: 100px;
  padding: 8px 12px;
  border: 1.5px solid var(--border, #e0d4c0);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #fff;
}

.form-input:focus {
  border-color: var(--sage, #7a9e7e);
}

.form-input-sm {
  width: 80px;
  padding: 8px 10px;
  border: 1.5px solid var(--border, #e0d4c0);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  text-align: center;
  background: #fff;
}

.form-input-sm:focus {
  border-color: var(--sage, #7a9e7e);
}

.form-select {
  padding: 8px 10px;
  border: 1.5px solid var(--border, #e0d4c0);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #fff;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--sage, #7a9e7e);
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark, #2c2416);
  margin-bottom: 4px;
}

/* ===== Toolbar ===== */
.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}

.search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 2px 8px;
  border: 1.5px solid var(--border, #e0d4c0);
  flex: 1;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 6px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

.search-clear-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-light, #9a8570);
  padding: 4px;
}

.view-toggle {
  display: flex;
  border: 1.5px solid var(--border, #e0d4c0);
  border-radius: 10px;
  overflow: hidden;
}

.toggle-btn {
  border: none;
  background: #fff;
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-light, #9a8570);
  transition: all 0.15s;
  white-space: nowrap;
}

.toggle-btn.active {
  background: linear-gradient(135deg, var(--sage, #7a9e7e), var(--sage-dark, #5a7d5e));
  color: #fff;
}

.btn-pdf {
  border: 1.5px solid var(--border, #e0d4c0);
  background: #fff;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-pdf:hover {
  border-color: var(--sage, #7a9e7e);
  background: var(--sage-mist, #eef4ee);
}

/* ===== Oil Grid ===== */
.oil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.oil-chip {
  padding: 12px;
  background: #fff;
  border: 1.5px solid var(--border, #e0d4c0);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.oil-chip:hover {
  border-color: var(--sage, #7a9e7e);
  box-shadow: var(--shadow, 0 4px 20px rgba(90,60,30,0.08));
}

.oil-chip--inactive {
  opacity: 0.45;
  filter: grayscale(0.6);
}

.oil-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
  line-height: 1;
}

.oil-chip-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark, #2c2416);
  font-family: 'Noto Serif SC', serif;
  margin-bottom: 1px;
  padding-right: 22px;
}

.oil-chip-en {
  font-size: 11px;
  color: var(--text-light, #9a8570);
  margin-bottom: 4px;
  font-family: 'Noto Sans SC', sans-serif;
}

.oil-chip-price {
  font-size: 14px;
  color: var(--sage-dark, #5a7d5e);
  font-weight: 500;
}

.oil-unit {
  font-size: 11px;
  color: var(--text-light, #9a8570);
}

.oil-chip-retail {
  font-size: 11px;
  color: var(--text-light, #9a8570);
  margin-top: 2px;
}

.oil-chip-retail s {
  color: #c0a080;
}

.oil-chip-volume {
  font-size: 10px;
  color: var(--text-light, #9a8570);
  margin-top: 3px;
  padding: 1px 6px;
  background: var(--sage-mist, #eef4ee);
  border-radius: 4px;
  display: inline-block;
}

.oil-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.oil-chip:hover .oil-actions {
  opacity: 1;
}

/* When badge is present, push actions below */
.oil-chip:hover .oil-badge {
  display: none;
}

.btn-icon-sm {
  border: none;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  border-radius: 6px;
}

.btn-icon-sm:hover {
  background: var(--sage-mist, #eef4ee);
}

/* ===== Oil Knowledge Card Modal ===== */
.oil-card-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

.oil-card-header {
  background: linear-gradient(135deg, var(--sage, #7a9e7e), var(--sage-dark, #5a7d5e));
  padding: 24px 20px;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.oil-card-header-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.oil-card-emoji {
  font-size: 40px;
  line-height: 1;
}

.oil-card-title {
  margin: 0;
  font-size: 20px;
  font-family: 'Noto Serif SC', serif;
  color: #fff;
  font-weight: 700;
}

.oil-card-en {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
  font-family: 'Noto Sans SC', sans-serif;
}

.oil-card-price-info {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.btn-close-light {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
}

.btn-close-light:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Method badges */
.oil-card-methods {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #e0d4c0);
}

.method-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Noto Sans SC', sans-serif;
}

.method-aroma {
  background: #e8f5e9;
  color: #2e7d32;
}

.method-internal {
  background: #fff3e0;
  color: #e65100;
}

.method-topical {
  background: #e3f2fd;
  color: #1565c0;
}

.oil-card-body {
  padding: 16px 20px 24px;
}

.oil-card-section {
  margin-bottom: 18px;
}

.oil-card-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark, #2c2416);
  margin: 0 0 8px;
  font-family: 'Noto Serif SC', serif;
}

.oil-card-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-dark, #2c2416);
  line-height: 1.8;
}

.oil-card-list li {
  margin-bottom: 2px;
}

/* Caution box */
.oil-card-caution {
  background: #fffde7;
  border: 1px solid #ffe082;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 12px;
}

.oil-card-caution-title {
  font-size: 14px;
  font-weight: 600;
  color: #f57f17;
  margin: 0 0 6px;
}

.oil-card-caution p {
  font-size: 13px;
  color: #795548;
  margin: 0;
  line-height: 1.6;
}

/* ===== Simple Detail Panel ===== */
.oil-detail-panel {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.detail-header h3 {
  margin: 0;
  font-size: 18px;
  font-family: 'Noto Serif SC', serif;
  color: var(--text-dark, #2c2416);
}

.detail-en {
  font-size: 12px;
  color: var(--text-light, #9a8570);
  margin-top: 2px;
}

.detail-body h4 {
  font-size: 14px;
  color: var(--text-dark, #2c2416);
  font-family: 'Noto Serif SC', serif;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--sage-mist, #eef4ee);
  font-size: 14px;
}

.detail-label {
  color: var(--text-light, #9a8570);
}

.detail-value {
  font-weight: 600;
  color: var(--text-dark, #2c2416);
}

.detail-recipes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-recipe-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--sage-mist, #eef4ee);
  border-radius: 8px;
  font-size: 13px;
}

.dr-name {
  color: var(--text-dark, #2c2416);
}

.dr-drops {
  color: var(--sage-dark, #5a7d5e);
  font-weight: 500;
}

/* ===== Common Buttons ===== */
.btn-close {
  border: none;
  background: #f0eeeb;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light, #9a8570);
  flex-shrink: 0;
}

.btn-close:hover {
  background: #e5e0da;
}

.btn-primary {
  background: linear-gradient(135deg, var(--sage, #7a9e7e) 0%, var(--sage-dark, #5a7d5e) 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-outline {
  background: #fff;
  color: var(--text-light, #9a8570);
  border: 1.5px solid var(--border, #e0d4c0);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.btn-outline:hover {
  border-color: var(--sage, #7a9e7e);
}

.empty-hint {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-light, #9a8570);
  font-size: 13px;
  padding: 24px 0;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .oil-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .form-row {
    flex-direction: column;
  }
  .form-input-sm,
  .form-select {
    width: 100%;
  }
  .oil-card-modal {
    max-width: 100%;
    margin: 8px;
  }
}
</style>
