/* ============================================================
   styles-ui-mobile.css — 手机端壳层（标准手机端组件.html 1:1）
   顶栏 + 底 Tab + 安全区 + 抽屉侧栏 LOGO
   ============================================================ */

.mobile-bottom-tabbar {
  display: none;
}

/* 打卡登录 / 全屏打卡（桌面 + 手机通用） */
body.clock-login-mode #appContainer,
body.clock-login-mode .app-container,
body.clock-login-mode #authContainer,
body.clock-overlay-mode #appContainer,
body.clock-overlay-mode .app-container,
body.clock-overlay-mode #authContainer {
  display: none !important;
}

body.clock-login-mode #clockOverlay,
body.clock-overlay-mode #clockOverlay {
  display: block !important;
  z-index: 10000 !important;
}

body.clock-login-mode #loadingOverlay,
body.clock-overlay-mode #loadingOverlay {
  z-index: 10050 !important;
}

/* 临时工打卡全屏：隐藏手机壳 Tab/顶栏，避免挡住退出按钮 */
body.clock-worker-shell .mobile-bottom-tabbar,
body.clock-worker-shell #mobileBottomTabbar {
  display: none !important;
}
body.clock-worker-shell .mobile-topbar,
body.clock-worker-shell #mobileTopbar {
  display: none !important;
}
body.clock-worker-shell .top-user-bar {
  display: none !important;
}
body.clock-worker-shell #dashboard.active {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 手机端 Tab 高度变量（含放大图标） */
:root {
  --mob-tabbar-h: 72px;
  --mob-tabbar-icon: 44px;
}

