/* ==========================================================================
   金橙协同下单系统 —— 手机端适配层
   --------------------------------------------------------------------------
   单独成文件、且加载在 style.css 之后：
     · 桌面端样式完全不受影响（全部规则包在 @media (max-width: 820px) 内）
     · 想关掉手机适配，删掉 index.html 里的这一行 <link> 即可
     · 断点 820px：覆盖手机竖屏 + 小平板竖屏；820px 以上保持桌面版

   覆盖的 8 个痛点：
     1. 侧边导航 260px 常驻 → 抽屉式（汉堡按钮开合）
     2. 宽表格（8~12 列）→ 卡片化（表头文案自动注入 data-label）
     3. 弹窗被挤扁 → 底部抽屉式全屏弹层
     4. 右侧详情抽屉 640px → 全屏
     5. 输入框 < 16px → iOS Safari 自动放大
     6. 触控目标过小 → 按钮/芯片组 ≥ 40px
     7. 刘海屏/底部横条遮挡 → safe-area 适配
     8. 顶栏三件套（标题+搜索+按钮）挤在一行 → 折行 + 搜索可收起
   ========================================================================== */

/* ---------------------------------------------------------------- 桌面端基线
   注意：这几条必须放在所有 @media 之前。
   @media 不增加优先级，同优先级下按「后出现者胜」，
   如果把 display:none 写在 @media 后面，会把手机端的 display 覆盖掉。 */
.mobile-menu-btn { display: none; }
.sidebar-scrim { display: none; }

/* ---------------------------------------------------------------- 全局基础 */
@media (max-width: 820px) {
  /* 用 dvh 解决 iOS 地址栏收起/展开导致 100vh 跳动的问题 */
  html, body {
    height: 100%;
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
  }
  body {
    font-size: 15px;
    /* 禁止双指缩放导致的横向漂移（表单区仍允许缩放） */
    touch-action: manipulation;
  }

  /* 输入框字号必须 ≥16px，否则 iOS Safari 聚焦时会自动放大页面 */
  input, select, textarea, .form-input, .form-textarea, .form-select {
    font-size: 16px !important;
    /* 去掉 iOS 默认的圆角与内阴影 */
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--radius-sm);
  }
  select.form-input, select.form-select {
    /* 保留下拉箭头，但换成自绘的，避免 iOS 上是原生圆角 */
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
                      linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px !important;
  }
  input[type="date"], input[type="datetime-local"] {
    min-width: 0;      /* iOS 日期控件默认最小宽度会撑破容器 */
    max-width: 100%;
  }

  /* 所有可点元素去掉点击高亮块 */
  a, button, .chip, .nav-item, .filter-tab, .card, .stat-card {
    -webkit-tap-highlight-color: transparent;
  }
  /* 允许长按选中文字（复制单号等），但禁止整体禁止选择 */
  /* 第十三批已删：.no-select —— 这个类在 JS/HTML 里从没被用过 */
}

