/*
 * page-embed.css
 * ---------------------------------------------------------------------------
 * 嵌入模式预览页样式（被 index.html 动态嵌入内容区时使用）。
 *
 * 本文件定义了独立的 --page-* 令牌体系，与 bt-tokens.css 中的 --bt-* 令牌体系互相独立。
 * 定位区别：
 *   --bt-*   → 嵌入后台壳子的业务页面（弹框、表格、树面板等组件）
 *   --page-* → 嵌入模式下的预览/演示页样式
 *
 * 如果页面同时嵌入后台运行，应使用 bt-tokens.css + bt-page-common.css 中的 --bt-* 令牌，
 * 不要使用本文件中的 --page-* 令牌。
 * ---------------------------------------------------------------------------
 * 所有规则都挂在 `.fa-demo-html-page-frame__content` 之下，目的是：
 * 1. 避免 demo 页面样式污染后台壳子本身
 * 2. 让同一份业务页面在嵌入模式下保持统一视觉
 * 3. 方便和 page.css（独立打开模式）保持一套类名、两套作用域
 */

/* 页面级设计 token：统一控制嵌入页面的背景、卡片、边框、阴影与语义色。 */
.fa-demo-html-page-frame__content {
  min-height: 100%;
  font:
    0.875rem/1.6 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    sans-serif;
  color: var(--page-text);
  color-scheme: light;
  background:
    radial-gradient(
      circle at top right,
      rgb(37 99 235 / 8%),
      transparent 26%
    ),
    linear-gradient(180deg, #f8fafc 0%, var(--page-bg) 100%);

  --page-bg: #eff3f8;
  --page-surface: rgb(255 255 255 / 92%);
  --page-surface-soft: rgb(248 250 252 / 96%);
  --page-text: #0f172a;
  --page-muted: #64748b;
  --page-line: rgb(15 23 42 / 8%);
  --page-primary: #2563eb;
  --page-primary-soft: rgb(37 99 235 / 14%);
  --page-success: #0f766e;
  --page-warning: #d97706;
  --page-danger: #dc2626;
  --page-shadow: 0 18px 40px rgb(15 23 42 / 8%);
  --page-radius: 22px;
}

/* 嵌入页内部统一启用 border-box，避免不同 demo 页面之间尺寸计算不一致。 */
.fa-demo-html-page-frame__content *,
.fa-demo-html-page-frame__content *::before,
.fa-demo-html-page-frame__content *::after {
  box-sizing: border-box;
}

/* 页面骨架：page / hero / toolbar / grid / card 等是一套复用型 demo 页面语义类。 */
.fa-demo-html-page-frame__content .page {
  display: grid;
  gap: 20px;
  min-height: calc(100vh - 48px);
}

.fa-demo-html-page-frame__content .hero {
  padding: 28px;
  color: #fff;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgb(255 255 255 / 22%),
      transparent 28%
    ),
    linear-gradient(135deg, #0f172a 0%, #1d4ed8 45%, #0f766e 100%);
  border-radius: 28px;
  box-shadow: var(--page-shadow);
}

.fa-demo-html-page-frame__content .hero__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.74;
}

.fa-demo-html-page-frame__content .hero__title {
  margin: 10px 0 6px;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
}

.fa-demo-html-page-frame__content .hero__desc {
  max-width: 760px;
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.9;
}

.fa-demo-html-page-frame__content .hero__toolbar,
.fa-demo-html-page-frame__content .toolbar,
.fa-demo-html-page-frame__content .filters,
.fa-demo-html-page-frame__content .tag-list,
.fa-demo-html-page-frame__content .table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.fa-demo-html-page-frame__content .hero__toolbar {
  margin-top: 20px;
}

/* 按钮、网格、卡片、列表这些基础类会被多个 demo 页面复用。 */
.fa-demo-html-page-frame__content .button,
.fa-demo-html-page-frame__content .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
}

