/* pages-catalog.css —— S7 报表目录（房费日报 / 交接班报表 / 房型效率 / 订单来源）
 *
 * 命名空间：全部规则以 .pages-report-catalog / .pages-catalog-* 开头，不触碰 styles.css、pages.css、
 * pages-orders.css 的既有类名，可随模块挂载/卸载。
 *
 * 依赖：必须排在 css/pages.css 之后（.pages 定义 --pg-* 品牌变量；本文件同时给 fallback）。
 * 基础控件（.btn / .table / .table-wrap / .empty-state / .callout / .pages-field / .pages-num /
 * .pages-error / .pages-flash / .pages-hint）复用现有视觉，本文件只补目录页布局与状态。
 *
 * 断点：桌面优先（宿主 ≥900px 才挂载）；1100px 以下左目录折到顶部，防止窄预览横向溢出。
 * 视觉基准与 S2-S6 一致：13px 正文、#087c61 主色、#dbe7f2 描边、14px 圆角、等宽数字。
 */

/* ========================================================================== */
/* 1. 变量 / 外壳                                                              */
/* ========================================================================== */
.pages-report-catalog {
  --cat-brand: var(--pg-brand, #087c61);
  --cat-brand-deep: var(--pg-brand-deep, #0b3d66);
  --cat-ink: var(--pg-ink, #193b34);
  --cat-ink-soft: var(--pg-ink-soft, #31546e);
  --cat-muted: var(--pg-muted, #7c9188);
  --cat-line: var(--pg-line, #dbe7f2);
  --cat-line-soft: var(--pg-line-soft, #edf3f9);
  --cat-surface: var(--pg-surface, #ffffff);
  --cat-up: #0b8968;
  --cat-down: #c0392b;
  --cat-flat: #6f8298;
  --cat-up-bg: #e6f5ee;
  --cat-down-bg: #fbeae7;
  --cat-flat-bg: #eef2f7;
  --cat-due: #b5762a;
  --cat-due-bg: #fdf2e2;
  position: relative;
}

.pages-report-catalog *,
.pages-report-catalog *::before,
.pages-report-catalog *::after {
  box-sizing: border-box;
}

/* —— 页头 —— */
.pages-catalog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--cat-surface);
  border: 1px solid var(--cat-line);
  border-radius: 14px;
  box-shadow: 0 5px 20px #37648a10;
}

.pages-catalog-head-main {
  flex: 1 1 480px;
  min-width: 0;
}

.pages-catalog-kicker {
  margin: 0 0 4px;
  color: var(--cat-muted);
  font-size: 11px;
  letter-spacing: .2px;
}

.pages-catalog-title {
  margin: 0 0 7px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--cat-ink);
}

.pages-catalog-desc {
  margin: 0;
  max-width: 92ch;
  color: var(--cat-ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

.pages-catalog-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.pages-catalog-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  border: 1px solid #cfe6db;
  border-radius: 999px;
  background: #f3faf6;
  color: #2f6a55;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* ========================================================================== */
/* 2. 左目录 + 右内容布局                                                      */
/* ========================================================================== */
.pages-catalog-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.pages-catalog-side {
  position: sticky;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 12px;
  background: var(--cat-surface);
  border: 1px solid var(--cat-line);
  border-radius: 14px;
  box-shadow: 0 5px 20px #37648a10;
  scrollbar-width: thin;
}

.pages-catalog-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 2px 8px;
  border-bottom: 1px solid var(--cat-line-soft);
}

.pages-catalog-side-head strong {
  color: var(--cat-ink);
  font-size: 13px;
}

.pages-catalog-side-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: #f1f6f3;
  color: var(--cat-muted);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pages-catalog-group {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cat-line-soft);
}

.pages-catalog-group:last-of-type {
  border-bottom: 0;
}

.pages-catalog-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 3px 0 2px;
  padding: 4px 3px;
  color: var(--cat-ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

.pages-catalog-group-title span {
  color: var(--cat-muted);
  font-weight: 700;
}

.pages-catalog-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 6px 8px 6px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cat-ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pages-catalog-nav-item::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: transparent;
}

.pages-catalog-nav-item:hover {
  background: #f4f9f7;
  color: var(--cat-brand);
}

.pages-catalog-nav-item.is-active {
  background: #e7f5ef;
  color: #06644f;
}

.pages-catalog-nav-item.is-active::before {
  background: var(--cat-brand);
}

.pages-catalog-nav-item:focus-visible {
  outline: 2px solid #087c6155;
  outline-offset: 1px;
}

.pages-catalog-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #f2f7f4;
  color: #5b7f71;
  font-size: 12px;
  font-weight: 800;
}

.pages-catalog-nav-item.is-active .pages-catalog-nav-icon {
  background: #cdeadd;
  color: #06644f;
}

.pages-catalog-nav-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pages-catalog-nav-text strong {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.pages-catalog-nav-text small {
  overflow: hidden;
  color: var(--cat-muted);
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pages-catalog-note {
  margin-top: 4px;
  padding: 10px;
  border: 1px solid #e2eee7;
  border-radius: 9px;
  background: #f8fbf9;
  color: #5f7d6e;
  font-size: 10px;
  line-height: 1.65;
}

.pages-catalog-note strong {
  display: block;
  margin-bottom: 2px;
  color: #416b59;
  font-size: 10px;
}

.pages-catalog-note p {
  margin: 0 0 4px;
}

.pages-catalog-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cat-brand);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.pages-catalog-link:hover {
  text-decoration: underline;
}

.pages-catalog-link:focus-visible {
  outline: 2px solid #087c6155;
  outline-offset: 2px;
}

/* ========================================================================== */
/* 3. 右内容：面板 / 报表头 / 区间工具条                                       */
/* ========================================================================== */
.pages-catalog-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.pages-catalog-panel {
  padding: 0;
  border-color: var(--cat-line);
  border-radius: 14px;
  background: var(--cat-surface);
  box-shadow: 0 5px 20px #37648a10;
}

.pages-catalog-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--cat-line-soft);
}

.pages-catalog-panel-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 420px;
  min-width: 0;
}

.pages-catalog-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #e7f5ef;
  color: #06644f;
  font-size: 13px;
  font-weight: 800;
}

.pages-catalog-panel-title h3 {
  margin: 0 0 3px;
  color: var(--cat-ink);
  font-size: 15px;
  line-height: 1.35;
}

.pages-catalog-panel-title p {
  margin: 0;
  color: var(--cat-muted);
  font-size: 11px;
  line-height: 1.6;
}

.pages-catalog-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.pages-catalog-panel .btn:disabled,
.pages-catalog-panel .btn[disabled],
.pages-report-catalog .btn:disabled,
.pages-report-catalog .btn[disabled] {
  opacity: .55;
  box-shadow: none;
  cursor: not-allowed;
}

.pages-catalog-source {
  padding: 3px 7px;
  border-radius: 5px;
  background: #f2f6f4;
  color: var(--cat-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  white-space: nowrap;
}

.pages-catalog-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cat-line-soft);
  background: #fbfdfc;
}

