/* ============================================================
   手机端全面修复 V1.0
   修复：侧边栏占位、顶部栏拥挤、主内容区布局、按钮大小、滚动条
   ============================================================ */

/* ========== 0. 全局横向滚动修复（所有设备都生效，最高优先级） ========== */
html{
  overflow-x:hidden !important;
  max-width:100% !important;
  width:100% !important;
}

body{
  overflow-x:hidden !important;
  max-width:100% !important;
  width:100% !important;
  position:relative !important;
}

/* 全局box-sizing */
*{
  box-sizing:border-box !important;
  max-width:100% !important;
}

/* 主内容区：电脑端正确计算宽度，避免margin导致溢出 */
#mainPage{
  width:auto !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
}

/* 主内容区内部所有元素都不能超出 */
#mainPage *{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* ========== 0.1 全局滚动条美化 ========== */
/* 隐藏横向滚动条 */
::-webkit-scrollbar:horizontal{
  display:none !important;
  width:0 !important;
  height:0 !important;
}

/* 纵向滚动条变细 */
::-webkit-scrollbar:vertical{
  width:6px !important;
}

::-webkit-scrollbar-track{
  background:transparent !important;
}

::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.2) !important;
  border-radius:3px !important;
}

::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,0.35) !important;
}

/* Firefox滚动条 */
*{
  scrollbar-width:thin !important;
  scrollbar-color:rgba(0,0,0,0.2) transparent !important;
}

/* IE/Edge滚动条 */
body{
  -ms-overflow-style:-ms-autohiding-scrollbar !important;
}

/* 退出按钮正常显示 */
#mobileLogoutBtn,
.mobile-logout-btn{
  flex-shrink:0 !important;
  max-width:none !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* ========== 1. 手机端侧边栏：完全脱离文档流，不占空间 ========== */
@media (max-width:768px){
  /* 侧边栏使用fixed定位，完全脱离文档流 */
  #sidebarNav.sidebar-nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:260px !important;
    max-width:82vw !important;
    transform:translateX(-100%) !important;
    transition:transform 0.3s ease !important;
    z-index:9999 !important;
    margin:0 !important;
    padding:0 !important;
    /* 确保侧边栏不会导致页面横向滚动 */
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  
  /* 侧边栏内部所有元素也不能超出 */
  #sidebarNav.sidebar-nav *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  
  /* 手机端展开状态 */
  body.sidebar-mobile-open #sidebarNav.sidebar-nav{
    transform:translateX(0) !important;
    box-shadow:4px 0 20px rgba(0,0,0,0.3) !important;
  }
  
  /* 手机端折叠状态不生效 */
  #sidebarNav.sidebar-nav.collapsed{
    width:260px !important;
    transform:translateX(-100%) !important;
  }
  body.sidebar-mobile-open #sidebarNav.sidebar-nav.collapsed{
    transform:translateX(0) !important;
  }
  
  /* 折叠状态下文字和图标都显示 */
  #sidebarNav.sidebar-nav.collapsed .sidebar-logo span,
  #sidebarNav.sidebar-nav.collapsed .sidebar-group-title,
  #sidebarNav.sidebar-nav.collapsed .sidebar-item .label,
  #sidebarNav.sidebar-nav.collapsed .sidebar-item .badge,
  #sidebarNav.sidebar-nav.collapsed .sidebar-footer .sidebar-user-info{
    display:flex !important;
  }
  #sidebarNav.sidebar-nav.collapsed .sidebar-item{
    justify-content:flex-start !important;
    padding:9px 16px !important;
  }
  
  /* 手机端隐藏侧边栏内部折叠按钮 */
  #sidebarNav .sidebar-toggle{
    display:none !important;
  }
}

/* ========== 2. 主内容区：手机端无左边距，占满全屏 ========== */
@media (max-width:768px){
  /* html和body都禁止横向滚动，确保不会出现横向滚动条 */
  html,
  body{
    overflow-x:hidden !important;
    max-width:100vw !important;
    width:100% !important;
  }
  
  /* 全局box-sizing，确保padding不会导致宽度溢出 */
  *{
    box-sizing:border-box !important;
  }
  
  #mainPage{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:12px !important;
    padding-right:12px !important;
    padding-top:70px !important;
    padding-bottom:80px !important; /* 给底部菜单留空间 */
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  
  /* 主内容区内部所有容器都不能超出宽度 */
  #mainPage *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  
  /* 表格只能内部滚动，不能撑破页面 */
  #mainPage table,
  #mainPage .table-container,
  #mainPage .data-table-wrapper{
    max-width:100% !important;
    overflow-x:auto !important;
    display:block !important;
  }
  
  /* 图片自适应 */
  #mainPage img{
    max-width:100% !important;
    height:auto !important;
  }
}

