/* ==========================================================================
   Apple 收口层（v7.0.0）—— index.html 里**最后**加载的一张样式表
   --------------------------------------------------------------------------
   放三类东西：
     1. 把「自成一派」的深色模块（引导层 tour）的局部换色变量改成中性石墨；
     2. 移动端专属：弹窗 → 底部抽屉（Bottom Sheet）、44px 触达区、输入框防缩放、
        安全区（刘海/Home 指示条）、表格横向滚动、按压态收敛；
     3. 触屏设备上的 hover 折价，以及减少动效偏好的兜底。

   为什么必须最后：这些规则要压过 soft-ui.css / tour.css / kiosk.css 里同样
   选择器的声明；一旦放前面，就会被它们反向覆盖（测试 tests/unit/soft-ui.test.js
   就是守这条顺序的）。
   ========================================================================== */

/* ==========================================================================
   1. 引导层（tour.css）：舞台本来就是深色，这里只把「导航蓝 + 品牌紫」换成石墨
   --------------------------------------------------------------------------
   tour.css 用一整套 --tour-* 局部变量控制观感，改这些变量就等于换肤，
   不需要碰它那 2700 多行规则。
   ========================================================================== */
.tour {
  --tour-bg: #0c0c0d;
  --tour-bg-2: #1c1c1e;
  --tour-ink: #f5f5f7;
  --tour-ink-soft: #c7c7cc;
  --tour-ink-dim: #8e8e93;
  --tour-line: rgba(255, 255, 255, 0.12);
  --tour-line-strong: rgba(255, 255, 255, 0.24);
  --tour-panel: rgba(28, 28, 30, 0.62);
  --tour-panel-strong: rgba(28, 28, 30, 0.86);
  --tour-accent: #f5f5f7;
  --tour-accent-2: #aeaeb2;
  --tour-radius: var(--radius-lg);
}

/* 引导层里硬编码的强调色（日志、焦点、进度）跟着变中性 */
.tour-log-info,
.tour-kiosk__input:focus {
  color: var(--tour-ink);
  border-color: var(--tour-accent);
}

.tour-progress__fill,
.tour-chart__bar.is-active {
  background: var(--tour-accent);
}

/* macOS 三个红绿灯保留（本来就是 Apple 的窗口按钮语言），其余拟物高光压平 */
.tour-window {
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   2. 触屏设备：hover 折价（移动端不该有「悬停浮起」）
   ========================================================================== */
@media (hover: none) {
  .card--interactive:hover,
  .group-card:hover,
  .stat-card:hover {
    box-shadow: var(--shadow-xs);
    border-color: var(--border-subtle);
  }

  .table tbody tr:hover {
    background: transparent;
  }

  .nav-link:hover {
    background: transparent;
  }
}

/* ==========================================================================
   3. 移动端（≤ 640px）：浮层改底部抽屉 + Apple 触达尺寸
   ========================================================================== */
@media (max-width: 640px) {
  /* ---------- 弹窗 → Bottom Sheet（Apple 的 sheet 从底部滑入，顶部圆角） ----------
     注意排除 .apple-alert-scrim：确认弹窗在手机上仍然是**居中**的 Apple Alert，
     不该被这条「弹窗变抽屉」的规则顺带推到底部（它同样是 .overlay）。 */
  .overlay:not(.apple-alert-scrim) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
  }

  .modal {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    margin: 0;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: apple-sheet-in var(--m-sheet) var(--ease-ios) both;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* 抽屉型浮层同样从底部来（侧滑抽屉在小屏上体验差） */
  .drawer {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 92vh;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    border-left: 0;
    border-top: var(--hairline) solid var(--border-subtle);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: apple-sheet-in var(--m-sheet) var(--ease-ios) both;
  }

  /* Sheet 顶部的抓握条（纯装饰，不参与拖拽） */
  .modal__header::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    margin: -4px auto 10px;
    opacity: 0.7;
  }

  /* 内容区自己滚，头部/底部按钮常驻 */
  .modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .modal__footer {
    flex: none;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }

  .modal__footer .btn {
    flex: 1;
  }

  /* ---------- 触达尺寸：按钮/输入一律 ≥ 44px（Apple HIG 最小值） ---------- */
  .btn:not(.btn--sm):not(.icon-button) {
    min-height: 44px;
  }

  .icon-button {
    min-width: 44px;
    min-height: 44px;
  }

  .nav-link,
  .dropdown__item,
  .row-action,
  .page-btn {
    min-height: 44px;
  }

  /* ---------- 输入框 16px：iOS Safari 聚焦时小于 16px 会自动放大页面 ---------- */
  .input,
  .select,
  .textarea {
    font-size: 16px;
    min-height: 44px;
  }

  textarea.input,
  textarea.textarea {
    min-height: 96px;
  }

  /* ---------- 安全区 ---------- */
  .app-topbar {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .app-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .app-sidebar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .toast-stack {
    width: calc(100vw - 24px);
    top: calc(env(safe-area-inset-top, 0px) + 8px);
  }

  /* ---------- 表格：小屏横向滚动，首列吸附（不重排 DOM） ---------- */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .table thead th {
    white-space: nowrap;
  }

  .table tbody td {
    white-space: nowrap;
  }

  /* ---------- 卡片 / 列表：小屏收紧圆角与内边距（Apple 在小屏更紧凑） ---------- */
  .card,
  .stat-card {
    border-radius: var(--radius-md);
  }

  .ios-group {
    border-radius: var(--radius-group);
  }

  .apple-alert {
    width: min(300px, 88vw);
  }

  /* Apple Alert 在手机上按钮横排更省空间 */
  .apple-alert--l2 .apple-alert__actions,
  .apple-alert--l3 .apple-alert__actions {
    flex-direction: row;
  }

  .apple-alert--l2 .apple-alert__actions button,
  .apple-alert--l3 .apple-alert__actions button {
    flex: 1;
  }

  .apple-alert--l2 .apple-alert__actions button + button,
  .apple-alert--l3 .apple-alert__actions button + button {
    border-top: 0;
    border-left: var(--hairline) solid var(--border-subtle);
  }
}

/* ==========================================================================
   4. 超小屏（≤ 380px）：再收一档字号，避免标题换行挤压
   ========================================================================== */
@media (max-width: 380px) {
  .page-header__title {
    font-size: var(--text-2xl);
  }

  .modal__title {
    font-size: var(--text-md);
  }

  .apple-alert__actions button {
    font-size: var(--text-md);
  }
}

@keyframes apple-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ==========================================================================
   5. 兜底：减少动效 / 打印
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .drawer {
    animation: none !important;
  }
}

@media print {
  .app-topbar,
  .app-sidebar,
  .toast-stack,
  .apple-alert-scrim {
    display: none !important;
  }

  .card,
  .table-wrap,
  .modal {
    box-shadow: none !important;
    border: 1px solid #d1d1d6 !important;
  }
}