/* ═══ 地坪知识库 Panel 共享样式 ═══
 * 两层设计：
 *   1. 全局覆盖层 — !important 选择器修正所有 panel 内联样式的底色/文字色
 *   2. 工具类层 — panel 内 JS 可直接用 blm-* class 替代内联
 * 随 theme.css 自动适配亮色/暗色 + 暗色断点流畅缩放。
 */

/* ═══════════════════════════════════════════
 * 第一层：全局覆盖（!important 压过内联）
 * 每个 panel 的 overlay 容器统一底色、文字色
 * ═══════════════════════════════════════════ */

/* 所有 panel 弹窗内层容器 — 统一暖纸+深色字 */
[id$="-overlay"] > div,
div[style*="position:fixed"][style*="z-index:9999"] > div[style*="border-radius:14px"],
div[style*="position:fixed"][style*="z-index:9999"] > div[style*="border-radius:16px"],
div[style*="position:fixed"][style*="z-index:99999"] > div {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* 所有白卡片条目 → 玻璃质感 */
div[style*="background:#fff"][style*="border-radius:10px"],
div[style*="background:#fff"][style*="border-radius:8px"] {
  background: var(--card-bg) !important;
  border-color: var(--line-soft) !important;
}

/* 深色弹窗背景遮罩统一 */
div[style*="background:rgba(0,0,0,0.2)"] {
  background: rgba(0,0,0,0.35) !important;
}

/* ═══════════════════════════════════════════
 * 第二层：工具类（逐 panel 迁移用）
 * ═══════════════════════════════════════════ */

/* 容器 */
.blm-panel-bg { background: var(--paper); color: var(--ink); }
.blm-card-item {
  background: var(--card-bg);
  border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}

/* 面板通用容器 */
.blm-overlay-card { background:var(--paper); border-radius:16px; padding:20px; max-width:900px; width:94vw; max-height:90vh; overflow-y:auto; box-shadow:0 8px 48px rgba(0,0,0,0.25); color:var(--ink); animation:scaleIn .25s ease; box-sizing:border-box; }
.blm-section { margin-bottom:12px; }
.blm-section-title { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid var(--line); }
.blm-subtitle { font-size:11px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.blm-text-sm { font-size:10px; color:var(--muted); }
.blm-text-xs { font-size:9px; color:var(--muted); }

/* 布局 */
.blm-row { display:flex; align-items:center; gap:6px; }
.blm-row-between { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.blm-row-wrap { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.blm-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.blm-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.blm-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.blm-flex-1 { flex:1; min-width:0; }
.blm-flex-col { display:flex; flex-direction:column; }
.blm-scroll-y { overflow-y:auto; max-height:85vh; }

/* 按钮 */
.blm-btn { padding:6px 12px; border-radius:6px; border:none; cursor:pointer; font-size:11px; font-weight:600; font-family:inherit; transition:background .2s; }
.blm-btn-primary { background:var(--forest); color:#fff; }
.blm-btn-primary:hover { background:var(--forest-deep); }
.blm-btn-secondary { background:rgba(0,0,0,0.04); border:1px solid var(--line); color:var(--ink); }
.blm-btn-secondary:hover { background:rgba(0,0,0,0.08); }
.blm-btn-sm { padding:4px 8px; font-size:10px; }
.blm-btn-danger { background:#ef4444; color:#fff; }
.blm-btn-danger:hover { background:#dc2626; }
.blm-close-btn {
  background: rgba(0,0,0,0.04); border: none; color: var(--muted);
  border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 13px;
}

/* 输入框 */
.blm-input { width:100%; padding:7px 10px; border:1px solid var(--line-soft); border-radius:6px; font-size:12px; color:var(--ink); background:rgba(255,253,248,0.95); outline:none; box-sizing:border-box; font-family:inherit; }
.blm-input:focus { border-color:var(--forest); box-shadow:0 0 0 2px rgba(31,90,67,0.1); }
.blm-input-sm { padding:4px 8px; font-size:10px; }
.blm-select { width:100%; padding:6px 10px; border:1px solid var(--line-soft); border-radius:6px; font-size:11px; color:var(--ink); background:rgba(255,253,248,0.95); outline:none; box-sizing:border-box; font-family:inherit; }
.blm-textarea { width:100%; padding:7px 10px; border:1px solid var(--line-soft); border-radius:6px; font-size:11px; color:var(--ink); background:rgba(255,253,248,0.95); outline:none; box-sizing:border-box; font-family:inherit; resize:vertical; min-height:60px; }

/* 标签 */
.blm-tag { font-size:9px; padding:2px 8px; border-radius:10px; display:inline-block; }
.blm-tag-green { background:rgba(31,90,67,0.1); color:var(--forest); }
.blm-tag-copper { background:rgba(182,100,60,0.1); color:var(--copper); }
.blm-tag-yellow { background:rgba(245,158,11,0.1); color:#d97706; }

/* 表格 */
.blm-table { width:100%; border-collapse:collapse; }
.blm-table th { background:rgba(0,0,0,0.03); border-bottom:1px solid var(--line); color:var(--ink); padding:8px 10px; font-size:11px; font-weight:600; text-align:left; }
.blm-table td { border-bottom:1px solid rgba(0,0,0,0.04); color:var(--ink); padding:8px 10px; font-size:11px; }
.blm-table tr:hover td { background:rgba(0,0,0,0.02); }

/* 弹窗/覆盖层 */
.blm-overlay { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.35); backdrop-filter:blur(4px); }
.blm-modal { background:var(--paper); border-radius:16px; box-shadow:0 8px 48px rgba(0,0,0,0.25); color:var(--ink); }
.blm-modal-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.blm-modal-body { padding:14px 18px; }

/* 移动端适配：<480px 时弹窗面板全屏 */
@media (max-width: 480px) {
  .blm-modal, 
  div[style*="max-width:"]:has(> .blm-overlay),
  .settings-modal { width:100vw !important; max-width:100vw !important; height:100vh !important; max-height:100vh !important; border-radius:0 !important; }
  .blm-overlay { align-items:flex-end; }
  .blm-overlay > div[style*="border-radius"]:not([style*="max-width:680px"]) { width:100vw !important; max-width:100vw !important; height:100vh !important; max-height:100vh !important; border-radius:0 !important; }
}

/* 颜色工具 */
.blm-text-forest { color:var(--forest); }
.blm-text-copper { color:var(--copper); }
.blm-text-muted { color:var(--muted); }
.blm-bg-forest { background:var(--forest); color:#fff; }
.blm-bg-copper { background:var(--copper); color:#fff; }
.blm-bg-paper { background:var(--paper); }
.blm-border-soft { border:1px solid var(--line-soft); }

/* 响应式：窄屏单列 */
.blm-tag-green { font-size: 9px; background: rgba(31,90,67,0.1); color: var(--forest); padding: 2px 8px; border-radius: 10px; }
.blm-tag-blue { font-size: 9px; background: var(--copper-soft); color: var(--copper); padding: 2px 8px; border-radius: 10px; }
.blm-tag-copper { font-size: 9px; background: var(--copper-soft); color: var(--copper); padding: 2px 8px; border-radius: 10px; }
.blm-tag-yellow { font-size: 9px; background: var(--warn-soft); color: var(--warn); padding: 2px 8px; border-radius: 10px; }
.blm-tag-ok { font-size: 9px; background: var(--ok-soft); color: var(--ok); padding: 2px 8px; border-radius: 10px; }
.blm-tag-danger { font-size: 9px; background: var(--danger-soft); color: var(--danger); padding: 2px 8px; border-radius: 10px; }

/* 文本 */
.blm-text-title { font-size: 15px; font-weight: 700; }
.blm-text-label { font-size: 12px; font-weight: 600; }
.blm-text-meta { font-size: 10px; color: var(--muted); }
.blm-flex-row { display: flex; justify-content: space-between; align-items: center; }
.blm-flex-gap { display: flex; gap: 8px; margin-bottom: 10px; }
.blm-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.blm-panel-scroll { max-height: 85vh; overflow-y: auto; }

/* ═══════════════════════════════════════════
 * 响应式：窄屏单列
 * ═══════════════════════════════════════════ */
@media (max-width: 480px) {
  /* 所有 panel 弹窗容器窄屏适配 */
  [id$="-overlay"] > div,
  div[style*="position:fixed"][style*="z-index:9999"] > div {
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 12px !important;
  }

  /* 双列变单列 */
  div[style*="display:flex"][style*="gap"],
  .blm-flex-gap,
  div[style*="display: grid"][style*="grid-template-columns"] {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  /* 按钮宽度自适应 */
  [id$="-overlay"] button,
  [id$="-overlay"] a[style*="flex:1"] {
    flex: none !important;
    width: 100% !important;
  }

  /* 最小字号提升 */
  [id$="-overlay"] {
    font-size: 12px !important;
  }
  [id$="-overlay"] div[style*="font-size:9px"],
  [id$="-overlay"] div[style*="font-size:10px"],
  [id$="-overlay"] span[style*="font-size:9px"] {
    font-size: 11px !important;
  }

  /* 横向排列的 tag 行换行 */
  [id$="-overlay"] div[style*="display:flex"][style*="flex-wrap"] {
    gap: 4px !important;
  }
}

@media (max-width: 360px) {
  [id$="-overlay"] > div {
    padding: 10px !important;
    border-radius: 10px !important;
  }
}