/* ============================================
   移动端专用样式 - 后台管理页面适配
   ============================================ */

/* ====== 1. 全局移动端布局 ====== */
body {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.page {
  grid-template-rows: 56px 1fr !important;
  min-height: 100vh !important;
}

/* ====== 2. 顶部栏简化 ====== */
.topbar {
  padding: 0 12px !important;
  height: 56px !important;
  min-height: 56px !important;
}

.logo-text {
  display: none !important;
}

.logo-img {
  height: 36px !important;
  width: auto !important;
}

.top-actions {
  gap: 8px;
}

.top-link {
  font-size: 12px !important;
  padding: 6px 8px !important;
}

/* 隐藏PC端特有元素 */
.sidebar,
.topbar-search,
.topbar-notify-btn,
.desktop-only {
  display: none !important;
}

/* ====== 3. 主内容区移动端布局 ====== */
.body {
  flex-direction: column !important;
  padding: 8px !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.workspace {
  flex-direction: column !important;
  padding-bottom: 0 !important;
}

.panel-main {
  padding: 8px !important;
  overflow-y: auto !important;
}

/* ====== 4. 面板卡片移动端样式 ====== */
.panel-card {
  padding: 12px !important;
  border-radius: 8px !important;
}

.panel-title {
  font-size: 16px !important;
  margin-bottom: 12px !important;
}

.panel-subtitle {
  font-size: 14px !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

/* ====== 5. 表格移动端优化 ====== */
.table-wrap {
  overflow-x: auto !important;
  margin: 0 -12px;
  padding: 0 12px;
}

.table {
  font-size: 12px !important;
  min-width: 100% !important;
}

.table th,
.table td {
  padding: 8px 6px !important;
  white-space: normal !important;
}

.table th {
  font-size: 11px !important;
}

/* 隐藏首列ID */
.table.hide-first-col th:first-child,
.table.hide-first-col td:first-child {
  display: none !important;
}

/* ====== 6. 表单移动端优化 ====== */
.form-row {
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.form-row label {
  min-width: auto !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #475569;
}

.text-input {
  font-size: 14px !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
}

.text-input[type="number"] {
  min-width: 80px !important;
}

select.text-input {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L2 4h8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

/* ====== 7. 按钮移动端优化 ====== */
.btn {
  padding: 10px 16px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  min-height: 44px !important;
}

.btn-sm {
  padding: 6px 10px !important;
  font-size: 12px !important;
  min-height: 32px !important;
}

.btn-row {
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.btn-row .btn {
  flex: 1 1 auto !important;
  min-width: 80px !important;
}

/* ====== 8. 弹窗移动端全屏 ====== */
.preview-modal {
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;
}

.preview-dialog {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.preview-header {
  padding: 12px 16px !important;
  position: sticky !important;
  top: 0 !important;
  background: #fff !important;
  z-index: 10 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  flex: 0 0 auto !important;
}

.preview-body {
  padding: 12px 16px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* ====== 9. 分页移动端简化 ====== */
.pagination-controls {
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 0 !important;
}

.pagination-buttons {
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.pagination-buttons .btn {
  min-width: 40px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
}

.per-page-selector {
  width: 100% !important;
  justify-content: space-between !important;
}

/* ====== 10. 搜索筛选移动端优化 ====== */
.users-toolbar,
.modules-toolbar,
.roles-toolbar,
.workflows-toolbar,
.methods-toolbar,
.logs-toolbar {
  flex-direction: column !important;
  gap: 8px !important;
}

.users-filter-form,
.modules-filter-form,
.roles-filter-form,
.workflows-filter-form,
.methods-filter-form,
.logs-filter-form {
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
}

.users-filter-form .text-input,
.modules-filter-form .text-input,
.logs-filter-form .text-input {
  flex: 1 1 auto !important;
  min-width: 100px !important;
}

/* ====== 11. 卡片网格移动端单列 ====== */
.users-grid,
.modules-grid,
.roles-grid,
.workflows-grid,
.methods-grid,
.logs-grid,
.banned-list {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

/* ====== 12. 用户卡片移动端 ====== */
.user-card {
  padding: 12px !important;
}

.user-card-header {
  gap: 10px !important;
}

.user-avatar-large {
  width: 44px !important;
  height: 44px !important;
}

.user-name {
  font-size: 14px !important;
}

.user-email,
.user-department {
  font-size: 12px !important;
}

.user-card-actions {
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.user-badge {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

/* ====== 13. 模块/角色/流程卡片移动端 ====== */
.module-card,
.role-card,
.workflow-card,
.method-card {
  padding: 12px !important;
}

.module-card-header,
.role-card-header,
.workflow-card-header {
  gap: 10px !important;
}

.module-icon,
.role-icon,
.workflow-icon {
  width: 36px !important;
  height: 36px !important;
  font-size: 18px !important;
}

.module-name,
.role-name,
.workflow-name {
  font-size: 14px !important;
}

.module-meta,
.role-meta {
  font-size: 11px !important;
}

.module-card-actions,
.role-card-actions,
.workflow-card-actions {
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

/* ====== 14. 方法卡片移动端 ====== */
.method-card-body {
  padding: 8px 0 !important;
}

.method-field {
  margin-bottom: 6px !important;
}

.method-field-label {
  font-size: 11px !important;
}

.method-field-value {
  font-size: 12px !important;
}

/* ====== 15. 日志管理移动端 ====== */
.logs-main-card {
  padding: 8px !important;
}

.logs-stats-overview {
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
}

.log-stat-item {
  min-width: 80px !important;
  flex: 1 1 auto !important;
  max-width: 120px !important;
  padding: 8px !important;
}

.log-stat-item .stat-icon {
  font-size: 20px !important;
}

.log-stat-item .stat-value {
  font-size: 16px !important;
}

.log-stat-item .stat-label {
  font-size: 10px !important;
}

.log-card {
  padding: 10px !important;
  margin-bottom: 8px !important;
}

.log-card-header {
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.log-time {
  font-size: 11px !important;
}

.log-action-tag {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

.log-username {
  font-size: 12px !important;
}

.log-card-body {
  padding: 8px 0 !important;
}

.log-detail-preview {
  font-size: 11px !important;
}

.log-card-actions {
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.logs-pagination,
.banned-pagination {
  flex-direction: column !important;
  gap: 8px !important;
}

.banned-card {
  padding: 10px !important;
  margin-bottom: 8px !important;
}

.banned-ip {
  font-size: 13px !important;
}

.banned-time {
  font-size: 10px !important;
}

.banned-reason,
.banned-meta {
  font-size: 11px !important;
}

/* ====== 16. 个人信息页移动端 ====== */
.profile-main {
  padding: 8px !important;
  gap: 8px !important;
}

.profile-hero-card {
  padding: 12px !important;
}

.profile-hero {
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.profile-avatar-large {
  width: 64px !important;
  height: 64px !important;
}

.profile-username-large {
  font-size: 18px !important;
}

.profile-section-card {
  padding: 12px !important;
}

.profile-section-title {
  font-size: 14px !important;
}

.profile-permissions-grid {
  gap: 8px !important;
}

.permission-item {
  padding: 10px !important;
}

.permission-label {
  font-size: 12px !important;
}

.perm-tag {
  font-size: 10px !important;
  padding: 3px 8px !important;
}

/* ====== 17. 分享管理移动端 ====== */
.share-card {
  padding: 12px !important;
}

.share-url-row {
  flex-direction: column !important;
  gap: 8px !important;
}

.share-link-input {
  font-size: 12px !important;
}

.share-qrcode-container {
  width: 120px !important;
  height: 120px !important;
}

/* ====== 18. 文件管理移动端 ====== */
.file-card {
  padding: 12px !important;
}

.file-preview-content {
  padding: 10px !important;
  font-size: 12px !important;
}

/* ====== 19. 部门管理移动端 ====== */
.dept-tree-item {
  padding: 10px !important;
}

.dept-item-content {
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.dept-name {
  font-size: 14px !important;
}

/* ====== 20. Toast移动端居中 ====== */
.toast {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 80px !important;
  max-width: calc(100% - 32px) !important;
  font-size: 12px !important;
  padding: 10px 16px !important;
}

/* ====== 21. 复选框列表移动端 ====== */
.admin-checkbox-list {
  gap: 8px !important;
}

.admin-checkbox-item {
  padding: 8px !important;
  font-size: 13px !important;
}

/* ====== 22. 内联表单移动端 ====== */
.admin-inline-form {
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.admin-inline-form .text-input {
  flex: 1 !important;
  min-width: 120px !important;
}

/* ====== 23. 统计信息移动端 ====== */
.modules-stats,
.users-stats,
.logs-pagination-info {
  font-size: 12px !important;
  padding: 8px 0 !important;
}

/* ====== 24. 空状态移动端 ====== */
.modules-empty,
.users-empty,
.logs-empty,
.banned-empty {
  padding: 24px 12px !important;
}

.modules-empty-icon,
.users-empty-icon,
.logs-empty-icon,
.banned-empty-icon {
  font-size: 36px !important;
}

.tip-text {
  font-size: 12px !important;
}

/* ====== 25. 面板页面移动端 ====== */
.panel-page {
  grid-template-rows: 56px 1fr !important;
}

/* ====== 26. 登录页移动端 ====== */
.login-page .login-layout {
  flex-direction: column !important;
  padding: 16px !important;
}

.login-panel {
  padding: 20px !important;
}

.login-title {
  font-size: 20px !important;
}

.login-form-row input {
  font-size: 14px !important;
  padding: 12px !important;
}

.login-btn {
  height: 44px !important;
  font-size: 14px !important;
}

/* ====== 27. 聊天分享页移动端 ====== */
.share-page .panel-main {
  padding: 8px !important;
}

.share-card {
  padding: 12px !important;
}

.share-header {
  flex-direction: column !important;
  gap: 8px !important;
}

.share-messages {
  padding: 8px !important;
}

.share-message {
  max-width: 85% !important;
}

.share-message-bubble {
  font-size: 12px !important;
  padding: 8px 10px !important;
}

/* ====== 28. 响应式断点说明 ====== */
/* 此文件针对屏幕宽度 <= 480px 的设备 */
/* 使用 media="(max-width: 480px)" 加载 */

/* ====== 29. 安全区域适配 ====== */
@supports (padding: max(0px)) {
  .panel-main,
  .body {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}