/* DeltaForce Price Tracker UI Styles (external, optimized) */

:root{
  --dfp-card-bg: rgba(255,255,255,0.9);
  --dfp-border:  rgba(17,24,39,0.08);
  --dfp-grid:    rgba(17,24,39,0.12);
  --dfp-text:    #111827;
  --dfp-chip-bg: #ffffff;
  --dfp-chip-bd: rgba(17,24,39,.12);
  --dfp-chip-x:  #ef4444;

  --dfp-menu-mask: rgba(0,0,0,.35);
  --dfp-menu-bg:   rgba(255,255,255,0.98);
  --dfp-menu-bd:   rgba(17,24,39,.08);
  --dfp-group-head:#f3f4f6;
  --dfp-item-on:   rgba(59,130,246,.12);

  --dfp-ac-bg:     var(--dfp-card-bg);
  --dfp-ac-bd:     var(--dfp-border);
  --dfp-ac-text:   var(--dfp-text);
  --dfp-ac-hover:  rgba(0,0,0,.05);

  /* 统一层级（根据主题侧边栏层级可再微调） */
  --dfp-z-topbar: 20;   /* 顶部工具栏整体：压过图表即可 */
  --dfp-z-ac:     30;   /* 工具栏内部：联想下拉高于其它控件 */
  --dfp-z-drawer: 1200; /* 本插件抽屉：高于表格/内容，通常低于站点侧边栏(1300+) */
}
.dark:root{
  --dfp-card-bg: rgba(17,24,39,0.8);
  --dfp-border:  rgba(255,255,255,0.12);
  --dfp-grid:    rgba(255,255,255,0.16);
  --dfp-text:    #e5e7eb;
  --dfp-chip-bg: #111827;
  --dfp-chip-bd: rgba(255,255,255,.14);
  --dfp-chip-x:  #f87171;

  --dfp-menu-mask: rgba(0,0,0,.6);
  --dfp-menu-bg:   rgba(17,24,39,0.98);
  --dfp-menu-bd:   rgba(255,255,255,.12);
  --dfp-group-head:#1f2937;
  --dfp-item-on:   rgba(59,130,246,.18);

  --dfp-ac-hover:  rgba(255,255,255,.06);
}

/* 卡片与控件基础样式 */
.dfp-card{
  border:1px solid var(--dfp-border);
  background:var(--dfp-card-bg);
  border-radius:12px;
  padding:14px;
}
.dfp-blur{ backdrop-filter:saturate(140%) blur(4px); }

.dfp-input, .dfp-select{
  appearance:none;
  border:1px solid var(--dfp-border);
  background:var(--dfp-card-bg);
  color:var(--dfp-text);
  border-radius:10px;
  padding:10px 12px;
}
.dfp-input::placeholder{ color:#9ca3af; }
.dark .dfp-input::placeholder{ color:#9ca3af; }

.dfp-btn{
  border:1px solid var(--dfp-border);
  border-radius:10px;
  padding:10px 14px;
  font-weight:500;
  background:transparent;
  color:var(--dfp-text);
}
.dfp-btn-ghost:hover{ background:rgba(0,0,0,.04); }
.dark .dfp-btn-ghost:hover{ background:rgba(255,255,255,.06); }

.dfp-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--dfp-chip-bd);
  background:var(--dfp-chip-bg); color:var(--dfp-text);
  border-radius:999px; padding:.25rem .6rem; font-size:.875rem; line-height:1.25rem;
}
.dfp-chip-x{
  border:none; background:transparent; color:var(--dfp-chip-x);
  font-size:1rem; line-height:1; cursor:pointer;
}

/* 顶部工具栏：成为独立堆叠上下文，避免被图表的 backdrop/filter 影响 */
.dfp-topbar{
  position: relative;
  z-index: var(--dfp-z-topbar);
  isolation: isolate;
}