/* ========== 3. 顶部栏：手机端优化 ========== */
@media (max-width:768px){
  .top-bar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:56px !important;
    padding:0 10px !important;
    z-index:9998 !important;
    box-sizing:border-box !important;
  }
  
  /* 手机端去掉所有顶部按钮边框和背景 */
  .mobile-menu-btn,
  .top-logo,
  .top-bar-left > div:not(.mobile-menu-btn):not(.top-logo),
  .top-notif-icon,
  #topRightTools .top-tool-btn,
  .logout-btn{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  .top-logo{
    border-radius:50% !important;
  }
  
  /* 顶部栏左侧：菜单按钮 + LOGO */
  .top-bar-left{
    gap:6px !important;
    align-items:center !important;
  }
  
  /* 菜单按钮 */
  .mobile-menu-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  
  /* LOGO */
  .top-logo{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
  
  /* 顶部栏用户信息：手机端隐藏文字，只保留头像 */
  .top-bar-left > div:last-child{
    display:none !important;
  }
  
  /* 顶部栏右侧：所有按钮统一间距 */
  .top-bar-right,
  #topRightTools{
    gap:6px !important;
    align-items:center !important;
    display:flex !important;
  }
  
  /* 铃铛按钮 */
  .top-notif-icon{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:18px !important;
  }
  
  /* 隐藏设置按钮 */
  #mobileSettingsBtn{
    display:none !important;
  }
  
  #topRightTools .top-tool-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    padding:0 !important;
    font-size:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  
  /* 隐藏工具按钮的文字 */
  #topRightTools .top-tool-btn .tool-text{
    display:none !important;
  }
  
  /* 退出按钮：手机端用图标，不用文字 */
  #mobileLogoutBtn,
  .top-bar .logout-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    padding:0 !important;
    font-size:18px !important;
  }
}

/* 小屏幕（<=480px）进一步优化 */
@media (max-width:480px){
  .top-bar{
    height:52px !important;
    padding:0 8px !important;
  }
  
  .mobile-menu-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
  
  .top-logo{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }
  
  #topRightTools .top-tool-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    font-size:14px !important;
  }
  
  #mainPage{
    padding-top:64px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* ========== 4. 手机端遮罩层 ========== */
@media (max-width:768px){
  #sidebarOverlay,
  .sidebar-overlay{
    display:none !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    background:rgba(0,0,0,0.5) !important;
    z-index:9997 !important;
  }
  
  body.sidebar-mobile-open #sidebarOverlay,
  body.sidebar-mobile-open .sidebar-overlay{
    display:block !important;
  }
}

/* ========== 5. 手机端底部菜单 ========== */
@media (max-width:768px){
  #mobileTabBar{
    display:flex !important;
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    height:60px !important;
    background:#fff !important;
    border-top:1px solid #e5e7eb !important;
    z-index:9996 !important;
    box-shadow:0 -2px 10px rgba(0,0,0,0.05) !important;
  }
  
  /* 登录模式下隐藏底部菜单 */
  body.login-mode #mobileTabBar{
    display:none !important;
  }
}

/* ========== 6. 手机端卡片和内容优化 ========== */
@media (max-width:768px){
  /* 卡片内边距缩小 */
  .card,
  .stat-card,
  .info-card{
    padding:14px !important;
    margin-bottom:12px !important;
  }
  
  /* 标题字体缩小 */
  .page-title,
  .section-title{
    font-size:18px !important;
  }
  
  /* 表格横向滚动 */
  .table-container,
  table{
    display:block !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  
  /* 按钮最小高度，方便点击 */
  button,
  .btn{
    min-height:40px !important;
  }
  
  /* 输入框最小高度 */
  input,
  select,
  textarea{
    min-height:40px !important;
    font-size:14px !important;
  }
}

/* ========== 7. 确保手机端顶部栏左边距为0（覆盖其他CSS） ========== */
@media (max-width:768px){
  body:not(.login-mode) .top-bar,
  body.sidebar-collapsed:not(.login-mode) .top-bar,
  body:not(.sidebar-collapsed):not(.login-mode) .top-bar{
    left:0 !important;
    right:0 !important;
    width:100% !important;
  }
}

/* ========== 8. 电脑版通用宽度修复：所有页面内容区占满剩余空间 ========== */
#mainPage{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

#mainPage > div,
#mainPage > section,
.page-container,
.content-container{
  max-width:100% !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* 主页容器占满 */
#homePage{
  max-width:100% !important;
  width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* 表格容器占满 */
.table-container,
.data-table-wrapper,
.list-container{
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* 卡片网格自适应 */
.card-grid,
.stat-grid,
.dashboard-grid{
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* ========== 9. 全面百分比自适应：所有容器宽度100%，防止溢出 ========== */
/* 所有页面级容器宽度100% */
#recordsPage,
#ledgerPage,
#staffPage,
#reportPage,
#settingsPage,
#systemPage,
.page,
.tab-content,
.tab-pane{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
}

/* 所有内容区域宽度100% */
.content-area,
.main-content,
.page-content,
.section,
.panel,
.card,
.module{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* 表格容器：宽度100%，内部可横向滚动 */
.table-wrapper,
.table-container,
.data-table,
.table-responsive,
.record-table,
.ledger-table{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  display:block !important;
  box-sizing:border-box !important;
}

/* 表格本身：最小宽度100%，内容多了可以撑开但容器滚动 */
table{
  width:100% !important;
  max-width:none !important;
  min-width:100% !important;
  box-sizing:border-box !important;
  table-layout:auto !important;
}

/* 手机端表格单元格允许换行，减少横向溢出 */
@media (max-width:768px){
  th, td{
    white-space:normal !important;
    word-wrap:break-word !important;
    word-break:break-all !important;
    max-width:200px !important;
  }
  
  /* 手机端表格用横向滚动容器 */
  .table-wrapper,
  .table-container,
  .data-table{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* 表单区域宽度100% */
.form-container,
.form-area,
.search-bar,
.filter-bar,
.toolbar,
.action-bar{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  flex-wrap:wrap !important;
}

/* 输入框宽度自适应 */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Flex布局防止子元素溢出 */
.flex-container,
.flex-row,
.flex-wrap{
  flex-wrap:wrap !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* 防止任何元素因min-width溢出 */
*{
  min-width:0 !important;
}