/* ============================================================
   食堂管理系统 · 响应式细节优化 & 性能
   ------------------------------------------------------------
   作用于所有断点，加载于 style.css / desktop-pro.css 之后。
   - 移动端：放大触控区域、内容缩略、字体间距
   - 跨断点：渲染性能、滚动体验、可访问性
   - 提供响应式工具类，供视图按需隐藏/显示次要内容
   ============================================================ */

/* ---------- 全局渲染与可访问性 ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
/* 键盘聚焦可见性（可访问性）*/
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.nav-item:focus-visible,.tab:focus-visible{
  outline:2px solid var(--primary,#1aa179);outline-offset:2px;border-radius:4px;
}
/* 图片渲染优化 */
img{image-rendering:auto}

/* ---------- 渲染性能：长列表/卡片跳过离屏渲染 ---------- */
.panel,.note-card{
  content-visibility:auto;contain-intrinsic-size:1px 240px;
}
/* 表格不参与 cv（避免滚动跳变），仅 contain 布局 */
.data-table{contain:layout style}

/* ============================================================
   响应式工具类
   ============================================================ */
/* 移动端隐藏（<1024px）— 桌面端显示 */
@media (max-width:1023px){
  .r-hide-mobile{display:none!important}
}
/* 桌面端隐藏（≥1024px）— 仅移动端显示 */
.r-show-mobile{display:none}
@media (max-width:1023px){
  .r-show-mobile{display:initial}
}
/* 小屏隐藏（<768px） */
.r-hide-sm{display:initial}
@media (max-width:767px){
  .r-hide-sm{display:none!important}
}
/* 极小屏隐藏（<480px） */
.r-hide-xs{display:initial}
@media (max-width:479px){
  .r-hide-xs{display:none!important}
}

/* ============================================================
   非桌面端（≤1023px）触控与表格滚动优化
   ------------------------------------------------------------
   <1024px 时侧栏隐藏、采用纵向移动布局，故触控放大覆盖整个区间
   ============================================================ */
@media (max-width:1023px){
  /* —— 触控区域放大（Apple/WCAG 建议 ≥44px）—— */
  .btn-sm{height:40px;min-height:40px;padding:0 14px;font-size:13px;border-radius:8px}
  .btn-xs{height:36px;min-height:36px;padding:0 12px;font-size:12px;border-radius:6px}
  /* 行内链接按钮：扩大可点区域 */
  .link{min-height:40px;min-width:40px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
  .data-table td .link,.data-table td a.link{min-height:36px;min-width:36px;padding:6px 8px}
  /* 侧栏菜单项触控高度 */
  .sidebar-nav .nav-item{min-height:44px}

  /* —— 表格横向滚动安全（列多时不挤压、可滑动查看）—— */
  .panel:has(.data-table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table{min-width:480px}
  .data-table thead th{white-space:nowrap}

  /* 分页按钮触控放大 */
  .pg{min-width:40px;height:40px}
}

/* ============================================================
   手机端（≤768px）排版与堆叠优化
   ============================================================ */
@media (max-width:768px){
  /* —— 字体与间距：保证最小可读 —— */
  body{font-size:14px}
  .data-table{font-size:13px}
  .data-table td{padding:8px 6px}
  .data-table thead th{padding:8px 6px;font-size:12px}

  /* —— 页面标题与操作行纵向堆叠 —— */
  .page-head{flex-direction:column;align-items:stretch;gap:10px}
  .page-head .admin-nav,.page-head .btn-row{width:100%}
  .page-head .admin-nav .btn,.page-head .btn-row .btn{flex:1;justify-content:center}

  /* 面板头纵向堆叠（标题 + 搜索） */
  .panel-head{flex-direction:column;align-items:stretch;gap:10px}
  .panel-head form.search-inline{width:100%}
  .panel-head form.search-inline input{flex:1;min-width:0;width:100%}

  /* 设置页网格纵向堆叠 */
  .settings-grid{grid-template-columns:1fr}
  .settings-mail{grid-column:span 1}

  /* 统计卡片 2 列，增大点击区 */
  .stat{padding:14px 10px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px}

  /* KV 网格 2 列 */
  .kv{grid-template-columns:repeat(2,1fr);gap:12px}

  /* 表单操作按钮纵向铺满 */
  .form-actions{flex-direction:column-reverse;gap:8px}
  .form-actions .btn{width:100%;min-height:44px;justify-content:center}

  /* 模态框底部按钮纵向铺满，便于触控 */
  .modal .form-actions,.modal-confirm .form-actions{flex-direction:column-reverse;gap:8px}
  .modal .form-actions .btn,.modal-confirm .form-actions .btn{width:100%;min-height:44px;justify-content:center}
}

/* ============================================================
   极小屏（≤480px）进一步缩略
   ============================================================ */
@media (max-width:480px){
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat-num{font-size:22px}
  .stat-label{font-size:11px}
  .kv{grid-template-columns:1fr;gap:10px}
  /* 顶部 chip 在极窄屏隐藏次要文本，保留头像/退出 */
  .topbar-right .chip{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ============================================================
   平板过渡区间（640–1023px）— 两栏统计、留白过渡
   ============================================================ */
@media (min-width:640px) and (max-width:1023px){
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .kv{grid-template-columns:repeat(3,1fr)}
  .content{padding:16px 18px calc(var(--tabbar-h,62px) + 24px)}
}