/* ==========================================================================
   达播工作台 — overlays.css
   抽屉 / 弹窗 / 提示 / 表单布局 / 工具栏 / 提示条
   ========================================================================== */

/* ---- 抽屉 ---- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-gray-900) 40%, transparent);
  z-index: var(--z-modal);
  animation: fade-in var(--motion-fast) var(--motion-ease-standard);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 92vw;
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  animation: slide-in-right var(--motion-base) var(--motion-ease-standard);
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
  flex-shrink: 0;
}

.drawer__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  flex-shrink: 0;
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- 弹窗 ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-gray-900) 40%, transparent);
  z-index: var(--z-modal);
  padding: var(--space-4);
  animation: fade-in var(--motion-fast) var(--motion-ease-standard);
}

.modal {
  /* 默认宽度 720 → 880（乐哥 2026-09-13：「宽一点、高一点，不用那么小家子气」）。
     720px 下多列表单/明细要横向滚动、字段被挤成两行，观感局促；
     880px 在 1440 宽屏上仍留足两侧留白，且能容纳 3~4 列并排字段。
     ⚠️ 各处调用若显式传了 width（如 inventory 的 720）会覆盖本默认值，需同步改。 */
  width: 880px;
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised);
  animation: modal-in var(--motion-base) var(--motion-ease-standard);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.modal__body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
  /* 最小高度 360 → 420（2026-09-13）：内容少的弹窗也不至于「扁扁一条」。
     ⚠️ 确认框与内容自适应的弹窗会显式传 bodyMinHeight:0 覆盖本值（见 ui.js openModal），不受影响。 */
  min-height: 420px;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  flex-shrink: 0;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 提示 toast ---- */
/* ── 行内「更多」菜单（2026-09-14 新增，配合 UI.rowMenu）──────────────────────────────
   用途：操作列动作多、表格宽度紧张时，把次要动作收进「⋯」菜单。
   与全站浮层的层级关系：dropdown(1000) < modal(1200) < toast(1300)
     —— 菜单是最轻的浮层，不该盖住弹窗。
   ⚠️ `position: fixed`（不是 absolute）：组件把它挂在 body 上、用 JS 算屏幕坐标，
      所以这里必须是相对视口的定位，否则坐标会错。
   ⚠️ 无 emoji、用统一描边图标；颜色全部走语义 token。 */
.row-menu {
  position: fixed;
  z-index: var(--z-dropdown);
  min-width: 136px;
  padding: var(--space-1) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.row-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-fg);
  text-align: left;
  white-space: nowrap;
}
.row-menu__item:hover:not(:disabled) { background: var(--color-surface-2); }
.row-menu__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* 禁用态：不只是变灰，还给出原因（title 里写清"需先确认"这类前置条件） */
.row-menu__item:disabled { color: var(--color-disabled); cursor: not-allowed; }
.row-menu__item svg { flex: none; color: var(--color-muted); }
.row-menu__item:disabled svg { color: var(--color-disabled); }
/* 危险动作（删除）：红色区分，避免与"编辑"误点 */
.row-menu__item--danger,
.row-menu__item--danger svg { color: var(--color-danger); }

.toast-root {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-gray-900);
  color: var(--color-gray-0);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-raised);
  animation: toast-in var(--motion-base) var(--motion-ease-standard);
}

