/* ==========================================================================
   翰轩文化管理系统 · 手机端适配层
   mobile.css  —— 只作用于窄屏 (<= 900px)，电脑端样式完全不受影响
   配合 mobile.js 使用
   ========================================================================== */

@media (max-width: 900px) {

  /* ---------------------------------------------------------------- 1. 基础 */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #ecf0f5;
  }

  body.m-lock {
    overflow: hidden;
  }

  button,
  a,
  label,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  /* 16px 可避免 iOS 聚焦时自动放大页面 */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  button {
    -webkit-tap-highlight-color: transparent;
  }

  /* ------------------------------------------------------------ 2. 布局骨架 */
  .app-shell {
    display: block;
    grid-template-columns: none;
    min-height: 100vh;
  }

  .main {
    min-height: 100vh;
  }

  /* ---- 侧边栏 -> 右侧抽屉（栏目 4 列网格） ---- */
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    z-index: 70;
    width: min(94vw, 440px);
    max-width: none;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translate3d(102%, 0, 0);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -8px 0 34px rgba(4, 20, 30, .42);
  }

  .sidebar.open {
    transform: translate3d(0, 0, 0);
  }

  /* 品牌行 / 分组标题各占满一整行 */
  .sidebar .side-brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 4px;
    margin: 0;
  }

  .sidebar .side-brand div {
    display: block;
  }

  .sidebar .side-brand .mark {
    width: 30px;
    height: 30px;
  }

  .sidebar .nav-section {
    grid-column: 1 / -1;
    display: block;
    margin: 0;
    padding: 6px 4px 2px;
  }

  /* 子菜单直接并入网格，保证 收入记账/人员管理 等也能点到 */
  .sidebar .nav-sublist,
  .sidebar .nav-sublist.open {
    display: contents;
  }

  .sidebar .nav-item,
  .sidebar .nav-subitem {
    width: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px;
    border: 0;
    border-left: 0;
    border-radius: 12px;
    color: #c7dce4;
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
  }

  .sidebar .nav-item span {
    display: block;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .sidebar .nav-item:hover,
  .sidebar .nav-item.active,
  .sidebar .nav-subitem:hover,
  .sidebar .nav-subitem.active {
    border-left: 0;
    color: #fff;
    background: rgba(24, 188, 156, .92);
  }

  .m-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(9, 20, 28, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .m-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  /* ---- 顶部栏 -> APP 标题栏 ---- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 45;
    height: 52px;
    min-height: 52px;
    gap: 4px;
    padding: 0 8px 0 2px;
    border-bottom: 1px solid #e3e9ef;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
  }

  .top-left {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    gap: 0;
  }

  .top-left .top-tab {
    display: none;
  }

  .top-actions {
    flex: 0 0 auto;
    gap: 0;
  }

  .top-actions .site-search,
  .top-actions .cache-btn,
  .top-actions .user-btn,
  .top-actions .top-menu-btn[title="全屏"] {
    display: none;
  }

  .topbar .top-menu-btn {
    min-width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .topbar .top-menu-btn:active {
    background: rgba(16, 32, 44, .07);
  }

  .topbar .mobile-toggle {
    display: none;
  }

  .m-appbar-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #16232c;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .m-appbar-title small {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 400;
  }

  /* ---- 内容区 ---- */
  .content {
    padding: 10px 10px calc(20px + env(safe-area-inset-bottom));
    background: #ecf0f5;
  }

  .fast-tabs {
    display: none;
  }

  .admin-footer {
    display: none;
  }

  /* ---- 内容区顶部栏目网格（4 列，贴在大屏卡片上方） ---- */
  .m-navgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
  }

  .m-navgrid-item {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px;
    border: 0;
    border-radius: 12px;
    color: #33414e;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
  }

  .m-navgrid-item span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .m-navgrid-item:active {
    background: #eef4f8;
  }

  .m-navgrid-item.active {
    color: #fff;
    background: #18bc9c;
    box-shadow: 0 6px 14px rgba(24, 188, 156, .32);
  }

  /* ---- 顶部栏目导航（由 mobile.js 注入） ---- */
  .m-topnav {
    position: sticky;
    top: 52px;
    z-index: 44;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid #e6ecf2;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }

  .m-topnav::-webkit-scrollbar {
    display: none;
  }

  .m-topnav-item {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #e4ebf1;
    border-radius: 17px;
    color: #43596d;
    background: #f6f9fb;
    font-size: 14px;
    white-space: nowrap;
  }

  .m-topnav-item.active {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #18bc9c, #2fcfb1);
    box-shadow: 0 6px 14px rgba(24, 188, 156, .28);
    font-weight: 700;
  }

  .m-topnav-item:active {
    opacity: .82;
  }

  /* ---- 搜索浮层 ---- */
  .m-searchbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 10px;
    border-bottom: 1px solid #e3e9ef;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .08);
    transform: translateY(-105%);
    transition: transform .22s ease;
  }

  .m-searchbar.show {
    transform: translateY(0);
  }

  .m-searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    outline: 0;
    background: #f4f7f9;
  }

  .m-searchbar button {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    color: #475569;
    background: #eef2f6;
    font-size: 14px;
  }

  /* -------------------------------------------- 3. 标签页 / 工具条 / 筛选 */
  .lead-tabs,
  .approval-tabs,
  .contract-tabs,
  .customer-tabs,
  .project-tabs,
  .quote-tabs,
  .finance-tabs,
  .supplier-tabs,
  .overview-tabs,
  .lead-edit-tabs,
  .follow-record-tab {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 10px 0;
  }

  .lead-tabs::-webkit-scrollbar,
  .approval-tabs::-webkit-scrollbar,
  .contract-tabs::-webkit-scrollbar,
  .customer-tabs::-webkit-scrollbar,
  .project-tabs::-webkit-scrollbar,
  .quote-tabs::-webkit-scrollbar,
  .finance-tabs::-webkit-scrollbar,
  .supplier-tabs::-webkit-scrollbar,
  .overview-tabs::-webkit-scrollbar,
  .lead-edit-tabs::-webkit-scrollbar,
  .follow-record-tab::-webkit-scrollbar {
    display: none;
  }

  .lead-tabs button,
  .approval-tabs button,
  .contract-tabs button,
  .customer-tabs button,
  .project-tabs button,
  .quote-tabs button,
  .finance-tabs button,
  .supplier-tabs button,
  .overview-tabs button,
  .lead-edit-tabs button {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 14px;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
  }

  /* 工具条：竖排 */
  .lead-toolbar,
  .approval-toolbar,
  .admin-table-toolbar,
  .exhibition-toolbar,
  .follow-record-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .lead-left-tools {
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    padding-bottom: 2px;
  }

  .lead-left-tools::-webkit-scrollbar {
    display: none;
  }

  .lead-tool {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 13px;
  }

  .approval-tools {
    width: 100%;
    gap: 8px;
  }

  .approval-search {
    flex: 1 1 auto;
    min-width: 0;
  }

  .approval-search input,
  .approval-search.wide input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: 9px;
  }

  .approval-icon,
  .approval-refresh {
    flex: 0 0 auto;
    min-width: 40px;
    height: 38px;
  }

  /* 列设置 / 导出下拉：贴边不溢出 */
  .column-menu,
  .export-menu,
  .import-team-menu {
    position: fixed;
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: 52vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 -6px 30px rgba(15, 23, 42, .22);
  }

  .column-menu label {
    height: 42px;
    font-size: 15px;
  }

  /* 筛选面板 */
  .approval-filter-panel,
  .data-filter-panel,
  .contract-filter-panel,
  .common-lead-filter-panel,
  .exhibition-search-panel,
  .performance-filters,
  .filter-actions {
    display: block !important;
    width: 100%;
  }

  .approval-filter-panel > *,
  .data-filter-panel > *,
  .contract-filter-panel > *,
  .common-lead-filter-panel > *,
  .exhibition-search-panel > *,
  .performance-filters > * {
    width: 100%;
    margin: 0 0 10px;
  }

  .approval-filter-panel input,
  .approval-filter-panel select,
  .data-filter-panel input,
  .data-filter-panel select,
  .contract-filter-panel input,
  .contract-filter-panel select,
  .common-lead-filter-panel input,
  .common-lead-filter-panel select,
  .exhibition-search-panel input,
  .exhibition-search-panel select {
    width: 100%;
    height: 42px;
  }

  .filter-actions button,
  .common-lead-filter-actions button {
    flex: 1 1 0;
    height: 42px;
  }

  /* ------------------------------------------------------- 4. 表格卡片化 */
  .lead-table,
  .approval-table,
  .admin-table,
  .overview-table,
  .finance-table,
  .exhibition-table,
  .contract-table,
  .project-table,
  .quote-table,
  .supplier-table,
  .customer-table,
  .common-customer-table,
  .common-lead-table,
  .permission-table,
  .builder-table,
  .builder-order-table,
  .invoice-table,
  .factory-material-table {
    min-width: 0 !important;
    width: 100%;
  }

  /* 全局样式里 table 有 min-width: 820px，手机上必须去掉，否则整页被撑宽 */
  table {
    min-width: 0 !important;
  }

  /* 报价单 / 工厂单 / 截图这类打印版式表格保留最小宽度，交给容器横向滚动 */
  .quote-sheet-modal table,
  .quote-sheet-body table,
  .factory-sheet-modal table,
  .screenshot-modal table {
    min-width: 620px !important;
  }

  .quote-sheet-body,
  .quote-sheet-modal,
  .factory-sheet-body,
  .factory-sheet-modal,
  .screenshot-modal {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.m-cards {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  table.m-cards thead {
    display: none;
  }

  table.m-cards tbody {
    display: block;
  }

  table.m-cards tbody tr {
    display: block;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #e5ebf1;
    border-radius: 12px;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
  }

  table.m-cards tbody tr:nth-child(odd) {
    background: #fff !important;
  }

  table.m-cards tbody tr:active {
    background: #f8fbfd !important;
  }

  table.m-cards tbody tr:hover {
    background: #fff !important;
  }

  table.m-cards td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px dashed #eef2f6;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
    text-align: right;
    white-space: normal;
    word-break: break-word;
  }

  table.m-cards td:last-child {
    border-bottom: 0;
  }

  table.m-cards td::before {
    content: attr(data-label);
    flex: 0 0 80px;
    color: #8b95a1;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: normal;
  }

  table.m-cards td:not([data-label])::before {
    content: none;
  }

  /* 勾选列：手机上显示在卡片左上角，批量操作同样可用 */
  table.m-cards td.check-col {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    border: none;
  }

  table.m-cards td.check-col input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #18bc9c;
    vertical-align: middle;
  }

  /* 首列作为卡片标题 */
  table.m-cards td.m-primary {
    display: block;
    margin: 0 0 8px;
    padding: 0 0 9px;
    border-bottom: 1px solid #eef2f6;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    line-height: 1.4;
  }

  table.m-cards td.m-primary::before {
    content: none;
  }

  table.m-cards td.m-primary a,
  table.m-cards td.m-primary .customer-name-link {
    color: #0f172a;
  }

  /* 操作列 */
  table.m-cards td.m-actions {
    display: block;
    padding: 12px 0 2px;
    text-align: left;
  }

  table.m-cards td.m-actions::before {
    content: none;
  }

  table.m-cards .lead-row-actions,
  table.m-cards .customer-row-actions,
  table.m-cards .contract-actions,
  table.m-cards .admin-row-actions,
  table.m-cards .builder-order-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
  }

  table.m-cards .lead-action,
  table.m-cards .mini-action,
  table.m-cards .contract-action,
  table.m-cards .review-btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
  }

  table.m-cards .lead-action.edit,
  table.m-cards .lead-action.archive,
  table.m-cards .mini-action {
    min-width: 38px;
  }

  /* 空状态 */
  table.m-cards td.empty-row {
    display: block;
    padding: 26px 0;
    border: 0;
    color: #94a3b8;
    text-align: center;
  }

  table.m-cards td.empty-row::before {
    content: none;
  }

  /* 卡片内进度条 / 标签自适应 */
  table.m-cards .row-title {
    white-space: normal;
  }

  .interactive-progress,
  .phase-progress,
  .project-progress {
    min-width: 0;
    max-width: 100%;
  }

  /* ------------------------------------------------- 5. 卡片 / KPI / 大屏 */
  .screen-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .metric-grid,
  .screen-grid,
  .builder-kpis,
  .visual-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .screen-kpi {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 10px 12px;
    border-radius: 12px;
  }

  .screen-kpi-icon {
    width: 30px;
    height: 30px;
  }

  .screen-kpi strong {
    margin: 2px 0 0;
    font-size: 14px;
    letter-spacing: -.3px;
    word-break: break-all;
  }

  .screen-kpi span,
  .screen-kpi small {
    font-size: 11px;
    line-height: 1.3;
  }

  .screen-analytics-grid,
  .grid-two,
  .hero-panel,
  .screen-donut-wrap,
  .screen-event-list,
  .screen-analytics-page .grid-two {
    grid-template-columns: 1fr !important;
  }

  .balance-panel,
  .deposit-panel,
  .month-panel {
    grid-column: auto;
  }

  .screen-view,
  .screen-analytics-page,
  .overview-page {
    min-height: 0;
    padding: 12px;
    border-radius: 14px;
  }

  .screen-panel,
  .panel,
  .table-card,
  .metric-card,
  .lead-card,
  .approval-card,
  .contract-card,
  .exhibition-card,
  .project-card,
  .quote-card,
  .finance-card,
  .customer-card,
  .supplier-card,
  .common-customer-card,
  .common-lead-card,
  .admin-list-card,
  .builder-page > section {
    padding: 12px;
    border-radius: 12px;
  }

  .lead-page,
  .customer-page,
  .contract-page,
  .exhibition-page,
  .project-page,
  .quote-page,
  .supplier-page,
  .finance-page,
  .approval-page,
  .admin-list-page,
  .common-customer-page,
  .common-lead-page,
  .builder-page,
  .screen-analytics-page {
    min-height: 0;
    padding: 0;
  }

  .screen-bar-chart,
  .screen-rank-bars,
  .bars,
  .funnel-panel,
  .donut-panel {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  /* 网格子项默认 min-width:auto 会被内容撑宽，这里统一压掉 */
  .screen-analytics-grid,
  .grid-two,
  .metric-grid,
  .screen-grid,
  .screen-kpis,
  .money-grid,
  .expense-grid,
  .builder-kpis,
  .visual-metrics {
    min-width: 0;
  }

  .screen-analytics-grid > *,
  .grid-two > *,
  .metric-grid > *,
  .screen-grid > *,
  .screen-kpis > *,
  .money-grid > *,
  .expense-grid > * {
    min-width: 0;
    /* 桌面端给面板指定了跨列（grid-column: 1/3 等），窄屏下会被撑出隐式列 */
    grid-column: auto !important;
  }

  .screen-project-board,
  .screen-project-body,
  .project-board-panel {
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    overflow-x: auto;
  }

  .screen-project-row,
  .screen-project-head {
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  .screen-project-head {
    display: none;
  }

  .screen-project-row {
    padding: 10px 12px;
  }

  .screen-project-row > strong,
  .screen-project-row > a,
  .screen-project-row > span {
    min-height: 0;
    justify-content: space-between;
    padding: 6px 0;
    border-right: 0;
    border-bottom: 1px dashed #eef2f6;
    text-align: right;
  }

  .screen-project-progress {
    padding: 8px 0 0;
  }

  .screen-project-phase em {
    width: 62px;
  }

  .hero-banner {
    padding: 16px;
  }

  /* -------------------------------------------------------- 6. 表单 / 弹窗 */
  .modal,
  .modal-backdrop > *,
  [class*="-backdrop"] > *,
  [class*="-modal"] {
    max-width: 100% !important;
  }

  .modal-backdrop,
  [class*="backdrop"] {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .modal-backdrop > .modal,
  [class*="backdrop"] > * {
    width: 100% !important;
    max-height: 94vh !important;
    margin: 0 !important;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(15, 23, 42, .28);
  }

  /* 全屏模态（合同 / 工厂单 / 报价单等）在手机上占满整屏 */
  .full-modal-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
    background: rgba(15, 27, 34, .46) !important;
  }

  .full-modal-backdrop > .full-screen-modal,
  .full-screen-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none;
  }

  .follow-modal-head {
    height: 48px;
    padding: 0 8px 0 14px;
  }

  .follow-window-actions span {
    display: none;
  }

  .follow-window-actions button {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .contract-add-body {
    padding: 12px 0 18px;
  }

  .contract-section-title {
    height: 38px;
    margin: 0 12px;
    border-radius: 8px 8px 0 0;
  }

  /* 3 列 300px 的合同表单在手机上改为单列 */
  .contract-add-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin: 0 12px !important;
    padding: 14px 12px 18px !important;
    border-radius: 0 0 8px 8px;
  }

  /* 标签 + 控件的两列版式：收窄标签列，保证输入框够宽 */
  .shot-field,
  .shot-tag-field,
  .shot-field.with-action {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 10px;
    margin-bottom: 12px;
  }

  .shot-field > span,
  .shot-radio-line > span,
  .shot-tag-field > span {
    text-align: left;
  }

  .shot-field.with-action button,
  .upload-row button {
    min-width: 0;
    padding: 0 10px;
  }

  .shot-field input,
  .shot-field select,
  .shot-field textarea,
  .shot-range input {
    min-height: 42px;
  }

  /* 起止日期仍要保持左右并排 */
  .shot-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
  }

  /* 单选行改成可换行的 flex，避免多个选项被挤成竖排 */
  .shot-radio-line {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
  }

  .shot-radio-line > span {
    flex: 0 0 84px;
  }

  .shot-radio-line .mini-text {
    width: 96px;
    flex: 0 0 auto;
  }

  /* 附件行：输入框占满一行，按钮另起一行 */
  .upload-row {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) auto !important;
    gap: 8px 10px;
  }

  .upload-row > .upload-text {
    grid-column: 2 / -1;
  }

  .shot-modal-foot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  }

  .shot-modal-foot > button {
    flex: 1 1 auto;
    min-height: 46px;
    border-radius: 10px;
    font-size: 16px;
  }

  .modal-head,
  [class*="-modal-head"],
  [class*="-add-head"] {
    position: sticky;
    top: -16px;
    z-index: 3;
    margin: -16px -14px 12px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid #eef2f6;
    background: #fff;
  }

  /* .follow-modal-head 属于深色标题栏，上面那条 [class*="-modal-head"] 会把它刷成白底，
     导致「白字白底」看不到标题和关闭按钮，这里显式还原。 */
  /* 弹窗层级必须高于顶部栏(45)/栏目导航(44)/侧边栏遮罩(65)，
     否则弹窗的标题栏和关闭按钮会被顶部栏盖住 —— 看起来像「点了没反应 / 关不掉」。 */
  .modal-backdrop {
    z-index: 80;
  }

  .toast {
    z-index: 95;
  }

  .follow-modal-head {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 48px;
    margin: 0;
    padding: 0 8px 0 14px;
    border-bottom: 0;
    background: #26394b;
    color: #fff;
  }

  .follow-modal-head strong {
    font-size: 15px;
    font-weight: 600;
  }

  .modal-head h3 {
    font-size: 17px;
  }

  .form-grid,
  .contract-add-grid,
  .convert-extra-content,
  .builder-notice-grid,
  .builder-fee-panel,
  .exhibition-fee-row,
  .exhibition-add-content,
  .lead-edit-main-panel,
  .lead-edit-modal,
  .lead-edit-body,
  .convert-modal-body,
  .invoice-add-body,
  .personnel-modal-body,
  .permission-modal-body,
  .permission-tree,
  .quote-sheet-info,
  .money-grid,
  .expense-grid,
  .address-selects,
  .follow-form-panel,
  .import-template-fields {
    grid-template-columns: 1fr !important;
    display: block;
    gap: 12px;
  }

  .form-grid .wide,
  .field {
    grid-column: auto;
  }

  .field {
    margin-bottom: 14px;
  }

  .field .control input,
  .field .control select,
  .field .control textarea,
  .modal input,
  .modal select,
  .modal textarea,
  [class*="modal"] input[type="text"],
  [class*="modal"] input[type="number"],
  [class*="modal"] input[type="date"],
  [class*="modal"] select {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
  }

  .modal textarea,
  .fake-editor,
  .builder-notice-editor {
    min-height: 110px;
  }

  .row-between,
  .modal-foot,
  [class*="-modal-foot"],
  [class*="-add-foot"],
  .convert-modal-foot,
  .follow-modal-foot,
  .money-foot,
  .customer-contract-foot,
  .permission-modal-foot,
  .personnel-modal-foot,
  .invoice-add-foot,
  .pool-modal-foot,
  .factory-foot,
  .shot-modal-foot,
  .customer-recycle-foot {
    position: sticky;
    bottom: calc(-18px - env(safe-area-inset-bottom));
    z-index: 3;
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px -14px calc(-18px - env(safe-area-inset-bottom));
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #eef2f6;
    background: #fff;
  }

  .row-between > button,
  .modal-foot > button,
  [class*="-modal-foot"] > button,
  [class*="-add-foot"] > button {
    flex: 1 1 0;
    min-width: 110px;
    min-height: 46px;
    border-radius: 10px;
    font-size: 15px;
  }

  /* 弹窗内的小表格保持可横向滚动 */
  .modal table,
  [class*="modal"] table {
    width: 100%;
  }

  .quote-detail-table,
  .follow-record-table,
  .factory-info-table,
  .quote-sheet-info table {
    min-width: 0 !important;
  }

  .date-picker-popover {
    position: fixed;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 14px;
  }

  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    text-align: center;
    border-radius: 12px;
    font-size: 14px;
  }

  /* -------------------------------------------------------------- 7. 分页 */
  .approval-footer,
  .list-pagination,
  .common-customer-footer,
  .exhibition-footer,
  .admin-table-footer {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 calc(4px + env(safe-area-inset-bottom));
  }

  .approval-pagination button,
  .approval-pagination input {
    min-width: 38px;
    height: 38px;
    border-radius: 9px;
    font-size: 14px;
  }

  .page-size {
    width: 100%;
    justify-content: center;
    margin: 0 0 8px;
  }

  /* ------------------------------------------------------------ 8. 登录页 */
  .clone-login {
    min-height: 100vh;
  }

  .clone-login .leftBottom,
  .clone-login .rightTop {
    display: none;
  }

  .clone-login .login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
  }

  .clone-login .login-screen {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 0;
  }

  .clone-login .well {
    min-height: 0;
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(4, 20, 30, .16);
  }

  .clone-login .login-head {
    display: none;
  }

  .clone-login .login-form {
    float: none;
    width: 100%;
    min-height: 0;
    padding: 40px 22px 30px;
    border-radius: 18px;
  }

  .clone-login .profile-name-card {
    font-size: 20px;
    padding-bottom: 6px;
  }

  .clone-login #login-form .form-control,
  .clone-login .input-group {
    min-height: 48px;
  }

  .clone-login .btn {
    min-height: 48px;
    line-height: 48px;
    border-radius: 10px;
    font-size: 17px;
  }

  .login-shell {
    padding: 0;
  }

  /* ------------------------------------------------ 9. 卡片摘要 / 展开 */
  table.m-cards td.m-extra {
    display: none;
  }

  /* ID / 序号 这类列在手机上不展示 */
  table.m-cards td.m-hide {
    display: none !important;
  }

  table.m-cards tbody tr.m-expanded td.m-extra {
    display: flex;
  }

  .m-card-more {
    margin-top: 10px;
  }

  .m-card-toggle {
    width: 100%;
    height: 38px;
    border: 1px dashed #d5e0e8;
    border-radius: 9px;
    color: #5b7285;
    background: #f7fafc;
    font-size: 13px;
  }

  .m-card-toggle:active {
    background: #eef4f8;
  }

  /* 筛选面板折叠 */
  form.m-collapsed {
    display: none !important;
  }

  .m-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    margin: 0 0 10px;
    padding: 0 14px;
    border: 1px solid #e2e9ef;
    border-radius: 10px;
    color: #40566b;
    background: #fff;
    font-size: 14px;
  }

  .m-filter-toggle.open {
    border-color: #bfe6dc;
    color: #0f8f78;
  }

  .m-filter-arrow {
    color: #9fb0bf;
    font-size: 12px;
    transition: transform .2s ease;
  }

  .m-filter-toggle.open .m-filter-arrow {
    transform: rotate(180deg);
  }

  /* 空值占位，避免一片空白看不出有没有数据 */
  table.m-cards td.m-empty::after {
    content: "—";
    color: #c3ced9;
  }

  table.m-cards td.m-empty a {
    display: none;
  }

  /* 可点进详情的卡片：标题右侧加箭头 */
  table.m-cards tr.m-tappable td.m-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  table.m-cards tr.m-tappable td.m-primary::after {
    content: "›";
    flex: 0 0 auto;
    color: #b6c4d0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }

  table.m-cards tr.m-tappable:active {
    border-color: #cfe6df;
  }
}

/* 超窄屏：KPI 单列，避免数字被压断 */
@media (max-width: 360px) {
  .screen-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-grid,
  .screen-grid,
  .builder-kpis,
  .visual-metrics {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   追加：栏目网格「收起 / 展开」+ 移动端表单控件微调（仅窄屏生效）
   ========================================================================== */
@media (max-width: 900px) {

  .m-navgrid.m-collapsed {
    max-height: 152px;
    overflow: hidden;
  }

  .m-navgrid-toggle {
    width: 100%;
    margin: -4px 0 10px;
    padding: 7px 0;
    border: 0;
    border-radius: 10px;
    color: #3c8ec9;
    background: #eef5fb;
    font-size: 12.5px;
  }

  .m-navgrid-toggle:active {
    background: #e2edf7;
  }

  /* 手机上日期 / 数字输入框更易点选，且不撑破卡片 */
  #app input[type="date"],
  #app input[type="tel"],
  #app input[type="number"],
  #app input[type="email"] {
    min-width: 0;
    max-width: 100%;
  }
}