/* ============================================================================
   polish.css — 视觉与移动端增强（2026-10-22）
   ⛔ 只做「加法」：仅新增圆角/阴影/过渡/焦点态/触控尺寸/手机端细节。
   ⛔ 不改变任何既有布局规则（display / width / height / position 一律不动），
      唯一例外：手机端允许表格容器横向滚动、弹层贴边。
   ⛔ 不覆盖任何既有选择器的核心属性，全部用独立变量 --polish-*。
   这样即使某个页面样式表加载顺序变化，也不会把原界面改坏。
   ========================================================================== */

:root{
  --polish-radius: 12px;
  --polish-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.18);
  --polish-shadow-hover: 0 2px 6px rgba(15,23,42,.08), 0 16px 32px -16px rgba(15,23,42,.26);
}

/* ---------- 卡片 / 面板 / KPI：统一圆角与轻阴影 ---------- */
.panel, .card, .stat, .kpi, .taskcard{
  border-radius: var(--polish-radius);
  box-shadow: var(--polish-shadow);
  transition: box-shadow .18s ease;
}
.kpi:hover, .card:hover, .stat:hover, .taskcard:hover{ box-shadow: var(--polish-shadow-hover); }

/* ---------- 按钮：过渡 + 按下反馈（不改尺寸） ---------- */
button, .act, .ghost, .mini, .pri, .btn{
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
button:active, .act:active, .btn:active{ transform: translateY(1px); }

/* ---------- 表单：统一焦点环 ---------- */
input, select, textarea{
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* ---------- 表格：表头更清晰 + 行悬停（只改颜色） ---------- */
table th{ font-weight: 700; }
table tbody tr:hover > td{ background: #f8fafc; }

/* ---------- 滚动条（仅桌面，避免手机出现双滚动条） ---------- */
@media (min-width: 768px){
  *::-webkit-scrollbar{ width: 10px; height: 10px; }
  *::-webkit-scrollbar-track{ background: transparent; }
  *::-webkit-scrollbar-thumb{
    background: #cbd5e1; border-radius: 8px;
    border: 2px solid transparent; background-clip: content-box;
  }
  *::-webkit-scrollbar-thumb:hover{ background: #94a3b8; background-clip: content-box; }
}

/* ============================================================================
   手机端（≤640px）：只做「更易点、不被撑宽、弹层不被裁」三类修正
   ========================================================================== */
@media (max-width: 640px){
  /* 1) 触控目标不小于 40px（只加 min-height，不改宽度） */
  button, .act, .ghost, .mini, .pri, .btn, select,
  input[type="text"], input[type="password"], input[type="date"],
  input[type="number"], input[type="tel"]{
    min-height: 40px;
  }

  /* 2) 表格统一横向滚动，避免整页被表格撑宽（common.js 会自动包 .table-scroll） */
  .table-scroll, .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 晚于 common.js 渲染（Vue 后插入）而没被包裹的表格：
     让表格自身横向滚动。已被 .table-scroll 包裹的恢复普通表格显示，
     避免「双重滚动容器」。只改 display/overflow，不动列宽与结构。 */
  table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-scroll > table{
    display: table;
    overflow: visible;
  }

  /* 3) 主内容与卡片留白更紧凑（不改布局方式） */
  main{ padding-left: 10px; padding-right: 10px; }
  .panel{ padding: 12px; }

  /* 4) 弹层贴边，避免小屏两侧被裁 */
  .loginmask .box,
  .loginmask > div{
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* 5) 常用功能条：横向滚动而不是换三行；编辑按钮固定右侧 */
  .quickbar{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .quickbar .qb-edit{ position: sticky; right: 0; background: #fff; }

  /* 6) 看板柱状图允许横向滚动，不挤压变形 */
  .qbars{ overflow-x: auto; }
}

/* ---------- 尊重「减少动态效果」偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  .panel, .card, .stat, .kpi, .taskcard,
  button, .act, .ghost, .mini, .pri, .btn, input, select, textarea{
    transition: none !important;
  }
}