<template>
  <div class="insp-layout">
    <!-- ─── 左侧：巡检模板列表 ─── -->
    <div class="insp-sidebar">
      <div class="sidebar-header">
        巡检模板
        <span class="add-btn" @click="openChecklistDialog()">＋</span>
      </div>
      <div class="cl-list">
        <div
          v-for="cl in checklists"
          :key="cl.id"
          :class="['cl-item', { active: selectedCl && selectedCl.id === cl.id }]"
          @click="selectChecklist(cl)"
        >
          <div class="cl-name">{{ cl.name }}</div>
          <div class="cl-meta">
            <span class="td-muted" style="font-size:10px;">{{ cl.equipment_name || cl.equipment_code || '通用' }}</span>
            <span :class="['badge', periodBadge(cl.period)]" style="font-size:9px;padding:1px 5px;">{{ periodLabel(cl.period) }}</span>
            <span :class="['badge', cl.is_active ? 'badge-green' : 'badge-gray']" style="font-size:9px;padding:1px 5px;">{{ cl.is_active ? '启用' : '停用' }}</span>
          </div>
        </div>
        <div v-if="!checklists.length" class="cl-empty">暂无模板</div>
      </div>
    </div>

    <!-- ─── 右侧主区域 ─── -->
    <div class="insp-main">
      <div v-if="!selectedCl" class="empty-tip">请选择巡检模板</div>

      <template v-else>
        <!-- 模板详情卡 -->
        <div class="card">
          <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;">
            <span>{{ selectedCl.name }}</span>
            <div class="flex-row" style="gap:8px;">
              <span :class="['badge', cl_is_active_badge]">{{ selectedCl.is_active ? '启用中' : '已停用' }}</span>
              <button class="btn btn-outline" style="padding:2px 10px;font-size:11px;" @click="openEditChecklistDialog()">编辑</button>
              <button class="btn btn-primary" style="padding:2px 10px;font-size:11px;" @click="openInspectDialog()">开始巡检</button>
            </div>
          </div>
          <div class="card-body">
            <div class="flex-row" style="gap:24px;flex-wrap:wrap;">
              <div class="flex-row"><span class="kv-label">设备编号</span><span class="kv-value">{{ selectedCl.equipment_code || '—' }}</span></div>
              <div class="flex-row"><span class="kv-label">设备名称</span><span class="kv-value">{{ selectedCl.equipment_name || '—' }}</span></div>
              <div class="flex-row"><span class="kv-label">巡检周期</span><span class="kv-value">{{ periodLabel(selectedCl.period) }}</span></div>
              <div class="flex-row"><span class="kv-label">描述</span><span class="kv-value">{{ selectedCl.description || '—' }}</span></div>
            </div>
          </div>
        </div>

        <!-- 模板项目 -->
        <div class="card">
          <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;">
            巡检项目
            <button class="btn btn-outline" style="padding:2px 10px;font-size:11px;" @click="openItemDialog()">＋ 添加项目</button>
          </div>
          <div class="table-scroll">
            <table class="data-table">
              <thead>
                <tr>
                  <th style="width:50px;">序号</th>
                  <th>项目名称</th>
                  <th>检验标准</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in clItems" :key="item.id">
                  <td class="td-num">{{ item.sort_order }}</td>
                  <td>{{ item.item_name }}</td>
                  <td class="td-muted">{{ item.item_standard || '—' }}</td>
                </tr>
                <tr v-if="!clItems.length">
                  <td colspan="3" class="td-muted" style="text-align:center;padding:16px;">暂无巡检项目</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 巡检记录 -->
        <div class="card">
          <div class="card-header">
            巡检记录
            <span class="ch-badge">共 {{ recordTotal }} 条</span>
          </div>
          <!-- 记录过滤 -->
          <div class="card-body" style="padding:8px 14px;border-bottom:1px solid var(--border, #30363d);">
            <div class="flex-row" style="gap:10px;flex-wrap:wrap;">
              <div class="flex-row">
                <span class="kv-label">状态</span>
                <select v-model="recordQuery.status" class="kv-input" style="width:90px;">
                  <option value="">全部</option>
                  <option value="ok">正常</option>
                  <option value="issue">有问题</option>
                  <option value="urgent">紧急</option>
                </select>
              </div>
              <div class="flex-row">
                <span class="kv-label">日期</span>
                <input v-model="recordQuery.start_date" type="date" class="kv-input" style="width:130px;" />
                <span class="kv-label">~</span>
                <input v-model="recordQuery.end_date" type="date" class="kv-input" style="width:130px;" />
              </div>
              <button class="btn btn-primary" @click="fetchRecords">查询</button>
            </div>
          </div>
          <div class="table-scroll">
            <table class="data-table">
              <thead>
                <tr>
                  <th>巡检时间</th>
                  <th>巡检人</th>
                  <th>状态</th>
                  <th>总体结果</th>
                  <th>备注</th>
                  <th>明细</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="r in records" :key="r.id">
                  <td class="td-muted">{{ fmtTime(r.inspect_time) }}</td>
                  <td>{{ r.inspector }}</td>
                  <td><span :class="['badge', recordStatusBadge(r.status)]">{{ recordStatusLabel(r.status) }}</span></td>
                  <td>
                    <span v-if="r.overall_result" :class="['badge', r.overall_result === 'pass' ? 'badge-green' : 'badge-red']">
                      {{ r.overall_result === 'pass' ? '通过' : '不通过' }}
                    </span>
                    <span v-else class="td-muted">—</span>
                  </td>
                  <td class="td-muted">{{ r.remark || '—' }}</td>
                  <td><span class="action-link" @click="viewDetails(r)">查看明细</span></td>
                </tr>
                <tr v-if="!records.length">
                  <td colspan="6" class="td-muted" style="text-align:center;padding:16px;">暂无巡检记录</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="card-body" style="padding:8px 14px;" v-if="recordTotal > recordQuery.page_size">
            <div class="flex-row">
              <button class="btn btn-outline" :disabled="recordQuery.page <= 1" @click="recordQuery.page--; fetchRecords()">上一页</button>
              <span class="kv-label">第 {{ recordQuery.page }} / {{ Math.ceil(recordTotal / recordQuery.page_size) }} 页</span>
              <button class="btn btn-outline" :disabled="recordQuery.page >= Math.ceil(recordTotal / recordQuery.page_size)" @click="recordQuery.page++; fetchRecords()">下一页</button>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- ─── 新增模板弹窗 ─── -->
    <div v-if="clDialogVisible" class="modal-mask" @click.self="clDialogVisible = false">
      <div class="modal-box" style="width:480px;">
        <div class="modal-header">
          新增巡检模板
          <span class="modal-close" @click="clDialogVisible = false">✕</span>
        </div>
        <div class="modal-body">
          <div style="display:flex;flex-direction:column;gap:12px;">
            <div class="form-field">
              <div class="kv-label">模板名称 *</div>
              <input v-model="clForm.name" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">设备编号</div>
              <input v-model="clForm.equipment_code" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">设备名称</div>
              <input v-model="clForm.equipment_name" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">巡检周期</div>
              <select v-model="clForm.period" class="kv-input">
                <option value="daily">每日</option>
                <option value="weekly">每周</option>
                <option value="monthly">每月</option>
              </select>
            </div>
            <div class="form-field">
              <div class="kv-label">描述</div>
              <textarea v-model="clForm.description" class="kv-input" rows="2"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" @click="clDialogVisible = false">取消</button>
          <button class="btn btn-primary" :disabled="saving" @click="saveChecklist">{{ saving ? '保存中...' : '保存' }}</button>
        </div>
      </div>
    </div>

    <!-- ─── 编辑模板弹窗 ─── -->
    <div v-if="editClDialogVisible" class="modal-mask" @click.self="editClDialogVisible = false">
      <div class="modal-box" style="width:480px;">
        <div class="modal-header">
          编辑模板
          <span class="modal-close" @click="editClDialogVisible = false">✕</span>
        </div>
        <div class="modal-body">
          <div style="display:flex;flex-direction:column;gap:12px;">
            <div class="form-field">
              <div class="kv-label">模板名称 *</div>
              <input v-model="editClForm.name" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">设备编号</div>
              <input v-model="editClForm.equipment_code" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">设备名称</div>
              <input v-model="editClForm.equipment_name" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">巡检周期</div>
              <select v-model="editClForm.period" class="kv-input">
                <option value="daily">每日</option>
                <option value="weekly">每周</option>
                <option value="monthly">每月</option>
              </select>
            </div>
            <div class="form-field">
              <div class="kv-label">状态</div>
              <select v-model="editClForm.is_active" class="kv-input">
                <option :value="true">启用</option>
                <option :value="false">停用</option>
              </select>
            </div>
            <div class="form-field">
              <div class="kv-label">描述</div>
              <textarea v-model="editClForm.description" class="kv-input" rows="2"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" @click="editClDialogVisible = false">取消</button>
          <button class="btn btn-primary" :disabled="saving" @click="saveEditChecklist">{{ saving ? '保存中...' : '保存' }}</button>
        </div>
      </div>
    </div>

    <!-- ─── 添加巡检项弹窗 ─── -->
    <div v-if="itemDialogVisible" class="modal-mask" @click.self="itemDialogVisible = false">
      <div class="modal-box" style="width:400px;">
        <div class="modal-header">
          添加巡检项目
          <span class="modal-close" @click="itemDialogVisible = false">✕</span>
        </div>
        <div class="modal-body">
          <div style="display:flex;flex-direction:column;gap:12px;">
            <div class="form-field">
              <div class="kv-label">项目名称 *</div>
              <input v-model="itemForm.item_name" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">检验标准</div>
              <input v-model="itemForm.item_standard" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">排序</div>
              <input v-model.number="itemForm.sort_order" type="number" class="kv-input" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" @click="itemDialogVisible = false">取消</button>
          <button class="btn btn-primary" :disabled="saving" @click="saveItem">{{ saving ? '保存中...' : '保存' }}</button>
        </div>
      </div>
    </div>

    <!-- ─── 开始巡检弹窗 ─── -->
    <div v-if="inspectDialogVisible" class="modal-mask" @click.self="inspectDialogVisible = false">
      <div class="modal-box" style="width:560px;">
        <div class="modal-header">
          开始巡检 — {{ selectedCl && selectedCl.name }}
          <span class="modal-close" @click="inspectDialogVisible = false">✕</span>
        </div>
        <div class="modal-body">
          <!-- 基本信息 -->
          <div class="grid-2" style="gap:12px;margin-bottom:16px;">
            <div class="form-field">
              <div class="kv-label">巡检人 *</div>
              <input v-model="inspectForm.inspector" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">巡检时间 *</div>
              <input v-model="inspectForm.inspect_time" type="datetime-local" class="kv-input" />
            </div>
            <div class="form-field">
              <div class="kv-label">状态</div>
              <select v-model="inspectForm.status" class="kv-input">
                <option value="ok">正常</option>
                <option value="issue">有问题</option>
                <option value="urgent">紧急</option>
              </select>
            </div>
            <div class="form-field">
              <div class="kv-label">总体结果</div>
              <select v-model="inspectForm.overall_result" class="kv-input">
                <option value="">待定</option>
                <option value="pass">通过</option>
                <option value="fail">不通过</option>
              </select>
            </div>
            <div class="form-field" style="grid-column:1/-1;">
              <div class="kv-label">备注</div>
              <textarea v-model="inspectForm.remark" class="kv-input" rows="2"></textarea>
            </div>
          </div>

          <!-- 巡检项填写 -->
          <div class="sec-title" style="font-size:12px;color:#8b949e;margin-bottom:8px;">巡检项目记录</div>
          <div v-if="!clItems.length" class="td-muted" style="font-size:12px;padding:8px 0;">该模板暂无巡检项目</div>
          <div v-for="(item, idx) in inspectDetails" :key="idx" class="inspect-item-row">
            <div class="inspect-item-name">
              <span class="td-muted" style="font-size:10px;">{{ item.sort_order }}</span>
              {{ item.item_name }}
              <span v-if="item.item_standard" class="td-muted" style="font-size:10px;">（{{ item.item_standard }}）</span>
            </div>
            <div class="inspect-item-inputs">
              <input v-model="item.actual_value" class="kv-input" style="width:120px;" placeholder="实测值" />
              <label class="ok-label">
                <input type="checkbox" v-model="item.is_ok" />
                <span :style="{ color: item.is_ok ? '#28a745' : '#da3633' }">{{ item.is_ok ? '正常' : '异常' }}</span>
              </label>
              <input v-model="item.notes" class="kv-input" style="width:120px;" placeholder="备注" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" @click="inspectDialogVisible = false">取消</button>
          <button class="btn btn-primary" :disabled="saving" @click="saveInspect">{{ saving ? '提交中...' : '提交巡检' }}</button>
        </div>
      </div>
    </div>

    <!-- ─── 巡检明细弹窗 ─── -->
    <div v-if="detailDialogVisible" class="modal-mask" @click.self="detailDialogVisible = false">
      <div class="modal-box" style="width:560px;">
        <div class="modal-header">
          巡检明细
          <span class="modal-close" @click="detailDialogVisible = false">✕</span>
        </div>
        <div class="modal-body">
          <table class="data-table">
            <thead>
              <tr>
                <th>项目名称</th>
                <th>实测值</th>
                <th>是否正常</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="d in recordDetails" :key="d.id">
                <td>{{ d.item_name }}</td>
                <td class="td-num">{{ d.actual_value || '—' }}</td>
                <td>
                  <span :class="['badge', d.is_ok ? 'badge-green' : 'badge-red']">{{ d.is_ok ? '正常' : '异常' }}</span>
                </td>
                <td class="td-muted">{{ d.notes || '—' }}</td>
              </tr>
              <tr v-if="!recordDetails.length">
                <td colspan="4" class="td-muted" style="text-align:center;padding:16px;">暂无明细</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" @click="detailDialogVisible = false">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getChecklists, createChecklist, updateChecklist,
  getChecklistItems, createChecklistItem,
  getInspectionRecords, createInspectionRecord, getInspectionRecordDetails,
} from '@/api'