.fa-demo-html-page-frame__content .button {
  color: #0f172a;
  background: #fff;
}

.fa-demo-html-page-frame__content .ghost-button {
  color: #fff;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 28%);
}

.fa-demo-html-page-frame__content .stats,
.fa-demo-html-page-frame__content .grid-2,
.fa-demo-html-page-frame__content .grid-3 {
  display: grid;
  gap: 16px;
}

.fa-demo-html-page-frame__content .stats {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fa-demo-html-page-frame__content .grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.fa-demo-html-page-frame__content .grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.fa-demo-html-page-frame__content .card,
.fa-demo-html-page-frame__content .stat-card,
.fa-demo-html-page-frame__content .surface {
  background: var(--page-surface);
  border: 1px solid var(--page-line);
  border-radius: var(--page-radius);
  box-shadow: var(--page-shadow);
}

.fa-demo-html-page-frame__content .card,
.fa-demo-html-page-frame__content .surface {
  /* padding: 22px; */
}

.fa-demo-html-page-frame__content .stat-card {
  padding: 20px 22px;
}

.fa-demo-html-page-frame__content .card__title,
.fa-demo-html-page-frame__content .surface__title {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.fa-demo-html-page-frame__content .card__meta,
.fa-demo-html-page-frame__content .surface__meta,
.fa-demo-html-page-frame__content .muted {
  color: var(--page-muted);
}

.fa-demo-html-page-frame__content .stat-label {
  font-size: 0.8125rem;
  color: var(--page-muted);
}

.fa-demo-html-page-frame__content .stat-value {
  margin-top: 10px;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
}

.fa-demo-html-page-frame__content .trend {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}

.fa-demo-html-page-frame__content .trend--up {
  color: var(--page-success);
}

.fa-demo-html-page-frame__content .trend--warning {
  color: var(--page-warning);
}

.fa-demo-html-page-frame__content .list {
  display: grid;
  gap: 12px;
}

.fa-demo-html-page-frame__content .list-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--page-surface-soft);
  border: 1px solid var(--page-line);
  border-radius: 18px;
}

.fa-demo-html-page-frame__content .list-item__title {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  font-weight: 700;
}

.fa-demo-html-page-frame__content .badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
}

.fa-demo-html-page-frame__content .badge--primary {
  color: var(--page-primary);
  background: rgb(37 99 235 / 12%);
}

.fa-demo-html-page-frame__content .badge--success {
  color: var(--page-success);
  background: rgb(15 118 110 / 14%);
}

.fa-demo-html-page-frame__content .badge--warning {
  color: var(--page-warning);
  background: rgb(217 119 6 / 14%);
}

.fa-demo-html-page-frame__content .badge--danger {
  color: var(--page-danger);
  background: rgb(220 38 38 / 12%);
}

.fa-demo-html-page-frame__content .badge--muted {
  color: var(--page-muted);
  background: rgb(100 116 139 / 12%);
}

.fa-demo-html-page-frame__content .table {
  width: 100%;
  overflow: hidden;
  border-collapse: collapse;
}

.fa-demo-html-page-frame__content .table th,
.fa-demo-html-page-frame__content .table td {
  padding: 14px 12px;
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid var(--page-line);
}

.fa-demo-html-page-frame__content .table th {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--page-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fa-demo-html-page-frame__content .table tr:last-child td {
  border-bottom: 0;
}

.fa-demo-html-page-frame__content .progress-list {
  display: grid;
  gap: 14px;
}

.fa-demo-html-page-frame__content .progress-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.fa-demo-html-page-frame__content .progress-title {
  font-weight: 700;
}

.fa-demo-html-page-frame__content .progress-value {
  font-size: 0.8125rem;
  color: var(--page-muted);
}

.fa-demo-html-page-frame__content .progress-track {
  height: 10px;
  overflow: hidden;
  background: rgb(148 163 184 / 22%);
  border-radius: 999px;
}

.fa-demo-html-page-frame__content .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
  border-radius: inherit;
}

