/*
 * Reseller Mobile Polish
 * 全面优化 reseller 相关页面的移动端体验
 * 覆盖：4 个前台模板 + 客户中心 + 客户工单/通知/收藏/订单详情 + 收银台
 *        + 游客查单/订单/工单 + dashboard 后台 + admin 后台
 *
 * 策略：
 *  - 单列 stack：multi-column grid → 1 column 在 ≤768px
 *  - 触控友好：button/input 最小 44px 高度
 *  - 字号缩放：clamp() 自适应
 *  - 卡片 padding 缩小 + radius 增大（手感更柔）
 *  - modal 移动端转底部抽屉 / 全屏
 *  - sticky header 让出空间
 *
 * 全部用 !important 覆盖各页面内联 style
 * 注入：已在 reseller-airy.css 加载路径上 piggyback
 */

/* ============================================================
 * 全局：触控目标尺寸 + 字号缩放 + 防溢出
 * ============================================================ */
@media (max-width: 768px) {

  /* 触控友好：所有按钮/链接按钮/input 最小 44px 高 */
  button,
  .btn,
  .ck-btn,
  .ck-back,
  .tk-new-btn,
  .rrr-btn,
  .rrr-cli-btn,
  .tk-cli-btn,
  .fab-main,
  .td-send-btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 42px !important;
  }
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important;  /* 防 iOS auto-zoom */
  }
  textarea {
    min-height: 90px !important;
  }

  /* 防横向滚动：所有容器 max-width:100% */
  body, html { overflow-x: hidden; }
  img, video, table { max-width: 100% !important; }
}

/* ============================================================
 * 全局：卡片在手机端 padding/radius 调整
 * ============================================================ */
@media (max-width: 600px) {
  .ctr-card,
  .ck-card,
  .gcard,
  .tnd-table-card,
  .rsl-main,
  .cf-card,
  .cn-card,
  .ntf-card,
  .tk-card,
  .rrr-card,
  .td-head-card,
  .td-reply-card {
    padding: 16px 14px !important;
    border-radius: 10px !important;
  }
}

/* ============================================================
 * 4 模板前台首页 home.blade.php
 *   核心：header / search / categories / table 全部 stack
 * ============================================================ */