.pages-catalog-range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
}

.pages-catalog-quick-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pages-catalog-quick {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f0f5f2;
  color: var(--cat-ink-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pages-catalog-quick:hover {
  border-color: #cfe6db;
  background: #eaf6ee;
  color: var(--cat-brand);
}

.pages-catalog-quick.is-active {
  border-color: var(--cat-brand);
  background: #e2f3eb;
  color: #06644f;
}

.pages-catalog-quick:focus-visible {
  outline: 2px solid #087c6155;
  outline-offset: 1px;
}

.pages-catalog-date-group {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.pages-catalog-date-group .pages-field {
  flex: 0 0 auto;
  width: 188px;
  white-space: nowrap;
}

.pages-catalog-date-group .pages-field input {
  width: 130px;
}

.pages-catalog-tilde {
  padding-bottom: 10px;
  color: var(--cat-muted);
  font-size: 12px;
}

.pages-catalog-range-hint {
  margin: 0;
}

.pages-catalog-panel > [data-pages-region="status"]:not(:empty) {
  padding: 12px 18px 0;
}

.pages-catalog-panel > [data-pages-region="status"] .pages-error:last-child,
.pages-catalog-panel > [data-pages-region="status"] .pages-flash:last-child {
  margin-bottom: 0;
}

.pages-catalog-flash {
  background: #f2f8f5;
  border-color: #d8eae0;
  color: #3e6b56;
}

.pages-catalog-export-done {
  margin: 0 0 10px;
  color: #12664b;
  font-weight: 700;
}

/* —— 汇总卡（4 项） —— */
.pages-catalog-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px 0;
}

.pages-catalog-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--cat-line-soft);
  border-radius: 10px;
  background: #fbfdfc;
}

.pages-catalog-stat-label {
  color: var(--cat-muted);
  font-size: 10px;
  font-weight: 800;
}