.fa-demo-html-page-frame__content .sparkline {
  width: 100%;
  height: 148px;
}

.fa-demo-html-page-frame__content .sparkline svg {
  width: 100%;
  height: 100%;
}

.fa-demo-html-page-frame__content .filters {
  margin-bottom: 14px;
}

.fa-demo-html-page-frame__content .filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  font-weight: 600;
  color: var(--page-muted);
  background: var(--page-surface-soft);
  border: 1px solid var(--page-line);
  border-radius: 999px;
}

.fa-demo-html-page-frame__content .filter-chip--active {
  color: var(--page-primary);
  background: var(--page-primary-soft);
  border-color: rgb(37 99 235 / 16%);
}

.fa-demo-html-page-frame__content .note {
  padding: 16px 18px;
  background: var(--page-surface-soft);
  border: 1px solid var(--page-line);
  border-radius: 18px;
}

.fa-demo-html-page-frame__content .form-grid {
  display: grid;
  gap: 16px;
  max-width: 720px;
}

.fa-demo-html-page-frame__content .field {
  display: grid;
  gap: 8px;
}

.fa-demo-html-page-frame__content .field label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--page-muted);
}

.fa-demo-html-page-frame__content .field__value {
  min-height: 44px;
  padding: 11px 14px;
  background: var(--page-surface-soft);
  border: 1px solid var(--page-line);
  border-radius: 14px;
}

.fa-demo-html-page-frame__content .field__hint {
  font-size: 0.75rem;
  color: var(--page-muted);
}

.fa-demo-html-page-frame__content .timeline {
  display: grid;
  gap: 14px;
}

.fa-demo-html-page-frame__content .timeline-item {
  position: relative;
  padding-left: 18px;
}

.fa-demo-html-page-frame__content .timeline-item::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--page-primary);
  border-radius: 50%;
}

.fa-demo-html-page-frame__content .timeline-item__time {
  font-size: 0.75rem;
  color: var(--page-muted);
}

.fa-demo-html-page-frame__content .tip {
  padding: 14px 16px;
  font-weight: 600;
  color: var(--page-success);
  background: rgb(15 118 110 / 12%);
  border-radius: 18px;
}

/* ===================== 深色主题覆盖 ===================== */

.dark .fa-demo-html-page-frame__content {
  color-scheme: dark;

  --page-bg: hsl(var(--background));
  --page-surface: hsl(var(--card) / 92%);
  --page-surface-soft: hsl(var(--secondary));
  --page-text: hsl(var(--foreground));
  --page-muted: hsl(var(--muted-foreground));
  --page-line: hsl(var(--border));
  --page-primary: hsl(var(--primary));
  --page-primary-soft: hsl(var(--primary) / 14%);
  --page-success: hsl(var(--chart-3, 142 76% 36%));
  --page-warning: hsl(var(--chart-4, 24 95% 53%));
  --page-danger: hsl(var(--destructive));
  --page-shadow: 0 18px 40px hsl(var(--foreground) / 8%);

  background:
    radial-gradient(
      circle at top right,
      hsl(var(--primary) / 8%),
      transparent 26%
    ),
    linear-gradient(180deg, hsl(var(--background)) 0%, var(--page-bg) 100%);
}

.dark .fa-demo-html-page-frame__content .hero {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgb(255 255 255 / 10%),
      transparent 28%
    ),
    linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--primary)) 45%, hsl(var(--chart-3, 142 76% 36%)) 100%);
}

.dark .fa-demo-html-page-frame__content .button {
  color: hsl(var(--foreground));
  background: hsl(var(--card));
}

.dark .fa-demo-html-page-frame__content .ghost-button {
  color: hsl(var(--foreground));
  background: hsl(var(--foreground) / 12%);
  border-color: hsl(var(--foreground) / 28%);
}