.toast--success { background: var(--color-success); color: var(--color-gray-0); }
.toast--error { background: var(--color-danger); color: var(--color-gray-0); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 表单布局 ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-grid > * {
  min-width: 0; /* 防止长内容（如地点地址）撑宽 grid 列 */
}

/* 表单网格里的控件默认撑满列宽（输入框/下拉/文本域），避免左右留白 */
.form-grid .input,
.form-grid .select,
.form-grid .textarea {
  width: 100%;
}

.form-grid .span-2 {
  grid-column: span 2;
}

/* 三等宽（替代 2fr 1fr 1.4fr / 1fr 1fr 1fr / 220px 1fr 1fr 1fr 混用） */
.form-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 开关+输入一行（替代 auto 1fr / auto 1fr 1fr） */
.form-grid--auto {
  grid-template-columns: auto 1fr;
}

/* 基本信息卡片：图片居左 + 右侧字段网格（货品/套餐新增编辑页） */
.sf-basic {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}
.sf-basic__media {
  flex: 0 0 160px;
}
.sf-basic__main {
  flex: 1;
  min-width: 0;
}

/* 移动端：表单多列降为单列 */
@media (max-width: 768px) {
  .form-grid,
  .form-grid--3,
  .form-grid--auto {
    grid-template-columns: 1fr;
  }
  .form-grid .span-2 {
    grid-column: span 1;
  }
  .sf-basic {
    flex-direction: column;
  }
  .sf-basic__media {
    flex: 0 0 auto;
  }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---- 工具栏 ---- */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* 工具栏与列表「合并为同一模块」（2026-09-14 乐哥：「微信小店…他们和列表都属于同一个模块」）
   ============================================================================
   ⛔ 先说被否决的方案（务必不要改回去）：**用 JS 把工具栏搬进卡片**。
      实测会在 100ms 后**丢失控件** —— 时间线铁证（华大对账）：
        73.5s 工具栏在卡内 ✓ → 73.6s 工具栏消失 ✗
      根因：工具栏进卡后，卡片区域的任何局部重渲染都会连它一起抹掉，
      而页面只在整页渲染时创建工具栏 → 不可自愈。详见 app.js 的说明。

   ✅ 现行：**纯 CSS 视觉合并**，零 DOM 操作。
      用 `:has(+ .card)` 精准选中「后面紧邻卡片」的工具栏，把两者拼成一张卡：
        · 工具栏：白底 + 上圆角 + **无下边框**
        · 紧邻的卡片：**无上边框** + 下圆角
      → 视觉上是一个从筛选区连贯到表格的整体卡片，与微信小店的模块感一致。

   ⚠️ 为什么不用纯 CSS 的 `:has(+ .card)`：**漏得多**。实测只能覆盖 3~4 页，漏掉两类：
      · 卡片被包在容器里（`.toolbar → #cs-body → .card`）
      · 中间隔着 **0px 空容器**（`.kw-scope` / `.batch-bar`，不可见但会打断相邻选择器）
      → 所以改由 JS 用**实测垂直间距**判断（见 app.js 的 markToolbarJoin），CSS 只负责表现。
   ⚠️ JS **只加类、绝不搬 DOM**：搬 DOM 会让工具栏随卡片的局部重渲染一起被销毁
      （实测 100ms 后控件消失，不可自愈）。
   ⚠️ 中间隔着**实质内容**的页面（如达人结算：警示条 37px + KPI 137px + 口径 38px）
      **有意不合并** —— 工具栏在那些"页面级概览"之上，硬拼进表格卡会切断概览的从属关系。
      判据是几何量（间距 > 24px 就不合并），不是结构量。 */
.toolbar--join-card {
  margin-bottom: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;

  /* ── 并成一排（2026-09-14 乐哥选 A 方案）──────────────────────────────
     背景：合并前表格上方堆了**两排筛选控件**（微信小店只有一排）——
       第1排 .toolbar : 搜索 + 下拉筛选
       第2排 .table-toolbar : 分段 + 共N条/每页
     两排都是筛选控件、视觉重量相近 → 看着重复、层级不清（乐哥：「怎么感觉怪怪的」）。
     做法：JS 把第2排的分段与右侧工具搬进本容器（见 app.js），此处负责排布。

     ⚠️ 用 `flex-wrap: wrap` 而**不是 nowrap**：实测订单明细要 1658px 而只有 1296px
        （它第1排本就有 8 个筛选器），nowrap 会溢出。wrap 让它在同一容器内折行，
        仍是一个连续工具栏，比"两个分离工具栏"好，且绝不溢出。
     ⚠️ 统一控件高度（原 44/42/30 三种混排 → 边缘参差）：
        下拉/输入/按钮 34px、分段项 30px（分段是"标签"，略矮于输入框才协调）。
     ⚠️ 不要给分段加撑满高度的规则 —— 它内部有 padding，撑高会把文字压在中线以下。 */
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
.toolbar--join-card > .pill-filter,
.toolbar--join-card > .seg {
  height: auto;
  align-self: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.toolbar--join-card > .table-toolbar__right {
  margin-left: auto;      /* 右侧工具组推到最右 */
  align-self: center;
}
/* 控件高度统一 */
.toolbar--join-card > .select,
.toolbar--join-card > .input,
.toolbar--join-card > .input--search,
.toolbar--join-card > .btn {
  height: 34px;
  min-height: 34px;
}
.toolbar--join-card > .input--search > .input { height: 34px; }
/* ⚠️ 日期选择器（月份）也要一起降（2026-09-14 乐哥：「日期选择的控件尺寸和其他的不对」）
   它是 `.mp__trigger`、被包在 `<span class="mp-host">` 里，**不是**工具栏的直接子元素，
   所以上面那条 `.toolbar--join-card > .select` 覆盖不到它 —— 实测它仍是 44px，
   与同排的 34px 下拉并排就"高出一截"。

   ⚠️⚠️ 必须用**纯后代选择器**，不能写 `.mp-host > .mp__trigger`（实测踩坑）：
      真实 DOM 层级是 `SPAN.mp-host > DIV.mp > BUTTON.mp__trigger` ——
      `.mp__trigger` 是 `.mp-host` 的**孙子**（中间还夹着一层 `DIV.mp`）。
      第一版写了 `>`，选择器**一条都没匹配上**，改了半天没反应
      （排查方式：在页面里遍历 document.styleSheets，用 el.matches(selector) 逐条验证）。
      → 教训：**不要凭想象写选择器的层级**，尤其本项目 DOM 层级不统一；
        能用后代选择器就别用子选择器。 */
.toolbar--join-card .mp__trigger {
  height: 34px;
  min-height: 34px;
}
/* 紧随的卡片去掉上边框与上圆角，与工具栏拼成一体 */
.toolbar--join-target {
  border-top: 0 !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
/* 合并后卡内首个 .table-toolbar 不需要顶部分隔（工具栏与它本属同一控制区） */
.toolbar--join-target > .table-toolbar:first-child {
  border-top: 0;
}

.toolbar__spacer {
  flex: 1;
}

/* 工具栏右侧分组（2026-09-20 补 — 财务模块需要"左侧筛选 + 右侧操作"的工具栏）。
   ⚠️ 为什么在 overlays.css 补而不是 pages-finance.css：`.toolbar` 是本文件里的
      **标准组件**，给它加一个通用子元素应当加在这里，其它页面才能复用。
      （原来只有 `.toolbar__spacer`，用它把右侧内容顶过去、但分组本身没有容器，
        多控件时得各自写 inline style。）
   ⚠️ `margin-left: auto` 与 `.toolbar__spacer` 效果等价、二选一即可 ——
      **不要两个都写**（会让间距出现双重推力，窄屏换行时位置变得难以预测）。 */
.toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* ---- 冲突 / 提示条 ---- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.alert--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.alert--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.alert--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}