/**
 * 汉典会员系统响应式样式
 * 基于汉典前端开发规范 v1.0
 */

/* ─── 响应式断点 ─── */
/*
 * 移动优先策略
 * - xs:  < 480px  (小屏手机)
 * - sm:  480px+   (手机)
 * - md:  768px+   (平板)
 * - lg:  1024px+  (桌面)
 * - xl:  1200px+  (大屏桌面)
 */

/* ─── 平板 (768px - 1024px) ─── */
@media (max-width: 1024px) {
  :root {
    --content-max: 100%;
    --sp-lg: 20px;
    --sp-xl: 28px;
  }

  .zd-card__body {
    padding: var(--sp-md);
  }

  .zd-table th,
  .zd-table td {
    padding: var(--sp-sm);
  }
}

/* ─── 平板竖屏 (768px - 900px) ─── */
@media (max-width: 900px) {
  .zd-member-layout {
    flex-direction: column;
  }

  .zd-member-sidebar {
    width: 100%;
    margin-bottom: var(--sp-lg);
  }

  .zd-member-main {
    width: 100%;
  }
}

/* ─── 移动端 (768px以下) ─── */
@media (max-width: 768px) {
  :root {
    --sp-md: 12px;
    --sp-lg: 16px;
    --sp-xl: 24px;
  }

  body {
    font-size: var(--fs-sm);
  }

  /* 移动端表格横向滚动 */
  .zd-table-wrapper {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .zd-table {
    min-width: 600px;
  }

  /* 移动端表单优化 */
  .zd-input,
  .zd-select,
  .zd-textarea {
    font-size: 16px; /* 防止iOS缩放 */
  }

  /* 移动端按钮优化 */
  .zd-btn {
    width: 100%;
    justify-content: center;
  }

  .zd-btn-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
  }

  .zd-btn-group .zd-btn {
    width: 100%;
  }

  /* 移动端卡片 */
  .zd-card {
    border-radius: var(--radius-sm);
  }

  .zd-card__header {
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-base);
  }

  .zd-card__body {
    padding: var(--sp-md);
  }

  /* 移动端分页 */
  .zd-pagination {
    justify-content: center;
  }

  /* 移动端面包屑 */
  .zd-breadcrumb {
    font-size: var(--fs-xs);
  }

  /* 隐藏非必要元素 */
  .desktop-only {
    display: none !important;
  }
}

/* ─── 小屏手机 (480px以下) ─── */
@media (max-width: 480px) {
  :root {
    --sp-md: 10px;
    --sp-lg: 14px;
  }

  body {
    font-size: var(--fs-sm);
  }

  h1 {
    font-size: var(--fs-2xl);
  }

  h2 {
    font-size: var(--fs-xl);
  }

  h3 {
    font-size: var(--fs-lg);
  }

  /* 进一步优化表格显示 */
  .zd-table th,
  .zd-table td {
    padding: var(--sp-xs) var(--sp-sm);
    font-size: var(--fs-xs);
  }

  /* 移动端表单标签堆叠 */
  .zd-form-group {
    margin-bottom: var(--sp-sm);
  }

  /* 移动端用户信息 */
  .zd-user-info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-sm);
  }

  .zd-user-info__avatar {
    width: 40px;
    height: 40px;
  }

  /* 移动端徽章 */
  .zd-badge {
    font-size: 10px;
    padding: 1px 6px;
  }

  /* 移动端警告提示 */
  .zd-alert {
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-xs);
  }
}

/* ─── 深色模式响应式优化 ─── */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --c-bg: #1A1614;
    --c-topbg: #1A1614;
    --c-surface: #252120;
    --c-surface-alt: #2E2926;
    --c-text: #E8E0D8;
    --c-text-secondary: #A09488;
    --c-border: #3E3832;
    --c-border-light: #332E28;
    --c-shadow: rgba(0,0,0,0.25);
    --c-primary: #C9845A;
    --c-primary-light: #D4A070;
    --c-primary-dark: #A06B40;
  }
}

/* ─── 打印样式 ─── */
@media print {
  .zd-btn,
  .zd-pagination,
  .zd-member-sidebar nav,
  .no-print {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .zd-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .zd-card__header {
    background: #f5f5f5 !important;
    color: black !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .zd-table {
    border: 1px solid #ddd;
  }

  .zd-table th {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .zd-table td,
  .zd-table th {
    border: 1px solid #ddd;
    padding: 4px;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ─── 减少动画偏好 ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}