@media screen and (max-width: 768px) {
  /* 登录/未进主应用：禁止手机壳样式把主页模块顶出来 */
  body.auth-visible .app-container,
  body:not(.app-visible) .app-container {
    display: none !important;
  }

  /* 全屏打卡覆盖层：必须压住主应用（个人中心一键打卡 / 4 位码登录） */
  body.clock-overlay-mode .app-container,
  body.clock-overlay-mode #appContainer,
  body.clock-overlay-mode #authContainer {
    display: none !important;
  }

  body.clock-overlay-mode #clockOverlay {
    display: block !important;
    z-index: 10000 !important;
  }

  body.auth-visible .mobile-topbar,
  body.auth-visible #mobileTopbar,
  body:not(.app-visible) .mobile-topbar,
  body:not(.app-visible) #mobileTopbar,
  body.clock-login-mode .mobile-topbar,
  body.clock-login-mode #mobileTopbar,
  body.clock-overlay-mode .mobile-topbar,
  body.clock-overlay-mode #mobileTopbar {
    display: none !important;
  }

  body.auth-visible .mobile-bottom-tabbar,
  body.auth-visible #mobileBottomTabbar,
  body:not(.app-visible) .mobile-bottom-tabbar,
  body:not(.app-visible) #mobileBottomTabbar,
  body.clock-login-mode .mobile-bottom-tabbar,
  body.clock-login-mode #mobileBottomTabbar,
  body.clock-overlay-mode .mobile-bottom-tabbar,
  body.clock-overlay-mode #mobileBottomTabbar {
    display: none !important;
  }

  /* 浅色手机端背景 */
  body.mob-shell {
    background: #f8fafc;
    color: #0f172a;
    -webkit-tap-highlight-color: transparent;
  }

  body.mob-shell.auth-visible {
    background: linear-gradient(135deg, #0a0e18 0%, #0f172a 40%, #1e3a5f 100%);
    color: #e8edf4;
  }

  body.mob-shell .app-container .main-content {
    background: #f8fafc;
  }

  /* ---- 手机壳：纵向排布，顶栏全宽，主内容紧贴其下 ---- */
  body.mob-shell.app-visible:not(.clock-overlay-mode) .app-container,
  body.mobile-tab-visible.app-visible:not(.clock-overlay-mode) .app-container {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  /* 顶栏 — 白底、全宽（仅主应用可见时） */
  body.mob-shell.app-visible:not(.clock-overlay-mode) .mobile-topbar,
  body.mobile-tab-visible.app-visible:not(.clock-overlay-mode) .mobile-topbar {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    order: 0;
    box-sizing: border-box;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(52px + env(safe-area-inset-top, 0px));
    min-height: 52px;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    position: sticky;
    top: 0;
    z-index: 200;
  }

  .mobile-topbar-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #0f172a !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-menu-btn {
    background: none !important;
    border: none !important;
    color: #0f172a !important;
    font-size: 22px;
    min-width: 44px;
    min-height: 44px;
  }

  .mobile-topbar-notif {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: none;
    border: none;
    color: #0f172a;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
  }

  .mobile-topbar-notif .notif-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #ffffff;
  }

  /* 遮罩 / 侧栏脱离文档流，不占 flex 位 */
  body.mob-shell .mobile-nav-backdrop,
  body.mobile-tab-visible .mobile-nav-backdrop {
    position: fixed !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
  }

  body.mob-shell .sidebar,
  body.mobile-tab-visible .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    height: 100dvh !important;
    width: min(85vw, 300px) !important;
    max-width: 85vw !important;
    transform: translateX(-100%);
    z-index: 1000 !important;
    flex: none !important;
  }

  body.mob-shell.app-visible:not(.clock-overlay-mode) .main-content,
  body.mobile-tab-visible.app-visible:not(.clock-overlay-mode) .main-content {
    flex: 1 1 auto !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 桌面顶栏在手机隐藏 */
  body.mob-shell.app-visible:not(.clock-overlay-mode) .top-user-bar,
  body.mobile-tab-visible.app-visible:not(.clock-overlay-mode) .top-user-bar {
    display: none !important;
  }

  body.mob-shell.app-visible:not(.clock-overlay-mode) .content-area,
  body.mobile-tab-visible.app-visible:not(.clock-overlay-mode) .content-area {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 14px calc(var(--mob-tabbar-h) + 20px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  /* 抽屉打开：仅锁滚动，不用 position:fixed 避免关闭后留白 */
  body.mobile-drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  body.mobile-drawer-open .sidebar {
    transform: translateX(0) !important;
  }

  body.mobile-drawer-open .mobile-nav-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* 底部 Tab — 固定视口底部，不随页面滚动（仅主应用可见时） */
  body.mob-shell.app-visible:not(.clock-overlay-mode) .mobile-bottom-tabbar,
  body.mobile-tab-visible.app-visible:not(.clock-overlay-mode) .mobile-bottom-tabbar,
  body.mob-shell.app-visible:not(.clock-overlay-mode) #mobileBottomTabbar,
  body.mobile-tab-visible.app-visible:not(.clock-overlay-mode) #mobileBottomTabbar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box;
    min-height: calc(var(--mob-tabbar-h) + env(safe-area-inset-bottom, 0px));
    height: calc(var(--mob-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 6px 8px env(safe-area-inset-bottom, 0px);
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0;
    justify-content: space-around;
    align-items: center;
    z-index: 160 !important;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
    transform: none !important;
    flex: none !important;
    order: unset !important;
  }

  .mobile-bottom-tabbar .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    flex: 1;
    text-decoration: none;
    color: #94a3b8;
    font-size: 11px;
    gap: 2px;
    transition: color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0 2px;
  }

  .mobile-bottom-tabbar .tab-item.active {
    color: #2563eb;
  }

  /* 模态框打开时隐藏底栏，避免挡住「上传」等底部按钮 */
  body.mob-shell.mob-modal-open .mobile-bottom-tabbar,
  body.mob-shell.mob-modal-open #mobileBottomTabbar {
    display: none !important;
  }

  /* 图标 0.8 倍：55px → 44px */
  .mobile-bottom-tabbar .tab-icon {
    font-size: var(--mob-tabbar-icon);
    line-height: 1;
    display: block;
  }

  .mobile-bottom-tabbar .tab-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
  }

  body.mob-shell .sidebar-header {
    padding: 20px 16px 12px;
  }

  .mobile-nav-backdrop {
    background: rgba(15, 23, 42, 0.5) !important;
  }
}