.pages-catalog-stat-value {
  color: var(--cat-ink);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.pages-catalog-stat-value.is-due {
  color: var(--cat-due);
}

.pages-catalog-stat-note {
  color: var(--cat-muted);
  font-size: 9px;
  line-height: 1.4;
}

/* ========================================================================== */
/* 4. 表格 / 合计行 / 班次 / 明细                                              */
/* ========================================================================== */
.pages-catalog-table-wrap {
  padding: 14px 18px 2px;
}

.pages-catalog-table {
  min-width: 720px;
}

.pages-catalog-table caption {
  padding: 0 0 8px;
  color: var(--cat-muted);
  font-size: 10px;
  text-align: left;
}

.pages-catalog-table th {
  padding: 9px 9px;
  border-bottom: 1px solid var(--cat-line);
  background: #f7faf8;
  color: #7b9186;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

.pages-catalog-table td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--cat-line-soft);
  font-size: 12px;
  vertical-align: middle;
}

.pages-catalog-table tfoot th,
.pages-catalog-table tfoot td {
  border-top: 1px solid var(--cat-line);
  border-bottom: 0;
  background: #f7fbf9;
  color: var(--cat-ink);
  font-weight: 800;
}

.pages-catalog-table tfoot th {
  padding: 11px 14px;
  font-size: 11px;
  text-align: left;
}

.pages-catalog-table tbody tr:last-child td {
  border-bottom: 0;
}

.pages-catalog-strong {
  color: var(--cat-ink);
  font-weight: 800;
}

.pages-catalog-muted {
  color: var(--cat-muted);
  font-weight: 400;
}

.pages-catalog-sub {
  display: block;
  margin-top: 1px;
  color: var(--cat-muted);
  font-size: 9px;
  font-weight: 400;
  white-space: nowrap;
}

.pages-catalog-dt {
  white-space: nowrap;
}

.pages-catalog-dt-date,
.pages-catalog-dt-time,
.pages-catalog-dt-sub {
  display: block;
  line-height: 1.3;
}

.pages-catalog-dt-date {
  color: var(--cat-ink-soft);
  font-weight: 700;
}

.pages-catalog-dt-time {
  color: var(--cat-muted);
  font-size: 10px;
}

.pages-catalog-dt-sub {
  margin-top: 1px;
  color: var(--cat-muted);
  font-size: 9px;
}

.pages-catalog-nowrap {
  white-space: nowrap;
}

.pages-catalog-note-cell {
  max-width: 220px;
  color: var(--cat-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pages-catalog-refund {
  color: var(--cat-down);
}

/* —— 班次行 —— */
.pages-catalog-shift-row {
  cursor: pointer;
}

.pages-catalog-shift-row:hover td {
  background: #f6fbf8;
}

.pages-catalog-shift-row.is-expanded td {
  background: #eef8f2;
}

.pages-catalog-shift-row td:first-child {
  white-space: nowrap;
}

.pages-catalog-shift-row .pages-catalog-link {
  margin-left: 6px;
  font-size: 10px;
}

.pages-catalog-detail-row > td {
  padding: 0 12px 12px !important;
  background: #f6fbf8;
}

/* —— 班次明细（展开）/ 抽屉式面板 —— */
.pages-catalog-detail {
  margin: 0;
  padding: 13px 14px;
  border: 1px solid #d9eae0;
  border-left: 3px solid var(--cat-brand);
  border-radius: 10px;
  background: #fbfefc;
  box-shadow: inset 0 1px 0 #ffffff;
}

.pages-catalog-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.pages-catalog-detail-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pages-catalog-detail-head strong {
  color: var(--cat-ink);
  font-size: 13px;
}

.pages-catalog-detail-head span {
  color: var(--cat-muted);
  font-size: 11px;
}

.pages-catalog-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}

.pages-catalog-detail-stats > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border: 1px solid #e4efe9;
  border-radius: 8px;
  background: #ffffff;
}

.pages-catalog-detail-stats span {
  color: var(--cat-muted);
  font-size: 9px;
}