/* ---------------------------------------------------------------- 应用骨架 */
@media (max-width: 820px) {
  .app {
    height: 100dvh;
    min-height: 100dvh;
  }
  .main-content {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  .view-container {
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------- 侧边栏 → 抽屉 */
@media (max-width: 820px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 264px;
    max-width: 84vw;
    height: 100dvh;
    transform: translateX(-102%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 400;
    box-shadow: 6px 0 28px var(--color-shadow-28);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }

  /* 抽屉遮罩 */
  .sidebar-scrim {
    display: block;
    position: fixed; inset: 0;
    background: var(--color-shadow-42);
    z-index: 390;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s ease, visibility 0.26s ease;
  }
  .sidebar-scrim.open { opacity: 1; visibility: visible; }

  /* 抽屉里的文字恢复显示（style.css 的 768px 断点把文字全藏了，这里改回抽屉式全文字） */
  .sidebar-logo .logo-text { display: block; }
  .sidebar-footer .user-info { display: block; }
  .nav-item span:not(.nav-icon) { display: inline; }
  .nav-badge { display: block; }
  .sidebar-logo { padding: calc(16px + env(safe-area-inset-top)) 18px 16px; }
  .nav-item { padding: 13px 14px; font-size: 15px; }
  .nav-icon { font-size: 17px; width: 24px; }
  /* 抽屉底部：账号信息 + 退出 */
  .sidebar-footer { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- 顶栏 */
@media (max-width: 820px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 300;
    height: auto;
    min-height: 52px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    flex-wrap: wrap;
    row-gap: 8px;
    background: var(--color-bg-glass);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border-light);
  }
  .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .topbar-left h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-left p { display: none; }   /* 副标题在手机上占空间，隐藏 */

  /* 汉堡按钮 */
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    margin-left: -6px;
    border-radius: 10px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 17px;
  }
  .mobile-menu-btn:active { background: var(--color-bg-hover); }

  .topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 100%;
    order: 3;
  }
  .role-badge { display: none; }      /* 角色在抽屉里能看到，手机上省空间 */

  /* 搜索框占满一行，可输入 */
  .topbar-right .search-box {
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .topbar-right .search-box input { height: 38px; font-size: 16px; }

  /* 「+ 需求提单」按钮在手机上只留图标 + 短文案 */
  .topbar-right .btn-primary { flex: none; min-height: 38px; padding: 0 14px; font-size: 14px; }
}

/* ---------------------------------------------------------------- 主列表表格 → 卡片 */
@media (max-width: 820px) {
  .table-wrap { overflow-x: visible; }

  /* 注意：tr 不写 width:100%（写死会加上左右 margin 造成横向溢出），
     让它作为块级元素自动撑满「容器宽度 - 左右 margin」。 */
  .order-table,
  .order-table tbody { display: block; width: 100%; }
  .order-table tr { display: block; }
  .order-table td { display: block; width: 100%; }

  .order-table thead { display: none; }   /* 表头文案由 JS 注入 td[data-label] */

  .order-table tr {
    margin: 10px 10px 0;
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .order-table tr:last-child { margin-bottom: 10px; }

  .order-table td {
    display: grid;
    grid-template-columns: minmax(60px, 38%) 1fr;
    align-items: start;
    gap: 2px 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 14px;
    text-align: left;
  }
  .order-table td:last-child { border-bottom: none; }
  .order-table td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    padding-top: 1px;
    /* 不加 nowrap：最长的列名是「下单部门 / 下单人」，窄屏上要能换行 */
    overflow-wrap: anywhere;
  }
  /* 单元格里的元素统一落在第 2 列；多个元素依次向下堆叠 */
  .order-table td > * { grid-column: 2; min-width: 0; }
  .order-table td > * + * { margin-top: 2px; }

  /* 首列（订单号）做卡片眉标 */
  .order-table td:first-child {
    background: var(--color-bg);
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .order-table td:first-child::before { color: var(--color-text-secondary); }

  /* 操作列：按钮铺满一行 */
  .order-table td:last-child { grid-template-columns: 1fr; }
  .order-table td:last-child::before { display: none; }
  .order-table td:last-child > * { grid-column: 1; }
  .row-actions { flex-wrap: wrap; gap: 8px; }
  .row-actions .btn-text,
  .row-actions .btn-danger,
  .row-actions button {
    flex: 1 1 auto;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    text-align: center;
  }
  .row-actions .btn-danger { color: var(--color-danger); border-color: var(--color-danger-border); }

  /* 进度条在卡片里独占一行 */
  .progress-mini { width: 100%; }
  .order-table td .progress-mini + span { font-size: 11px; }
}

/* ---------------------------------------------------------------- 复杂表格（报价/明细）→ 横向滚动 */
@media (max-width: 820px) {
  /* 这些表在弹窗里，列多且有勾选交互，强行卡片化会难用，保留横向滚动 */
  .quote-table,
  .sg-table { min-width: 640px; }
  .quote-table th,
  .quote-table td { padding: 9px 11px; font-size: 12.5px; }
  .table-wrap.m-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 滚动提示条（只给横向滚动的宽表格加，class 由 JS 打） */
  .table-wrap.m-scroll-x::after {
    content: '← 左右滑动查看更多';
    display: block;
    position: sticky;
    left: 0;
    padding: 5px 0;
    font-size: 11px;
    color: var(--color-text-tertiary);
    text-align: center;
  }
}

/* ---------------------------------------------------------------- 弹窗 → 底部抽屉 */
@media (max-width: 820px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-dialog,
  .modal-dialog.wide {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    animation: none;
  }
  .modal-overlay.open .modal-dialog { transform: translateY(0); }
  .modal-header {
    padding: 14px 16px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
  }
  .modal-header h3 { font-size: 16px; }
  .modal-body {
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* app.js 里有 4 处内联 max-height:62vh / 60vh（弹窗内容区），
     手机上会白白浪费一半屏幕；内联样式优先级更高，这里必须 !important 覆盖。 */
  .modal-body { max-height: none !important; }
  .modal-body > div[style*="max-height"] { max-height: none !important; overflow: visible !important; }
  .modal-footer {
    position: sticky;
    bottom: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    gap: 10px;
  }
  /* 第十四批：需求编辑器底部现在有 3 个按钮（取消 / 继续添加 / 提交需求）。
     三个按钮各占 1/3 宽（≈109px @375px 屏），「继续添加」4 个字（13px 字号）
     约 88px —— 刚好放得下。min-width:0 是保险：万一以后再加按钮，
     让它能缩而不是把底栏撑出屏幕。 */
  .modal-footer button { flex: 1 1 0; min-height: 44px; justify-content: center; min-width: 0; }

  /* 需求编辑弹窗：手机上不提供「拖动 / 缩放」，只保留关闭按钮 */
  #reqEditorOverlay .modal-dialog { resize: none; width: 100%; max-width: 100%; }
  #reqEditorOverlay .modal-header { cursor: default; touch-action: auto; }
  #reqEditorOverlay .modal-header h3::after { content: none; }
}

/* ---------------------------------------------------------------- 右侧详情抽屉 → 全屏 */
@media (max-width: 820px) {
  .detail-drawer {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    transform: translateY(100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .detail-drawer.open { transform: translateY(0); }
  .drawer-header {
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-white);
  }
  .drawer-header h2 { font-size: 16px; }
  .drawer-close { width: 38px; height: 38px; }
  .drawer-body { padding: 14px 14px calc(28px + env(safe-area-inset-bottom)); }
  .detail-grid { grid-template-columns: 1fr; gap: 10px; }
  .detail-section { margin-bottom: 20px; }
}

/* ---------------------------------------------------------------- 提醒面板 → 全屏 */
@media (max-width: 820px) {
  .notify-panel {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
  }
}

/* ---------------------------------------------------------------- 表单 */
@media (max-width: 820px) {
  .form-grid,
  .form-grid.full,
  .form-grid.project-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .pg-row.cols-4 { grid-template-columns: 1fr !important; }
  /* 第十三批已删：.pg-row.cols-3（.cols-3 整体已删） */
  .form-group-row { grid-template-columns: 1fr !important; }

  .form-label { font-size: 13px; }
  .form-input, .form-textarea, .form-select {
    min-height: 44px;
    padding: 10px 12px;
  }
  .form-textarea { min-height: 84px; }
  .label-hint { font-size: 11px; }

  /* 芯片组：可换行，点击区域够大 */
  .chip-group { flex-wrap: wrap; gap: 8px; }
  .chip {
    padding: 9px 13px;
    font-size: 13.5px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  /* 明细表（交付清单 / 附件清单 / 采买明细）单列 */
  .di-grid { grid-template-columns: 1fr !important; }
  .di-row { padding: 12px; }

  /* 第十三批：分页条在手机上撑满一行，按钮够大（44px 是触控最小舒适尺寸） */
  .pager {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    justify-content: center;
  }
  .pager-info { width: 100%; text-align: center; }
  .pager-btns { width: 100%; justify-content: center; }
  .pager-btn { min-width: 40px; min-height: 40px; padding: 8px 12px; }

  /* 第十三批已删：.form-actions 吸底规则（同名类整体已删） */

  /* 需求提单向导（2 步）：手机上压缩成「序号 + 标题」 */
  .wizard-steps { padding: 0; gap: 8px; justify-content: flex-start; }
  .wizard-step { flex: 0 1 auto; gap: 8px; min-width: 0; }
  .wizard-step .step-desc { display: none; }
  .wizard-step .step-title { font-size: 12.5px; white-space: nowrap; }
  .wizard-line { flex: 1 1 20px; margin: 0 4px; min-width: 12px; }
  .wizard-actions { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .wizard-actions button { min-height: 44px; }

  /* 第十三批已删：.budget-options / .date-triple（同名类整体已删） */

  /* 需求编辑器里的任务类型选择 */
  .req-type-picker { padding: 12px; }
  /* 第二十一批：手机端任务类型卡片改单列（原来 1fr 1fr 两列）。
     两列时每张卡只有 ~170px，而「供应链协同需求」的描述文案很长，
     收缩链（.rtc-text{min-width:0} + .rtc-desc 省略号）在部分手机内核
     （微信 X5 / 老 WebView）里不生效 → 卡片最小宽度被撑到整段文字宽 →
     网格横向溢出，右列被 .form-section{overflow:hidden} 裁掉，
     界面上就只剩左列（新增设计 / 新增影视）。单列后每张卡占满整行，永远可见。 */
  .req-type-cards { grid-template-columns: 1fr !important; gap: 8px; }
  /* min-width:0 兜底：即使旧内核不认 min-width:0 的传播，网格项本身也允许收缩 */
  .req-type-card { padding: 12px !important; min-width: 0; }
  .rtc-title { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- 顶栏搜索 / 筛选条 */
@media (max-width: 820px) {
  .filter-bar {
    padding: 10px 12px;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .filter-tabs { flex: none; }
  .filter-tab { padding: 8px 13px; font-size: 13px; white-space: nowrap; }
  .filter-select { min-height: 38px; font-size: 14px; }
}

/* ---------------------------------------------------------------- 工作台 / 统计卡 */
@media (max-width: 820px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .stat-card { padding: 12px 13px; }
  .stat-value { font-size: 24px; }
  .stat-label { font-size: 12px; }
}

/* ---------------------------------------------------------------- 任务管理 / 时间线 */
@media (max-width: 820px) {
  .req-detail-card { padding: 12px; }
  .req-detail-header { flex-wrap: wrap; gap: 6px; }
  .req-detail-header > span { font-size: 13px; }
  .timeline-item { padding-left: 18px; }
  .draft-item { flex-wrap: wrap; }
  .sla-panel { font-size: 12px; }
  .designer-grid { grid-template-columns: 1fr !important; gap: 10px; padding: 12px !important; }
  .designer-pick-grid { grid-template-columns: 1fr !important; }
  .summary-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------------------------------------------------------------- Toast */
@media (max-width: 820px) {
  .toast {
    top: auto;
    /* 第二十三批：原来 20px 会被部分手机/微信的底部工具栏挡住，点不到也看不清；
       抬高到 28px + 安全区，并配合 App 的「点一下关闭」 */
    bottom: calc(28px + env(safe-area-inset-bottom));
    right: 12px;
    left: 12px;
    transform: translateY(140%);
    text-align: center;
    font-size: 14px;
    padding: 12px 16px;
    max-width: none;
  }
  .toast.show { transform: translateY(0); }
}

/* ---------------------------------------------------------------- 登录页（手机优先） */
@media (max-width: 820px) {
  .login-overlay {
    padding: 0;
    align-items: flex-start;
    background: linear-gradient(160deg, var(--color-primary-gradient-1) 0%, var(--color-primary-gradient-2) 45%, var(--color-primary-50) 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .login-box {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    padding: calc(40px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: none;
  }
  .login-logo { justify-content: center; margin-bottom: 26px; }
  .login-logo .logo-icon { width: 52px; height: 52px; font-size: 20px; }
  .login-title { font-size: 20px; }
  .login-form .form-group { margin-bottom: 16px; }
  .login-form .form-label { font-size: 13px; margin-bottom: 6px; }
  .login-form .form-input {
    height: 50px;
    font-size: 16px;         /* 16px 以下 iOS 会自动放大 */
    border-radius: 10px;
    background: var(--color-bg-stone);
  }
  .login-btn {
    height: 50px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
    margin-top: 4px;
  }
  .login-error { font-size: 13px; min-height: 20px; }
  .login-hint {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    text-align: center;
    background: var(--color-bg);
    border-radius: 10px;
    padding: 10px 12px;
  }
}

/* ---------------------------------------------------------------- 键盘弹出时的补偿 */
@media (max-width: 820px) and (max-height: 520px) {
  /* 横屏 + 键盘弹出：登录框上移，别让输入框被挡住 */
  .login-box { min-height: auto; justify-content: flex-start; padding-top: calc(16px + env(safe-area-inset-top)); }
  .login-logo { margin-bottom: 16px; }
  .modal-dialog, .detail-drawer { max-height: 100dvh; height: 100dvh; border-radius: 0; }
}

/* ---------------------------------------------------------------- 打印 */
@media print {
  .mobile-menu-btn, .sidebar-scrim { display: none !important; }
}