/*!
 * mobile-first.css — v3.1 移动端优先公共样式
 *
 * 用法：在视图 head 引入
 *   <link rel="stylesheet" href="<?= asset('css/mobile-first.css') ?>">
 *
 * 设计原则：
 *  1. 触摸目标 ≥ 44px（Apple HIG / WCAG）
 *  2. 输入框字体 ≥ 16px（防 iOS 自动缩放）
 *  3. 主滚动容器安全区(iOS notch + home bar)
 *  4. 横竖屏兼容
 *  5. 高 DPI 适配
 *  6. 减弱 prefers-reduced-motion
 *  7. dark mode 友好（基础适配）
 */

/* ===========================================================
 * 1. 基础重置
 * =========================================================== */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 防止 iOS 长按选中 */
.no-tap, button, label, .nav-item {
  -webkit-touch-callout: none;
  user-select: none;
}
/* 文本应该可选 */
input, textarea, [contenteditable] {
  -webkit-touch-callout: default;
  user-select: text;
}

/* ===========================================================
 * 2. 输入框（移动端必读）
 * =========================================================== */
input, textarea, select {
  /* iOS Safari 在 font-size < 16px 时会自动缩放 */
  font-size: max(16px, 1rem);
}
input[type="checkbox"], input[type="radio"] {
  /* 这些不强制 16px（影响布局） */
  font-size: inherit;
}
input[type="submit"], input[type="button"], button {
  font-size: 14px; /* 按钮可以小 */
}

/* 输入框聚焦更明显 */
input:focus, textarea:focus, select:focus {
  outline: 2px solid #7C3AED;
  outline-offset: 2px;
}

/* ===========================================================
 * 3. 触摸目标 (Apple HIG 44pt / WCAG 2.5.5)
 * =========================================================== */
button, a.btn, [role="button"], .clickable {
  min-height: 44px;
  min-width: 44px;
}
.tap-large { min-height: 44px !important; padding: 12px 16px !important; }

/* ===========================================================
 * 4. 滚动容器 + 安全区
 * =========================================================== */
.scroll-touch {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
.scroll-touch::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scroll-touch::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.25);
  border-radius: 4px;
}
.scroll-touch::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.45);
}

/* iOS safe area */
.safe-top    { padding-top:    env(safe-area-inset-top, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-left   { padding-left:   env(safe-area-inset-left, 0); }
.safe-right  { padding-right:  env(safe-area-inset-right, 0); }

/* ===========================================================
 * 5. 移动端通用断点（≤ 768 为手机，≤ 1024 为平板）
 * =========================================================== */
@media (max-width: 768px) {
  /* 表格 → 卡片 */
  .responsive-table,
  table.responsive {
    display: block;
    width: 100%;
  }
  .responsive-table thead,
  table.responsive thead {
    display: none;
  }
  .responsive-table tbody,
  table.responsive tbody {
    display: block;
    width: 100%;
  }
  .responsive-table tr,
  table.responsive tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
  }
  .responsive-table td,
  table.responsive td {
    display: block;
    text-align: right;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid #f1f5f9;
  }
  .responsive-table td:last-child,
  table.responsive td:last-child {
    border-bottom: none;
  }
  .responsive-table td::before,
  table.responsive td::before {
    content: attr(data-label);
    float: left;
    font-weight: 700;
    color: var(--muted, #94a3b8);
  }

  /* 隐藏非必要列 */
  .hide-mobile { display: none !important; }
  /* 显示 mobile-only */
  .only-mobile { display: block !important; }

  /* 小屏 padding 减少 */
  .mobile-tight { padding: 12px !important; }
  .mobile-tight-x { padding-left: 12px !important; padding-right: 12px !important; }

  /* 字体最小不要低于 12px */
  body { font-size: 14px; }
  /* 防小手 keytap */
  .opt, .chip, .tab, .btn-min {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* 自动排列多列布局 */
  .multi-col {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 10px !important;
  }

  /* 桌面 grid 卡片堆叠成单列 */
  .as-grid, .vc-grid, .vp-grid, .gallery-grid, .ref-cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  .as-grid .as-card, .vc-grid .vc-card {
    padding: 10px !important;
  }
  .as-card-name, .vc-card-name { font-size: 13px !important; }

  /* 工具栏不换行 + 横向滚动 */
  .as-toolbar, .vc-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .as-toolbar::-webkit-scrollbar,
  .vc-toolbar::-webkit-scrollbar { height: 3px; }

  /* tabs/分类横滚 */
  .as-tabs, .vc-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    border-bottom: none !important;
    padding-bottom: 4px;
  }
  .as-tab, .vc-tab {
    flex-shrink: 0 !important;
    white-space: nowrap;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}
@media (min-width: 769px) {
  .only-mobile { display: none !important; }
}

@media (max-width: 480px) {
  /* 小屏（iPhone SE / 老安卓） */
  body { font-size: 14px; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
  h3 { font-size: 15px !important; }
  .gen-btn, .vc-btn.primary { padding: 13px !important; font-size: 14px !important; }
  /* 隐藏次要元素 */
  .hide-xs { display: none !important; }
}

/* 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 跟 PC 类似，但元素间距紧凑 */
  .as-grid, .vc-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* 横屏手机 */
@media (max-width: 900px) and (orientation: landscape) {
  .h5-tabbar { padding-bottom: 0 !important; }
}

/* ===========================================================
 * 6. 动画与过渡
 * =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

@media (prefers-color-scheme: dark) {
  /* 可选：基础暗色模式提示，由具体视图订阅实现 */
  :root[data-mode="auto"] .auto-dark-bg { background: #0f172a !important; color: #e2e8f0; }
}

/* ===========================================================
 * 7. 高 DPI 屏（retina）
 * =========================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  /* 让边线更细更清晰 */
  .border-1 { border-width: .5px !important; }
}

/* ===========================================================
 * 8. 实用工具类
 * =========================================================== */
.text-truncate-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.touch-target {
  position: relative;
}
.touch-target::before {
  content: '';
  position: absolute;
  inset: -10px;
  /* 让点击区扩大 10px（不显示） */
}

.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* iOS 系统字体栈 */
.ios-font, button, input, textarea, select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 隐藏移动端横滚 */
body { overflow-x: hidden; }

/* ===========================================================
 * 9. v3.2.10 触摸目标 + 按钮最低高度（Apple HIG 44px）
 * =========================================================== */
.btn,
button,
input[type="submit"],
input[type="button"],
.sb-btn {
  min-height: 44px;
}
/* .btn-sm 在桌面可以小一点，但 mobile 必须 ≥44px */
@media (max-width: 768px) {
  .btn, .btn-sm, .btn-md, .btn-lg {
    min-height: 44px !important;
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  min-height: 44px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: max(16px, 1rem); /* 防 iOS 自动缩放 */
}

table tbody td,
.list-row {
  min-height: 44px;
}

/* ===========================================================
 * 10. v3.2.10 移动端底部固定工具栏
 * =========================================================== */
@media (max-width: 768px) {
  .fixed-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-card, #fff);
    border-top: 1px solid var(--color-border, #e2e8f0);
    padding: var(--space-3, 12px);
    padding-bottom: calc(var(--space-3, 12px) + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, .06));
    display: flex;
    gap: var(--space-2, 8px);
    align-items: center;
    justify-content: space-around;
  }
  .fixed-bottom-bar .btn {
    flex: 1;
    min-height: 44px;
  }
  /* 防止底部工具栏遮挡内容 */
  body.has-fixed-bottom-bar {
    padding-bottom: 80px;
  }
}