/* common.css — 云AI酒店管理系统 · 跨模块移动端兼容与触控优化层
 * 设计原则：
 *   1) 仅 @media (max-width:860px) 内的规则生效，桌面端布局完全由各页面自身 <style> 控制，互不破坏；
 *   2) 移动端覆盖规则统一使用 !important，确保无论本文件在 <head> 中先后位置都能胜出；
 *   3) 不改变任何后端逻辑/接口，只做前端展示与交互适配。
 */

/* —— 始终生效（无害、仅触屏反馈/容器）—— */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.legend{overflow-x:auto;-webkit-overflow-scrolling:touch}
a,button{-webkit-tap-highlight-color:rgba(0,0,0,.12)}

/* —— 平板 / 手机（≤860px）—— */
@media (max-width:860px){
  /* 防止 iOS 聚焦输入框时整页缩放；触控目标 ≥40px */
  input,select,textarea{font-size:16px!important}
  button,.btn,nav button,.bar button,input[type=button],input[type=submit]{min-height:40px!important}

  /* 顶部导航 / 模块切换条：横向滚动，避免换行堆叠导致难以点击 */
  nav,.bar{flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;gap:6px!important;padding-left:12px!important;padding-right:12px!important}
  nav button,.bar button{flex:0 0 auto!important;white-space:nowrap!important}

  /* 行内 flex 表单列（后台大量 style="flex:1;min-width:..."）纵向堆叠占满整行 */
  [style*="flex"][style*="min-width"]{flex:1 1 100%!important;min-width:100%!important}

  /* 主区与卡片内边距收紧 */
  main{padding:12px!important}
  .panel,.card{padding:12px!important}

  /* 主操作按钮窄屏占满整行，便于单手操作（不含顶部导航/退出等 ghost） */
  main button.act,.login button.act,.panel button.act,.card button.act{width:100%!important}

  /* 表格在滚动容器内可横向滚动，不再撑破页面 */
  .table-scroll>table{width:max-content!important;min-width:100%!important}

  /* 抽屉/弹层在手机上接近全屏 */
  .drawer{width:100%!important;max-width:100%!important}
  .loginmask .box,.login{width:auto!important;max-width:92vw!important;margin:24px 12px!important}

  /* 顶栏右侧操作区（后台 .loginbox：门店选择/身份切换/退出/使用引导/个人信息）
     ⚠️ 实测 2026-10-09：iPhone SE 上它宽 391px > 视口 375px，
     把整页撑出 245px 横向滚动 —— 手机上最难用的一种错位。
     改为「标题与门店一行、按钮换行铺满」，不再挤在一行。 */
  header{flex-wrap:wrap!important;padding:8px 12px!important}
  header .loginbox{margin-left:auto!important;display:flex!important;flex-wrap:wrap!important;
    gap:6px!important;width:100%!important;justify-content:flex-start!important}
  header .loginbox>*{flex:0 0 auto!important;min-height:36px!important}
  header .loginbox select{max-width:46vw!important}
  /* 新增的「当前门店」徽标在窄屏独占一行，避免把标题挤没 */
  header .shopname{order:-1;width:100%;margin:0 0 4px}
}

/* —— 小屏手机（≤480px）—— */
@media (max-width:480px){
  header h1{font-size:15px!important}
  .stat .n{font-size:20px!important}
  .hint,.occ{font-size:11px!important}
  /* 房态卡片墙单列；保洁操作按钮纵向铺满 */
  .room-grid{grid-template-columns:1fr!important}
  .acts{flex-direction:column!important}
  .acts button{width:100%!important}
}

/* —— RBAC 权限矩阵：折叠手势 + 触控友好（始终生效）—— */
.rbac-toggle{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.chev{display:inline-block;min-width:14px;color:#64748b;font-size:12px;font-weight:700}
input[type=checkbox]{width:17px;height:17px;vertical-align:middle;accent-color:#2563eb}