const PERIOD_MAP = {
  daily:   { label: '每日', badge: 'badge-blue' },
  weekly:  { label: '每周', badge: 'badge-yellow' },
  monthly: { label: '每月', badge: 'badge' },
}

const RECORD_STATUS = {
  ok:     { label: '正常', badge: 'badge-green' },
  issue:  { label: '有问题', badge: 'badge-yellow' },
  urgent: { label: '紧急', badge: 'badge-red' },
}

export default {
  name: 'Inspection',
  data() {
    return {
      checklists: [],
      selectedCl: null,
      clItems: [],
      records: [], recordTotal: 0,
      recordQuery: { page: 1, page_size: 20, status: '', start_date: '', end_date: '' },

      saving: false,

      // 新增模板
      clDialogVisible: false,
      clForm: { name: '', equipment_code: '', equipment_name: '', period: 'daily', description: '' },

      // 编辑模板
      editClDialogVisible: false,
      editClForm: {},

      // 添加巡检项
      itemDialogVisible: false,
      itemForm: { item_name: '', item_standard: '', sort_order: 0 },

      // 开始巡检
      inspectDialogVisible: false,
      inspectForm: { inspector: '', inspect_time: '', status: 'ok', overall_result: '', remark: '' },
      inspectDetails: [],

      // 明细
      detailDialogVisible: false,
      recordDetails: [],
    }
  },
  computed: {
    cl_is_active_badge() {
      return this.selectedCl?.is_active ? 'badge-green' : 'badge-gray'
    },
  },
  created() {
    this.fetchChecklists()
  },
  methods: {
    async fetchChecklists() {
      try {
        const res = await getChecklists()
        this.checklists = res.data || []
      } catch (e) { /* ignore */ }
    },
    async selectChecklist(cl) {
      this.selectedCl = cl
      await Promise.all([this.fetchClItems(), this.fetchRecords()])
    },
    async fetchClItems() {
      if (!this.selectedCl) return
      try {
        const res = await getChecklistItems(this.selectedCl.id)
        this.clItems = res.data || []
      } catch (e) { this.clItems = [] }
    },
    async fetchRecords() {
      if (!this.selectedCl) return
      const params = { checklist_id: this.selectedCl.id, page: this.recordQuery.page, page_size: this.recordQuery.page_size }
      if (this.recordQuery.status) params.status = this.recordQuery.status
      if (this.recordQuery.start_date) params.start_date = this.recordQuery.start_date
      if (this.recordQuery.end_date) params.end_date = this.recordQuery.end_date
      try {
        const res = await getInspectionRecords(params)
        this.records = res.data.items || []
        this.recordTotal = res.data.total || 0
      } catch (e) { this.records = []; this.recordTotal = 0 }
    },

    // ── 模板 ──────────────────────────────────────
    openChecklistDialog() {
      this.clForm = { name: '', equipment_code: '', equipment_name: '', period: 'daily', description: '' }
      this.clDialogVisible = true
    },
    async saveChecklist() {
      if (!this.clForm.name) { this.$message.error('模板名称不能为空'); return }
      this.saving = true
      try {
        await createChecklist(this.clForm)
        this.$message.success('创建成功')
        this.clDialogVisible = false
        await this.fetchChecklists()
      } finally { this.saving = false }
    },
    openEditChecklistDialog() {
      this.editClForm = { ...this.selectedCl }
      this.editClDialogVisible = true
    },
    async saveEditChecklist() {
      if (!this.editClForm.name) { this.$message.error('模板名称不能为空'); return }
      this.saving = true
      try {
        await updateChecklist(this.selectedCl.id, this.editClForm)
        this.$message.success('更新成功')
        this.editClDialogVisible = false
        await this.fetchChecklists()
        // refresh selectedCl
        const updated = this.checklists.find(c => c.id === this.selectedCl.id)
        if (updated) this.selectedCl = updated
      } finally { this.saving = false }
    },

    // ── 巡检项 ────────────────────────────────────
    openItemDialog() {
      this.itemForm = { item_name: '', item_standard: '', sort_order: this.clItems.length }
      this.itemDialogVisible = true
    },
    async saveItem() {
      if (!this.itemForm.item_name) { this.$message.error('项目名称不能为空'); return }
      this.saving = true
      try {
        await createChecklistItem(this.selectedCl.id, this.itemForm)
        this.$message.success('添加成功')
        this.itemDialogVisible = false
        await this.fetchClItems()
      } finally { this.saving = false }
    },

    // ── 开始巡检 ──────────────────────────────────
    openInspectDialog() {
      const now = new Date()
      const pad = n => String(n).padStart(2, '0')
      const localDT = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`
      this.inspectForm = { inspector: '', inspect_time: localDT, status: 'ok', overall_result: '', remark: '' }
      this.inspectDetails = this.clItems.map(item => ({
        checklist_item_id: item.id,
        item_name: item.item_name,
        item_standard: item.item_standard,
        sort_order: item.sort_order,
        actual_value: '',
        is_ok: true,
        notes: '',
      }))
      this.inspectDialogVisible = true
    },
    async saveInspect() {
      if (!this.inspectForm.inspector) { this.$message.error('巡检人不能为空'); return }
      if (!this.inspectForm.inspect_time) { this.$message.error('巡检时间不能为空'); return }
      this.saving = true
      try {
        const details = this.inspectDetails.map(d => ({
          checklist_item_id: d.checklist_item_id,
          item_name: d.item_name,
          actual_value: d.actual_value || null,
          is_ok: d.is_ok,
          notes: d.notes || null,
        }))
        await createInspectionRecord({
          checklist_id: this.selectedCl.id,
          inspector: this.inspectForm.inspector,
          inspect_time: this.inspectForm.inspect_time,
          status: this.inspectForm.status,
          overall_result: this.inspectForm.overall_result || null,
          remark: this.inspectForm.remark || null,
          details,
        })
        this.$message.success('巡检提交成功')
        this.inspectDialogVisible = false
        await this.fetchRecords()
      } finally { this.saving = false }
    },

    // ── 查看明细 ──────────────────────────────────
    async viewDetails(record) {
      try {
        const res = await getInspectionRecordDetails(record.id)
        this.recordDetails = res.data || []
        this.detailDialogVisible = true
      } catch (e) { this.$message.error('获取明细失败') }
    },

    // ── 工具方法 ──────────────────────────────────
    fmtTime(t) { return t ? t.slice(0, 16).replace('T', ' ') : '—' },
    periodLabel(p) { return PERIOD_MAP[p]?.label || p },
    periodBadge(p) { return PERIOD_MAP[p]?.badge || 'badge-gray' },
    recordStatusLabel(s) { return RECORD_STATUS[s]?.label || s },
    recordStatusBadge(s) { return RECORD_STATUS[s]?.badge || 'badge-gray' },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables';

.insp-layout {
  display: flex;
  gap: 14px;
  height: 100%;
  overflow: hidden;
}

.insp-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: $bg-card;
  border: 1px solid $border;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: $sms-highlight;
  border-bottom: 1px solid $border;
  background: $bg-panel;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-btn {
  cursor: pointer;
  color: $sms-highlight;
  font-size: 16px;
  line-height: 1;
  &:hover { opacity: .7; }
}

.cl-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: $border transparent;
}

.cl-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba($border, .5);
  transition: background .12s;
  &:hover { background: rgba(255,255,255,.03); }
  &.active { background: rgba(0,200,255,.08); border-left: 3px solid $sms-highlight; }
}

.cl-name { font-size: 12px; color: $text-primary; margin-bottom: 4px; }
.cl-meta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cl-empty { padding: 20px; text-align: center; font-size: 12px; color: $text-muted; }

.insp-main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: $border transparent;
}

.empty-tip {
  padding: 40px;
  text-align: center;
  color: $text-muted;
  font-size: 13px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }

.inspect-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba($border, .4);
  &:last-child { border-bottom: none; }
}
.inspect-item-name {
  flex: 1;
  font-size: 12px;
  color: $text-primary;
}
.inspect-item-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ok-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.sec-title { font-size: 11px; color: $text-muted; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.action-link { color: $sms-highlight; cursor: pointer; font-size: 12px; margin-right: 8px; &:hover { text-decoration: underline; } }
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal-box { background: $bg-card; border: 1px solid $border; border-radius: 6px; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: $bg-panel; border-bottom: 1px solid $border; font-size: 13px; font-weight: 600; color: $sms-highlight; .modal-close { cursor: pointer; color: $text-muted; &:hover { color: $text-primary; } } }
.modal-body { padding: 16px; overflow-y: auto; }
.modal-footer { padding: 10px 16px; background: $bg-panel; border-top: 1px solid $border; display: flex; justify-content: flex-end; gap: 10px; }
</style>
