/* 咸鱼电竞设计系统 · 05-pages
   职责：页面构图。目前包含：首页（所有身份）—— 问候横幅 / 身份栏 / 焦点卡 + 今日概览 /
   报备审核队列（每单一张圆角卡）/ 底部记录卡；报备审核页列表卡片化。
   来源：work/opus-ui-preview（业主 2026-10-05 通过）的 .greet / .focus / .biz / .row，
   按生产 DOM 的类名重写，不引入预览专用类。 */
@layer xy.pages {
  .dashboard-page { display: grid; gap: var(--s-6); }
  .dashboard-page > * { margin: 0; }

  /* ── 问候：页内一行（业主 2026-11-05 选 A）。这块已经不撑高度了，顶栏下面的间距改由 .dashboard-page 给 ── */
  @media (min-width: 981px) { .dashboard-page { padding-top: 18px; } }
  .dashboard-hero {
    --orb-a: #fbe3ed; --orb-b: #f4b3cf; --orb-ink: #8c3d63;
    /* 业主 2026-10-12：legacy 层 .dashboard-hero 带 justify-content: space-between、≤760px 又改成 column——这里始终横排靠左 */
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 10px;
    min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .dashboard-hero[data-period="morning"]   { --orb-a: #fff1e4; --orb-b: #f7c4a0; --orb-ink: #8a4a24; }
  .dashboard-hero[data-period="noon"]      { --orb-a: #fff6de; --orb-b: #f2d28e; --orb-ink: #7a5a16; }
  .dashboard-hero[data-period="afternoon"] { --orb-a: #fdeaf0; --orb-b: #eeb2c4; --orb-ink: #833a55; }
  .dashboard-hero[data-period="night"]     { --orb-a: #ece6ff; --orb-b: #c8b6f2; --orb-ink: #4a3a7a; }
  .dashboard-hero::before, .dashboard-hero::after { content: none; }
  .greeting-orb {
    flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 34% 30%, var(--orb-a), var(--orb-b) 72%); color: var(--orb-ink);
  }
  .greeting-orb svg { width: 16px; height: 16px; stroke-width: 1.8; }
  .dashboard-hero h1 { min-width: 0; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: .02em; color: var(--text-1); overflow-wrap: anywhere; }
  .greeting-date { flex: none; margin-left: auto; font-size: 13px; color: var(--text-3); letter-spacing: .04em; }
  .greeting-mask { color: var(--accent); font-weight: 600; }
  .greeting-tag { margin-left: 2px; font-size: .7em; font-weight: 400; color: var(--text-3); }
  .greeting-subline {
    justify-self: start; margin: 6px 0 0; padding: 5px 14px; border-radius: var(--r-pill);
    background: rgba(var(--glow), .09); box-shadow: inset 0 0 0 1px rgba(var(--glow), .16);
    font-size: 13px; color: var(--text-2);
  }

  /* ── 身份栏：三格安静的信息条 ── */
  .dashboard-page .role-context {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    min-height: 0; padding: 4px 0; border: 0; border-radius: var(--r-lg);
    background: transparent; box-shadow: inset 0 0 0 1px var(--hairline);
  }
  .dashboard-page .role-context > div {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; min-height: 56px; padding: 8px 14px; border: 0; background: transparent; text-align: center;
  }
  .dashboard-page .role-context > div + div { border-left: 1px solid var(--hairline); }
  .dashboard-page .role-context span { font-size: 12px; color: var(--text-4); letter-spacing: .06em; }
  .dashboard-page .role-context strong { font-size: 14px; font-weight: 600; color: var(--text-1); }
  .dashboard-page .role-context strong.role-tag { padding: 2px 10px; font-size: 12.5px; }

  /* ── 第一行：焦点卡 + 今日概览 ── */
  .dashboard-lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: stretch; }

  .dashboard-focus {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; min-height: 300px; padding: 34px 38px;
    border-radius: var(--r-xl); background: var(--focus-bg); color: var(--focus-ink);
    box-shadow: 0 30px 60px -36px rgba(244, 179, 207, .45);
  }
  .dashboard-focus-art {
    position: absolute; z-index: -1; right: -12px; top: 50%; width: min(280px, 44%); aspect-ratio: 1; transform: translateY(-50%);
    background: url("../xianyu-logo-640.webp?v=20261108-b103") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%);
    mask-composite: intersect;
    opacity: .95; pointer-events: none;
    animation: xy-art-in 700ms var(--ease-out) both 120ms;
  }
  @keyframes xy-art-in { from { opacity: 0; translate: 16px 0; scale: .96; } }
  .dashboard-focus-kicker { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--focus-ink-2); letter-spacing: .06em; }
  .dashboard-focus-kicker .latin { margin: 0; font-size: 13px; color: var(--sakura-500); }
  .dashboard-focus-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sakura-500); animation: xy-pulse 2s var(--ease-out) infinite; }
  @keyframes xy-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 119, 166, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(220, 119, 166, 0); } }
  .dashboard-focus-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; max-width: 62%; margin: 16px 0 0; font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: .08em; line-height: 1.35; color: var(--focus-ink); }
  .dashboard-focus-count { font-family: var(--font-num); font-size: 84px; font-weight: 300; line-height: .82; letter-spacing: -.04em; }
  .dashboard-focus-desc { max-width: 58%; margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--focus-ink-2); }
  .dashboard-focus-desc strong { color: var(--focus-ink); }
  .dashboard-focus-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 58%; margin-top: auto; padding-top: 22px; }
  .dashboard-focus-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px;
    border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .55); color: var(--focus-ink);
    box-shadow: inset 0 0 0 1px rgba(140, 61, 99, .12); font-size: 12.5px; font-weight: 500; cursor: pointer;
  }
  .dashboard-focus-chip:hover { background: rgba(255, 255, 255, .9); }
  .dashboard-focus-chip .num { font-family: var(--font-num); font-size: 14px; font-weight: 600; }
  .dashboard-focus-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .dashboard-focus-primary, .dashboard-focus-secondary {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px;
    border: 0; border-radius: var(--r-pill); font-size: 14px; cursor: pointer;
  }
  .dashboard-focus-primary svg, .dashboard-focus-secondary svg { width: 17px; height: 17px; }
  .dashboard-focus :focus-visible { outline: 2px solid var(--sakura-700); outline-offset: 2px; }

  /* 今日概览：第一个指标是主角大数字，其余四个两两一行 */
  .dashboard-page .dashboard-overview {
    display: flex; flex-direction: column; min-width: 0; padding: 22px var(--card-pad) 0;
    border: 0; border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--shadow-card);
  }
  .dashboard-page .dashboard-overview .section-head { margin: 0 0 6px; padding: 0; border: 0; }
  .dashboard-page .dashboard-overview .section-head h2 { font-size: 17px; }
  .dashboard-page .dashboard-overview .grid.metrics {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; flex: 1 1 auto;
    grid-auto-rows: minmax(72px, 1fr);
    margin: 0 calc(-1 * var(--card-pad)); border: 0; border-radius: 0; background: transparent; overflow: visible;
  }
  .dashboard-page .dashboard-overview .card.metric {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    min-width: 0; min-height: 76px; padding: 14px var(--card-pad);
    border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: transparent; box-shadow: none;
  }
  .dashboard-page .dashboard-overview .card.metric:nth-child(odd):not(:first-child) { border-right: 1px solid var(--hairline); }
  .dashboard-page .dashboard-overview .card.metric:first-child { grid-column: 1 / -1; border-top: 0; padding-top: 6px; padding-bottom: 20px; }
  .dashboard-page .dashboard-overview .card.metric:first-child strong { font-size: 44px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
  .dashboard-page .dashboard-overview .card.metric label { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dashboard-page .dashboard-overview .card.metric label svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--text-4); }
  .dashboard-page .dashboard-overview .card.metric strong { font-size: 19px; white-space: nowrap; }

  /* ── 报备审核队列：咸鱼 2026-11-03 装进卡里，每单是卡内一条通栏分隔行（卡壳在 12-glass，和 01 经营同款） ── */
  .dashboard-queue-tabs .num { margin-left: 6px; font-family: var(--font-num); font-size: 12px; color: var(--text-4); }
  .dashboard-queue-tabs > button[aria-pressed="true"] .num { color: var(--accent); }

  .dashboard-queue-list { display: grid; }
  .dashboard-queue-item {
    position: relative; display: flex; align-items: center; gap: 0; min-width: 0;
    padding: 0 calc(var(--card-pad) - 8px) 0 var(--card-pad); border-top: 1px solid var(--hairline);
    transition: background var(--t-fast), box-shadow var(--t-fast);
    animation: xy-rise var(--t-slow) var(--ease-out) both;
  }
  .dashboard-queue-item:hover { background: rgba(255, 240, 248, .035); }
  .dashboard-queue-item:has(.is-batch-selected) { background: rgba(244, 179, 207, .07); box-shadow: inset 2px 0 0 var(--accent); }
  @keyframes xy-rise { from { opacity: 0; transform: translateY(6px); } }
  .dashboard-queue-item .report-review-select { flex: 0 0 32px; width: 32px; min-height: 56px; padding: 0; display: flex; align-items: center; justify-content: flex-start; }
  .dashboard-queue-item > .report-review-row { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .dashboard-queue-item > .report-review-row:hover, .dashboard-queue-item .report-review-row.is-batch-selected { background: transparent; box-shadow: none; }

  .dashboard-queue-row {
    display: grid; align-items: center; grid-template-columns: minmax(0, 2.2fr) minmax(96px, 1fr) 96px 92px 16px;
    gap: 20px; min-height: 76px; padding: 14px 0; color: var(--text-1); text-align: left; cursor: pointer;
  }
  .dashboard-queue-main { display: grid; gap: 4px; min-width: 0; }
  .dashboard-queue-main strong { font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
  .dashboard-queue-main small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text-4); }
  .dashboard-queue-kind { font-size: 11.5px; color: var(--st-info); letter-spacing: .04em; }
  .dashboard-queue-kind.gift { color: var(--accent); }
  .dashboard-queue-kind::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 2px; }
  .dashboard-queue-people { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--text-2); }
  .dashboard-queue-people > span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dashboard-queue-people em { flex: 0 0 auto; font-style: normal; font-size: 11.5px; color: var(--text-4); }
  .dashboard-queue-amount { display: grid; text-align: right; }
  .dashboard-queue-amount .num { font-family: var(--font-num); font-size: 16px; font-weight: 600; }
  .dashboard-queue-amount small { font-size: 11.5px; color: var(--text-4); }
  .dashboard-queue-time { text-align: right; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
  .dashboard-queue-row > svg:last-child { width: 16px; height: 16px; color: var(--text-4); transition: transform var(--t-base) var(--ease-out), color var(--t-fast); }
  .dashboard-queue-row:hover > svg:last-child { transform: translateX(2px); color: var(--text-2); }
  .dashboard-queue-row:focus-visible { outline-offset: -2px; }
  .dashboard-queue-empty { padding: 28px var(--card-pad); border-top: 1px solid var(--hairline); text-align: center; color: var(--text-3); font-size: 13.5px; }
  .dashboard-queue-more { display: flex; justify-content: center; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; }

  /* 批量条：随列表滚动吸底，选择后才高亮 */
  .report-review-batchbar.dashboard-queue-batchbar, .reports-page .report-review-batchbar {
    position: sticky; z-index: 20; bottom: 16px;
    padding: 8px 8px 8px 18px; border: 0; border-radius: var(--r-lg);
    background: rgba(35, 28, 40, .92); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--hairline-strong);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .report-review-batch-status { font-family: var(--font-num); }

  /* ── 底部记录卡 ── */
  .dashboard-page .dashboard-records, .dashboard-page .dashboard-owner-insights { gap: var(--s-6); margin: 0; }
  .dashboard-page .dashboard-records > .card, .dashboard-page .dashboard-owner-insights > .card { padding: 22px var(--card-pad); }
  .dashboard-page .bar-track { border-radius: var(--r-pill); background: var(--bg-raised); }
  .dashboard-page .bar-fill { border-radius: var(--r-pill); background: linear-gradient(90deg, var(--sakura-500), var(--accent)); }
  .dashboard-page .ledger-item { padding: 12px 0; }
}

/* 业主 2026-10-12 v7 部署：「取消选择」选了之后才出现，出现时轻轻滑入 */
.report-review-batchbar #reportBatchClear[hidden] { display: none !important; }
.report-review-batchbar #reportBatchClear:not([hidden]) { animation: xy-batch-clear-in .22s var(--ease-out, ease-out) both; }
@keyframes xy-batch-clear-in { from { opacity: 0; transform: translateX(8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .report-review-batchbar #reportBatchClear:not([hidden]) { animation: none; } }