@media (max-width: 768px) {
  /* 4 模板共用的 header 类不一，统一收紧 padding */
  .tna-header-inner,
  .tnb-header-inner,
  .tnc-header-inner,
  .tnd-header-inner {
    padding: 10px 14px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  /* 搜索框：登录后 nav 一行；游客可换行 */
  .tna-search,
  .tnb-search,
  .tnc-search,
  .tnd-search {
    flex: 1 1 100% !important;
    order: 99;
    margin-top: 8px;
  }
}
@media (max-width: 480px) {
  /* 顶部 nav 链接缩短间距 */
  .tna-nav, .tnb-nav, .tnc-nav, .tnd-nav {
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .tna-nav a, .tnb-nav a, .tnc-nav a, .tnd-nav a {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
}

/* d 模板表格卡片化的图片缩小 */
@media (max-width: 600px) {
  .tnd-thumb { width: 38px !important; height: 38px !important; }
  .tnd-cell-name .nm { font-size: 13.5px !important; }
  .tnd-cell-price { font-size: 15px !important; }
  .tnd-buy-btn { padding: 8px 14px !important; font-size: 12.5px !important; }
}

/* ============================================================
 * 4 模板商品详情 product.blade.php
 *   通用：grid → 单列；图全宽；购买卡 sticky bottom
 * ============================================================ */
@media (max-width: 768px) {
  /* a/b/c/d 详情卡 grid → 单列 */
  .tna-detail-card,
  .tnb-detail-card,
  .tnc-detail-card,
  .tnd-detail-card {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  /* 图通栏 */
  .tna-detail-image,
  .tnb-detail-image,
  .tnc-detail-image,
  .tnd-detail-image {
    width: 100% !important;
    height: 220px !important;
    border-radius: 10px 10px 0 0 !important;
  }
  /* 商品名 / meta 缩小 */
  .tna-detail-meta h1,
  .tnb-detail-meta h1,
  .tnc-detail-meta h1,
  .tnd-detail-meta h1 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  /* meta grid 自适应换行 */
  .tnd-meta-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* 购买卡在手机端 sticky 到底部（4 模板购买 form） */
@media (max-width: 600px) {
  .tnd-detail-buy,
  .tnb-buy-card,
  .tnc-detail-buy,
  .tna-detail-buy {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30;
    background: var(--card-bg, #fff) !important;
    border-top: 1px solid var(--card-border, #e5e7eb) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important;
    padding: 14px 16px !important;
    margin: 0 -14px -14px !important;
  }
}

/* ============================================================
 * 客户中心 layout (shared/center-layout 兜底 + 4 模板各自)
 *   sidebar 折叠为顶部 tab，main 通栏
 * ============================================================ */
@media (max-width: 768px) {
  .ctr-shell {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 12px !important;
  }
  .ctr-side { display: none !important; }
  .ctr-mobile-tabs { display: flex !important; }
  .ctr-top-inner {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .ctr-nav { gap: 12px !important; font-size: 12px; }
}

/* ============================================================
 * 客户中心：表格 → 卡片式（订单列表/收藏/通知/工单等）
 * ============================================================ */
@media (max-width: 600px) {
  /* 通用：把 ctr-table 转卡片 */
  .ctr-table { display: block; }
  .ctr-table thead { display: none; }
  .ctr-table tbody { display: block; }
  .ctr-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--card-bg, #fff);
  }
  .ctr-table td {
    padding: 0 !important;
    border: 0 !important;
    font-size: 13px;
  }
  .ctr-table td:first-child { grid-column: span 2; font-weight: 600; }
}

/* ============================================================
 * 客户中心 KPI / stats 卡片：3 列 → 2 列 / 1 列
 * ============================================================ */
@media (max-width: 600px) {
  .ctr-stats,
  .rsd-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .ctr-stat,
  .rsd-kpi {
    padding: 12px 14px !important;
  }
  .ctr-stat .value,
  .rsd-kpi .v {
    font-size: 20px !important;
  }
}
@media (max-width: 380px) {
  .ctr-stats,
  .rsd-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
 * 工单详情 (center-ticket-detail.blade.php)
 * ============================================================ */
@media (max-width: 600px) {
  .td-head-card { padding: 14px 14px !important; }
  .td-head-ic { width: 36px !important; height: 36px !important; }
  .td-head-card h3 { font-size: 16px !important; }
  .td-head-card .meta-line { font-size: 11px !important; gap: 6px !important; }

  /* timeline 缩进收小 */
  .msg-item { padding-left: 46px !important; margin-bottom: 14px !important; }
  .msg-avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; left: 6px !important; }
  .td-timeline::before { left: 21px !important; }
  .msg-bubble { padding: 10px 12px !important; }
  .msg-body { font-size: 13px !important; }

  /* 回复区按钮全宽 */
  .td-reply-card { padding: 14px !important; }
  .td-reply-foot { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .td-send-btn { width: 100% !important; justify-content: center; }
  .td-reply-hint { font-size: 10.5px !important; }
}

/* ============================================================
 * 收银台 (checkout.blade.php)
 * ============================================================ */
@media (max-width: 600px) {
  .ck-shell {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 14px !important;
  }
  .ck-top-inner { padding: 12px 14px !important; }
  .ck-card { padding: 18px 16px !important; }
  .ck-h { font-size: 15px !important; }
  .ck-sum-row.total .price { font-size: 19px !important; }
  /* 步骤条手机不显示文字（已 ≤560px 隐藏，再补充） */
  .ck-step .lbl { display: none !important; }
  .ck-gw label { padding: 12px 14px !important; }
  .ck-gw .gw-icon { width: 30px !important; height: 30px !important; }
}

/* ============================================================
 * Modal 全局：手机端转底部抽屉
 * ============================================================ */
@media (max-width: 600px) {
  /* 通用 modal（rrr-cli-modal / tk-cli-modal / fab-modal） */
  .rrr-cli-modal,
  .tk-cli-modal,
  .fab-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .rrr-cli-modal .box,
  .tk-cli-modal .box,
  .fab-modal .box {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    max-height: 88vh !important;
    padding: 20px 18px !important;
    animation: slideUp .25s cubic-bezier(.16,1,.3,1);
  }

  /* native <dialog> 也转底部 */
  dialog.tk-dialog,
  dialog.rrr-dialog {
    margin: 0 0 0 0 !important;
    inset-block-end: 0 !important;
    inset-block-start: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    max-height: 88vh !important;
  }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* FAB：移动端按钮稍小 + 远离屏幕边 */
@media (max-width: 480px) {
  .fab-support { right: 12px !important; bottom: 16px !important; }
  .fab-main { height: 42px !important; padding: 0 14px 0 10px !important; font-size: 12.5px !important; }
  .fab-main svg { width: 16px !important; height: 16px !important; }
}

/* ============================================================
 * 游客订单 / 查单 / 工单
 * ============================================================ */
@media (max-width: 600px) {
  .gshell { padding: 14px !important; }
  .gcard { padding: 16px 14px !important; }
  .gh { font-size: 15px !important; }
  .gitem { gap: 10px !important; }
  .gthumb { width: 50px !important; height: 50px !important; }
  .gprice .v { font-size: 16px !important; }
  .gstatus { gap: 12px !important; flex-wrap: wrap !important; }
  .gbookmark { padding: 12px 14px !important; }
  .gbookmark .url-row { flex-direction: column !important; align-items: stretch !important; }
  .gbookmark .url { font-size: 10px !important; }

  /* guest-ticket-detail */
  .gt-wrap { margin: 12px !important; padding: 18px 14px !important; }
}

/* ============================================================
 * 登录 / 注册（4 模板）
 * ============================================================ */
@media (max-width: 600px) {
  /* 4 模板 auth 页通用容器收紧 */
  .tna-auth-shell, .tnb-auth-shell, .tnc-auth-shell, .tnd-auth-shell,
  .tna-auth-card, .tnb-auth-card, .tnc-auth-card, .tnd-auth-card {
    padding: 22px 18px !important;
    margin: 12px !important;
  }
  /* form label / input */
  .auth-form label { font-size: 13px !important; }
  .auth-form input,
  .auth-form button { width: 100% !important; }
}

/* 分销商后台 sidebar 移动端样式已迁移到 _layout.blade.php 的抽屉方案，此处不再覆盖 */

/* dashboard KPI grid 手机端 */
@media (max-width: 768px) {
  .rsd-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}
@media (max-width: 480px) {
  .rsd-kpi-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
 * Admin 后台 (Bootstrap 已自带响应，但 reseller 部分表格仍需收紧)
 * ============================================================ */
@media (max-width: 600px) {
  .page-wrap .card-body { padding: 14px 12px !important; }
  .page-wrap .nav-pills { flex-wrap: wrap !important; gap: 4px !important; }
  .page-wrap .nav-link { font-size: 12px !important; padding: 6px 10px !important; }
  /* admin table 强制横向滚动而不是溢出 */
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ============================================================
 * D 模板侧边栏分类（≤960 已是 collapse，再补充）
 * ============================================================ */
@media (max-width: 480px) {
  .tnd-cats { padding: 0 12px !important; }
  .tnd-pill {
    padding: 6px 12px 6px 8px !important;
    font-size: 12px !important;
  }
  .tnd-pill .ic svg { width: 12px !important; height: 12px !important; }
  .tnd-pill .count { font-size: 10px !important; padding: 1px 6px !important; }
}

/* ============================================================
 * Toolbar 排序 + 数量统计：手机折行
 * ============================================================ */
@media (max-width: 600px) {
  .tnd-toolbar {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }
  .tnd-tools-left { flex: 1 1 100% !important; font-size: 12px; }
  .tnd-stats { font-size: 11px !important; }
}

/* ============================================================
 * 通用提升：链接 underline 在手机端去除（避免与 buttonish 链接混淆）
 *           长邮箱 / 单号支持断词
 * ============================================================ */
@media (max-width: 600px) {
  .ctr-card a, .gcard a, .ck-card a { word-break: break-word; }
  td, th { word-break: break-word; }
}

/* ============================================================
 * 字号自适应 clamp（小屏越小越小）
 * ============================================================ */
.tnd-detail-meta h1,
.tnb-detail-meta h1 {
  font-size: clamp(16px, 4vw, 22px) !important;
}
.ctr-h, .gh, .ck-h, .td-head-card h3 {
  font-size: clamp(15px, 3.5vw, 18px) !important;
}