/* 抽屉菜单 */
.dfp-menu{
  position:fixed; inset:0;
  z-index: var(--dfp-z-drawer);
}
.dfp-menu.hidden{ display:none; }
.dfp-menu-mask{
  position:absolute; inset:0;
  background:var(--dfp-menu-mask);
  z-index:0;
}
.dfp-menu-panel{
  position:absolute; top:0; right:0; height:100%; width:min(92vw, 420px);
  background:var(--dfp-menu-bg);
  border-left:1px solid var(--dfp-menu-bd);
  display:flex; flex-direction:column;
  box-shadow:-8px 0 24px rgba(0,0,0,.15);
  z-index:1; /* 面板盖在遮罩之上 */
}
.dfp-menu-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--dfp-menu-bd);
}
.dfp-menu-title{ font-weight:700; color:var(--dfp-text); font-size:16px; }
.dfp-menu-close{
  border:none; background:transparent; color:var(--dfp-text);
  font-size:20px; cursor:pointer; line-height:1;
}
.dfp-menu-tools{
  padding:12px 14px; display:flex; flex-direction:column; gap:10px;
  border-bottom:1px solid var(--dfp-menu-bd);
}
.dfp-alpha{ display:flex; flex-wrap:wrap; gap:6px; }
.dfp-alpha-btn{
  border:1px solid var(--dfp-menu-bd); background:transparent; color:var(--dfp-text);
  padding:6px 8px; border-radius:8px; font-weight:500; cursor:pointer;
}
.dfp-alpha-btn:hover{ background:rgba(0,0,0,.04); }
.dark .dfp-alpha-btn:hover{ background:rgba(255,255,255,.06); }

.dfp-menu-body{ flex:1; overflow:auto; padding:8px 0; }
.dfp-group{ padding-bottom:6px; }
.dfp-group-head{
  position:sticky; top:0; z-index:1; padding:6px 14px;
  font-size:12px; color:#6b7280; background:var(--dfp-group-head);
  border-bottom:1px solid var(--dfp-menu-bd);
}
.dfp-group-list{ list-style:none; margin:0; padding:0; }
.dfp-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border-bottom:1px dashed var(--dfp-menu-bd);
}
.dfp-item[data-on="1"]{ background:var(--dfp-item-on); }
.dfp-item-name{ color:var(--dfp-text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dfp-item-toggle{
  border:1px solid var(--dfp-menu-bd); background:transparent; color:var(--dfp-text);
  border-radius:8px; padding:4px 8px; line-height:1; cursor:pointer; font-weight:700;
}
.dfp-menu-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border-top:1px solid var(--dfp-menu-bd);
  color:#6b7280;
}
.dfp-foot-actions{ display:flex; gap:8px; }
.dfp-foot-tip{ font-size:12px; }

/* 搜索联想下拉（在工具栏上方显示；层级跟随变量） */
.dfp-ac{
  position:absolute;
  left:0;
  right:140px;          /* 保留“选择物品”按钮的空间；小屏在下面媒体查询覆盖 */
  top:100%;
  margin-top:6px;
  background:var(--dfp-ac-bg);
  border:1px solid var(--dfp-ac-bd);
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  max-height:300px;
  overflow:auto;
  z-index: var(--dfp-z-ac); /* 由变量统一管理，避免 3000 这类魔法数 */
}
@media (max-width: 640px){ .dfp-ac{ right:0; } }
.dfp-ac.hidden{ display:none; }
.dfp-ac-item{
  padding:10px 12px; cursor:pointer; color:var(--dfp-ac-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dfp-ac-item:hover{ background:var(--dfp-ac-hover); }
.dfp-ac-item.is-active{ background:var(--dfp-ac-hover); font-weight:600; }

/* 先把 Tailwind 的固定高干掉，交给宽高比控制 */
.dfp-cv{
  height: auto !important;
  aspect-ratio: 16 / 9;   /* 桌面端大多够用 */
}

/* 竖屏手机：稍微更高一些但不夸张 */
@media (max-width: 640px) and (orientation: portrait){
  .dfp-cv{
    aspect-ratio: 4 / 3;  /* 比例更接近竖屏观感 */
  }
}

/* 超小屏再紧凑一点 */
@media (max-width: 375px) and (orientation: portrait){
  .dfp-cv{
    aspect-ratio: 1 / 1;  /* 正方一些，避免占满屏 */
  }
}


/* 横屏或桌面：不做任何修改 */