/* ============================================================
 * modal.css — 弹窗样式（shadcn/ui 风格）
 * ============================================================ */

/* ---------- 弹窗遮罩 ---------- */
.modal-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: hsl(var(--foreground) / 0.5); z-index: 1000;
  align-items: center; justify-content: center;
  overflow-y: auto; padding: 1.5rem;
  animation: fadeIn 0.15s ease;
}
.modal-overlay.show { display: flex; }

/* ---------- 弹窗主体 ---------- */
.modal-box {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 95%; max-width: 960px; max-height: none;
  padding: 1.25rem;
  animation: slideUp 0.2s ease;
  margin: auto;
}

/* ---------- 弹窗头部 ---------- */
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
}
.modal-header h3 {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  color: hsl(var(--foreground));
}

/* ---------- 弹窗关闭按钮 ---------- */
.modal-close {
  width: 2rem; height: 2rem; border: none; background: transparent;
  font-size: 1.25rem; color: hsl(var(--muted-foreground));
  cursor: pointer; border-radius: calc(var(--radius) - 2px);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.modal-close:hover { background: hsl(var(--accent)); }

/* ---------- 弹窗 Tab 切换 ---------- */
.modal-tabs {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin-bottom: 1rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid hsl(var(--border));
}
.tab-btn, .modal-tab {
  padding: 0.375rem 0.75rem; font-size: var(--fs-sm);
  border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
  background: transparent; color: hsl(var(--muted-foreground));
  cursor: pointer; transition: all 0.15s;
  font-family: var(--font-sans);
}
.tab-btn:hover, .modal-tab:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.tab-btn.active, .modal-tab.active {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}

/* ---------- 弹窗内表单 ---------- */
.modal-box .form-row { margin-bottom: 0.625rem; }
.modal-box .form-row label { min-width: 5rem; }
.modal-box input[type="text"],
.modal-box input[type="number"],
.modal-box select { height: 2.125rem; }

/* ---------- 弹窗内表格 ---------- */
.modal-box table { font-size: var(--fs-xs); }
.modal-box th, .modal-box td { padding: 0.5rem 0.625rem; }

/* ---------- 截图按钮 ---------- */
.btn-snapshot {
  height: 2rem; padding: 0 0.75rem; font-size: var(--fs-xs);
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  background: transparent; color: hsl(var(--foreground));
  cursor: pointer; transition: all 0.15s;
  font-family: var(--font-sans);
}
.btn-snapshot:hover { background: hsl(var(--accent)); }

/* ---------- 对比按钮区 ---------- */
.compare-buttons {
  display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem;
}
.compare-buttons button {
  padding: 0.375rem 0.75rem; font-size: var(--fs-xs);
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--card)); color: hsl(var(--foreground));
  cursor: pointer; transition: all 0.15s;
  font-family: var(--font-sans);
}
.compare-buttons button:hover { background: hsl(var(--accent)); }

/* ---------- 对比结果区 ---------- */
.compare-result {
  margin-top: 1rem; padding: 1rem;
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

/* ---------- Grid 表格（预算对比等） ---------- */
.grid-table { display: grid; gap: 0; font-size: var(--fs-xs); }
.grid-table.header { font-weight: var(--fw-semibold); background: hsl(var(--muted)); border-radius: var(--radius) var(--radius) 0 0; }
.grid-table.header > * { padding: 0.375rem 0.5rem; display: flex; align-items: center; }
.grid-table.row { border-bottom: 1px solid hsl(var(--border)); }
.grid-table.row:last-child { border-bottom: none; }
.grid-table.row > * { padding: 0.375rem 0.5rem; display: flex; align-items: center; }

/* ---------- Flex 行 ---------- */
.flex-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-sm); padding: 0.25rem 0;
}