.pages-catalog-detail-stats strong {
  color: var(--cat-ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pages-catalog-detail-title {
  margin: 9px 0 6px;
  color: var(--cat-ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.pages-catalog-detail-empty {
  margin: 6px 0 0;
  font-size: 11px;
}

.pages-catalog-detail-loading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pages-catalog-payment-table {
  width: 100%;
  min-width: 0;
}

.pages-catalog-payment-table th {
  padding: 7px 7px;
  background: #f2f8f4;
  font-size: 9px;
}

.pages-catalog-payment-table td {
  padding: 7px;
  font-size: 11px;
}

.pages-catalog-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pages-catalog-method {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid #e4efe9;
  border-radius: 7px;
  background: #fff;
  color: var(--cat-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.pages-catalog-method strong {
  color: var(--cat-ink);
}

.pages-catalog-method small {
  color: var(--cat-muted);
  font-size: 9px;
}

.pages-catalog-method-name {
  color: var(--cat-ink-soft);
  font-weight: 800;
}

/* —— 状态 pill / 差异 —— */
.pages-catalog-pill {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2px;
  vertical-align: 1px;
}

.pages-catalog-pill[data-status="open"] {
  background: #fff0d5;
  color: #9a6a1f;
}

.pages-catalog-pill[data-status="closed"] {
  background: var(--cat-flat-bg);
  color: var(--cat-flat);
}

.pages-catalog-pill[data-status="collect"] {
  background: var(--cat-up-bg);
  color: #0a6b51;
}

.pages-catalog-pill[data-status="refund"] {
  background: var(--cat-down-bg);
  color: #a43f33;
}

.pages-catalog-diff {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pages-catalog-diff[data-tone="flat"] {
  background: var(--cat-up-bg);
  color: #0a6b51;
}

.pages-catalog-diff[data-tone="up"] {
  background: var(--cat-due-bg);
  color: #94611d;
}

.pages-catalog-diff[data-tone="down"] {
  background: var(--cat-down-bg);
  color: #a43f33;
}

/* ========================================================================== */
/* 5. 加载骨架 / 空态 / 错误 / 页脚                                            */
/* ========================================================================== */
.pages-catalog-skeleton {
  padding: 16px 18px 20px;
}

.pages-catalog-sk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cat-line-soft);
}

.pages-catalog-sk-row {
  display: grid;
  grid-template-columns: 1.4fr repeat(6, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f2f6f4;
}

.pages-catalog-sk-line {
  display: inline-block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef4f0 25%, #f7fbf9 37%, #eef4f0 63%);
  background-size: 400% 100%;
  animation: pages-catalog-shimmer 1.3s ease infinite;
}

.pages-catalog-sk-line.tall {
  height: 18px;
}

.pages-catalog-sk-line.w12 { width: 12%; }
.pages-catalog-sk-line.w14 { width: 14%; }
.pages-catalog-sk-line.w20 { width: 20%; }
.pages-catalog-sk-line.w30 { width: 30%; }
.pages-catalog-sk-line.w50 { width: 50%; }
.pages-catalog-sk-line.w60 { width: 60%; }
.pages-catalog-sk-line.w80 { width: 80%; }

@keyframes pages-catalog-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.pages-catalog-skeleton .pages-note {
  margin: 12px 0 0;
}

.pages-catalog-empty {
  margin: 4px 18px 16px;
  padding: 34px 16px;
  border: 1px dashed #d7e8de;
  border-radius: 10px;
  background: #fbfdfc;
}

.pages-catalog-empty .btn {
  margin-top: 6px;
}

.pages-catalog-callout {
  margin: 16px 18px 18px;
  padding: 11px 13px;
  background: #f4faf7;
  border-color: #dbeee2;
  color: #4f7863;
  font-size: 11px;
  line-height: 1.7;
}

.pages-catalog-callout strong {
  color: #2f5d4c;
}

/* ========================================================================== */
/* 6. 响应式兜底（宿主桌面优先；窄预览/窄窗不塌）                              */
/* ========================================================================== */
@media (max-width: 1180px) {
  .pages-catalog-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pages-catalog-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .pages-catalog-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .pages-catalog-side {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .pages-catalog-side-head {
    flex: 1 1 100%;
  }
  .pages-catalog-group {
    flex: 1 1 180px;
    border-bottom: 0;
  }
  .pages-catalog-note {
    flex: 1 1 100%;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .pages-catalog-head,
  .pages-catalog-panel-head,
  .pages-catalog-range {
    padding-left: 14px;
    padding-right: 14px;
  }
  .pages-catalog-table-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
  .pages-catalog-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .pages-catalog-date-group .pages-field {
    width: calc(50% - 18px);
  }
  .pages-catalog-range-row {
    align-items: stretch;
  }
  .pages-catalog-quick-group {
    width: 100%;
  }
  .pages-catalog-empty {
    margin-left: 14px;
    margin-right: 14px;
  }
  .pages-catalog-callout {
    margin-left: 14px;
    margin-right: 14px;
  }
}