/* ---------- PR 卡片 ---------- */
.pr-card-item {
  padding: 0.75rem; border: 1px solid hsl(var(--border));
  border-radius: var(--radius); background: hsl(var(--card));
  text-align: center;
}
.pr-label { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); }
.pr-value { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

/* ---------- 节日栏头 ---------- */
.festival-bar { display: flex; gap: 0; margin-top: 0.5rem; }
.festival-bar .label-col {
  width: 2rem; min-width: 2rem; display: flex; flex-direction: column;
  border-radius: var(--radius) 0 0 var(--radius); overflow: hidden;
}
.festival-bar .label-col div {
  height: 1.5rem; background: hsl(var(--muted)); display: flex;
  align-items: center; justify-content: flex-end; padding-right: 0.25rem;
  font-size: 0.625rem; border-bottom: 1px solid hsl(var(--border));
}
.festival-bar .time-col { flex: 1; display: flex; flex-direction: column; }
.festival-bar .time-col .festival-row,
.festival-bar .time-col .schedule-row,
.festival-bar .time-col .event-row,
.festival-bar .time-col .activity-row {
  height: 1.5rem; background: hsl(var(--muted)); position: relative;
  border-bottom: 1px solid hsl(var(--border)); overflow: hidden;
}
.festival-bar .time-col .event-row,
.festival-bar .time-col .activity-row {
  border-bottom: none; border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- 结案简述（黄色警告） ---------- */
.conclusion-note {
  margin-top: 0.375rem; padding: 0.5rem;
  background: hsl(48 96% 89%); border: 1px solid hsl(48 96% 75%);
  border-radius: calc(var(--radius) - 2px);
  font-size: var(--fs-sm); color: hsl(30 80% 30%);
}

/* ---------- 详情照片行 ---------- */
.detail-photo-row {
  display: flex; gap: 0.5rem; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 0.25rem; margin-bottom: 0.75rem;
}
.detail-photo-row img {
  height: 120px; border-radius: var(--radius); object-fit: cover;
  cursor: zoom-in; transition: transform 0.15s;
}
.detail-photo-row img:hover { transform: scale(1.02); }

/* ---------- 费用布局 ---------- */
#feeDetailArea { margin-top: 0.75rem; }

/* ---------- 横幅（数据更新提示等） ---------- */
.alert-banner {
  padding: 0.5rem 1rem; border-radius: var(--radius);
  font-size: var(--fs-sm); margin-bottom: 0.75rem;
  border: 1px solid;
}
.alert-info {
  background: hsl(210 40% 96%); border-color: hsl(210 40% 85%);
  color: hsl(var(--foreground));
}

/* ---------- 模态框内容区通用 ---------- */
.modal-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 1rem;
}
.modal-card-header {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  margin-bottom: 0.5rem; color: hsl(var(--foreground));
}
.modal-card-body { flex: 1; }

/* ---------- Grid 列宽辅助 ---------- */
.cols-2equal { grid-template-columns: 1fr 1fr; }
.cols-subevent { grid-template-columns: 0.8fr 1.2fr 1.5fr 0.5fr 1fr 1fr; }
.cols-info { grid-template-columns: 0.6fr 1.5fr 1fr 1fr 1fr 1fr 1fr; }

.detail-section-title {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  margin: 1rem 0 0.5rem; color: hsl(var(--foreground));
}

/* 管理弹窗内 form-row 增强对齐 */
#manageModal .form-row {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
#manageModal .form-row > label {
  min-width: 5rem; text-align: right;
}
#manageModal input[type="text"],
#manageModal input[type="number"],
#manageModal select {
  height: 2rem; padding: 0 0.5rem;
}

/* ============================================================
 * 移动端响应式 — 平板 (≤768px)
 * ============================================================ */
@media (max-width: 768px) {

  .modal-overlay { padding: 0.5rem; align-items: flex-start; }

  .modal-box {
    width: 100%; max-width: 100%; border-radius: var(--radius);
    padding: 1rem; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  #detailContent, #compareResult { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .modal-header h3 { font-size: var(--fs-base); }
  .modal-header { margin-bottom: 0.75rem; padding-bottom: 0.5rem; }

  /* Tab 横向滚动 */
  .modal-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 0.125rem; padding-bottom: 0.25rem;
  }
  .tab-btn, .modal-tab { white-space: nowrap; font-size: var(--fs-xs); padding: 0.3rem 0.5rem; }

  /* 对比按钮区 */
  .compare-buttons { gap: 0.25rem; }
  .compare-buttons button { font-size: 0.6875rem; padding: 0.3rem 0.5rem; }

  /* Grid 表格 */
  .grid-table { font-size: 0.6875rem; }
  .grid-table.header > *, .grid-table.row > * { padding: 0.25rem 0.375rem; }

  /* PR 卡片单列 */
  #prDataWrap [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 活动详情列更紧凑 */
  .cols-subevent { grid-template-columns: 0.6fr 1fr 1.2fr 0.4fr 0.8fr 0.8fr !important; }

  /* 详情照片行 */
  .detail-photo-row img { height: 90px; }

  /* 费用布局垂直堆叠 */
  #feeDetailArea [style*="display:flex"] {
    flex-direction: column !important;
  }
  #feeDetailArea [style*="min-width:260px"] { min-width: 100% !important; }

  /* 管理弹窗表单 */
  #manageModal .form-row {
    flex-direction: column; align-items: stretch; gap: 0.25rem;
  }
  #manageModal .form-row > label {
    min-width: auto; text-align: left;
  }
  #manageModal input[type="text"],
  #manageModal input[type="number"],
  #manageModal select,
  #newScheduleModal input[type="text"],
  #newScheduleModal input[type="number"],
  #newScheduleModal select { width: 100% !important; }
}

/* ============================================================
 * 移动端响应式 — 手机 (≤480px)
 * ============================================================ */
@media (max-width: 480px) {

  .modal-overlay { padding: 0; }

  .modal-box {
    border-radius: 0; padding: 0.75rem;
    min-height: 100vh;
  }

  .modal-header h3 { font-size: 0.9375rem; }

  /* Tab 更紧凑 */
  .tab-btn, .modal-tab { font-size: 0.6875rem; padding: 0.25rem 0.4rem; }

  /* 对比按钮全宽 */
  .compare-buttons button { font-size: 0.6875rem; }

  /* Grid 表格 */
  .cols-subevent { grid-template-columns: 0.5fr 0.9fr 1.1fr 0.3fr 0.7fr 0.7fr !important; }

  /* 详情照片更小 */
  .detail-photo-row img { height: 70px; }

  /* 结案简述 */
  .conclusion-note { font-size: var(--fs-xs); }

  /* 管理弹窗 */
  #manageModal .form-row > label { font-size: var(--fs-xs); }
}