/* ============================================================
   蒙阴同城 · 管理后台 全部样式
   设计原则：朴素、简洁、实用。白底、黑字、常规蓝色主题色。
   不使用渐变、大圆角、阴影、玻璃拟态。圆角统一 4px 以内。
   ============================================================ */

/* ---------- 全局基础样式 ---------- */
* {
  /* 让盒子的宽高包含内边距和边框，布局更好算 */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* 白色背景，黑色主文字，灰色辅助文字 */
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: #ffffff;
  color: #333333;
  font-size: 14px;
  line-height: 1.6;
}

/* 所有链接去掉下划线 */
a {
  text-decoration: none;
  color: inherit;
}

/* 提示文字用灰色 */
.muted {
  color: #999999;
}

/* 通用容器：登录页居中用 */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 按钮样式（朴素直角按钮） ---------- */
.btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  line-height: 1.5;
}
/* 鼠标悬停时边框变蓝 */
.btn:hover {
  border-color: #1677ff;
  color: #1677ff;
}

/* 蓝色主题按钮（主要操作） */
.btn-primary {
  background: #1677ff;
  border-color: #1677ff;
  color: #ffffff;
}
.btn-primary:hover {
  background: #0e5fd8;
  border-color: #0e5fd8;
  color: #ffffff;
}

/* 危险操作按钮（删除等） */
.btn-danger {
  color: #ff4d4f;
  border-color: #ff4d4f;
}
.btn-danger:hover {
  background: #fff1f0;
  border-color: #ff4d4f;
  color: #ff4d4f;
}

/* 小号按钮（表格行内操作用） */
.btn-sm {
  padding: 3px 10px;
  font-size: 13px;
}

/* 朴素按钮：去掉边框背景，模拟链接文字按钮 */
.btn-link {
  border: none;
  background: none;
  color: #1677ff;
  cursor: pointer;
  padding: 3px 6px;
  font-size: 13px;
}
.btn-link:hover {
  color: #0e5fd8;
}
/* 红色文字链接按钮 */
.btn-link.danger {
  color: #ff4d4f;
}
.btn-link.danger:hover {
  color: #d9363e;
}

/* 禁用状态的按钮变灰 */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- 表单输入 ---------- */
.input {
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: none;
  width: 220px;
  background: #ffffff;
  color: #333333;
}
/* 聚焦时边框变蓝 */
.input:focus {
  border-color: #1677ff;
}

/* ---------- 登录页 ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.login-box {
  width: 360px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 32px 28px;
}

.login-box h1 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 6px;
  color: #333333;
}

.login-box .sub {
  text-align: center;
  color: #999999;
  font-size: 13px;
  margin-bottom: 24px;
}

.login-box .form-item {
  margin-bottom: 16px;
}

.login-box .form-item label {
  display: block;
  margin-bottom: 6px;
  color: #666666;
}

/* 登录输入框占满整个盒子宽度 */
.login-box .input {
  width: 100%;
}

/* 登录按钮占满整个盒子宽度 */
.login-box .btn {
  width: 100%;
  padding: 8px 0;
  margin-top: 4px;
}

/* 登录页错误提示 */
.login-error {
  color: #ff4d4f;
  font-size: 13px;
  margin-bottom: 12px;
  min-height: 20px;
}

/* 登录页底部备案号：固定在整个屏幕最底部居中 */
.login-icp {
  position: fixed;         /* 固定定位，脱离文档流 */
  left: 0;                 /* 左边界对齐 */
  right: 0;                /* 右边界对齐，配合 left 实现全宽 */
  bottom: 16px;            /* 距屏幕底部距离 */
  text-align: center;      /* 文字水平居中 */
  font-size: 12px;
  color: #999;
  z-index: 10;             /* 保证在最上层 */
}
.login-icp a {
  color: #999;
  text-decoration: none;
}
.login-icp a:hover {
  color: #1677ff;
}

/* ---------- 后台主布局：左侧导航 + 右侧内容 ---------- */
.layout {
  display: flex;
  min-height: 100vh;
}

/* 左侧固定导航栏 */
.sidebar {
  width: 200px;
  background: #ffffff;
  border-right: 1px solid #e8e8e8;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* 品牌行：品牌名 + 刷新按钮 横向排列 */
.sidebar .brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.sidebar .brand {
  padding: 18px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

/* 汉堡按钮：默认隐藏，仅手机端显示（点击展开/收起菜单） */
.burger {
  display: none;
  border: none;
  background: none;
  font-size: 22px;
  padding: 0 16px;
  cursor: pointer;
  color: #333333;
  line-height: 1;
}

/* 导航菜单列表 */
.sidebar .menu {
  flex: 1;
  padding: 8px 0;
}

/* 每个菜单项 */
.sidebar .menu a {
  display: block;
  padding: 11px 20px;
  color: #333333;
  border-left: 3px solid transparent;
}
/* 菜单项悬停变色 */
.sidebar .menu a:hover {
  background: #f5f5f5;
  color: #1677ff;
}
/* 当前激活的菜单项：左侧蓝色竖条 + 浅蓝背景 */
.sidebar .menu a.active {
  background: #e6f4ff;
  color: #1677ff;
  border-left-color: #1677ff;
}

/* 导航底部：运营方信息 */
.sidebar .footer {
  padding: 14px 20px;
  border-top: 1px solid #f0f0f0;
  font-size: 12px;
  color: #999999;
  line-height: 1.8;
}

/* 右侧内容区 */
.content {
  flex: 1;
  padding: 20px 24px;
  background: #ffffff;
  min-width: 0;
}

/* 页面主标题 */
.page-title {
  font-size: 18px;
  color: #333333;
  margin-bottom: 16px;
}

/* ---------- 顶部工具条（搜索框 + 按钮） ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ---------- 顶部刷新按钮 ---------- */
/* 窄版：品牌行内的小按钮（仅手机端显示，PC端默认隐藏） */
.refresh-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  flex-shrink: 0;
}
.refresh-btn:hover {
  border-color: #1677ff;
  color: #1677ff;
}
/* ---- 右侧内容区顶部的刷新栏（PC端显示） ---- */
.refresh-bar {
  display: flex;
  justify-content: flex-end;   /* 靠右显示，不遮挡页面标题 */
  margin-bottom: 12px;
}
/* 宽版：PC端带"⟳ 刷新"文字的按钮 */
.refresh-btn.wide {
  display: inline-flex;
  padding: 6px 14px;
  font-size: 14px;
}

/* ---------- 统计卡片（仪表盘） ---------- */
.stat-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 180px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 16px 20px;
}

.stat-card .num {
  font-size: 28px;
  font-weight: bold;
  color: #1677ff;
}

.stat-card .label {
  color: #999999;
  font-size: 13px;
  margin-top: 4px;
}

/* ---------- 表格 ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* 表头：浅灰底 + 细边框 */
thead th {
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  color: #333333;
}

/* 单元格：细分割线 */
tbody td {
  border-bottom: 1px solid #f0f0f0;
  padding: 9px 12px;
  vertical-align: middle;
  color: #333333;
}

/* 最后一行去掉底边框 */
tbody tr:last-child td {
  border-bottom: none;
}

/* 行悬停浅灰提示 */
tbody tr:hover {
  background: #fafafa;
}

/* ---------- 状态标签 ---------- */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  color: #666666;
}
/* 正常/启用：绿色 */
.tag-success {
  color: #52c41a;
  border-color: #b7eb8f;
  background: #f6ffed;
}
/* 下架/封禁/禁用：红色 */
.tag-danger {
  color: #ff4d4f;
  border-color: #ffa39e;
  background: #fff1f0;
}
/* 未通过：橙色 */
.tag-warning {
  color: #fa8c16;
  border-color: #ffd591;
  background: #fff7e6;
}
/* 未审核：蓝色 */
.tag-info {
  color: #1677ff;
  border-color: #91caff;
  background: #e6f4ff;
}
/* 已删除：灰色 */
.tag-default {
  color: #999999;
  border-color: #d9d9d9;
  background: #fafafa;
}
/* 置顶中：金色（2026-09-30 新增，与小程序端金色边框呼应） */
.pin-tag {
  color: #a8842c;
  border-color: #e6cf8b;
  background: #fffbe6;
}
/* 帖子列表操作列的「置顶」按钮：用金色强调 */
.btn-link.pin {
  color: #a8842c;
}

/* ---------- 帖子置顶（2026-09-30 新增） ---------- */
/* 详情弹窗里的置顶设置区块 */
.pin-box {
  margin-top: 14px;
  border: 1px dashed #e6cf8b;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fffdf5;
}
.pin-box-title {
  font-size: 14px;
  font-weight: 600;
  color: #a8842c;
  margin-bottom: 6px;
}
.pin-box-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  word-break: break-all;
}
.pin-box-btns {
  display: flex;
  gap: 10px;
}

/* 置顶设置弹窗表单 */
.pin-form .pin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.pin-check input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.pin-row > label {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
}
.pin-row .input {
  flex: 1;
  max-width: 220px;
}
/* 提示文字：灰色小字 */
.pin-tip {
  font-size: 12px;
  color: #999;
  line-height: 1.6;
  padding-bottom: 8px;
}
/* 开关所在行：开关靠右 */
.pin-switch-row label.switch {
  margin-left: auto;
}

/* 开关组件（用户可见置顶开关） */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
/* 隐藏原生复选框 */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* 滑块轨道 */
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #cccccc;
  border-radius: 24px;
  transition: background 0.2s;
}
/* 滑块圆点 */
.switch-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s;
}
/* 勾选后：轨道变主题蓝，圆点滑到右侧 */
.switch input:checked + .switch-slider {
  background: #1677ff;
}
.switch input:checked + .switch-slider:before {
  transform: translateX(20px);
}
/* 未通过原因 / 删除来源说明文字 */
.reject-reason {
  margin-top: 4px;
  font-size: 12px;
  color: #fa8c16;
  word-break: break-all;
}

/* ---------- 帖子管理分类筛选标签 ---------- */
.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.filter-tab {
  padding: 6px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 18px;
  background: #ffffff;
  color: #666666;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-tab:hover {
  border-color: #1677ff;
  color: #1677ff;
}
.filter-tab.active {
  background: #1677ff;
  border-color: #1677ff;
  color: #ffffff;
}

/* ---------- 分页 ---------- */
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pagination .info {
  color: #999999;
  font-size: 13px;
  margin-right: 8px;
}

/* ---------- 弹层（查看用户发布记录用） ---------- */
/* 遮罩层：半透明黑色铺满全屏 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 弹层主体：白底方框 */
.modal {
  background: #ffffff;
  border-radius: 4px;
  width: 720px;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

/* 弹层头部 */
.modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 15px;
  font-weight: 600;
}
/* 关闭按钮 */
.modal .modal-close {
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: #999999;
  line-height: 1;
}
.modal .modal-close:hover {
  color: #333333;
}

/* 弹层内容：可滚动 */
.modal .modal-body {
  padding: 16px;
  overflow-y: auto;
}

/* 空数据提示 */
.empty {
  text-align: center;
  color: #999999;
  padding: 24px 0;
}

/* ---------- 运维工具 ---------- */
.op-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.op-result {
  color: #1677ff;
  font-size: 13px;
}
/* 运维工具里的栏目小标题（如「邮件通知设置」） */
.op-title {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin: 20px 0 10px;
  padding-left: 8px;
  border-left: 3px solid #1677ff;
}
/* 运维工具里的灰色说明文字 */
.op-tip {
  font-size: 12px;
  color: #999999;
  line-height: 1.6;
}
/* 收件邮箱多行输入框 */
.email-area {
  width: 100%;
  max-width: 520px;
  min-height: 96px;
  padding: 8px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical; /* 允许上下拖动改变高度 */
}
.email-area:focus {
  outline: none;
  border-color: #1677ff;
}

/* ============================================================
   移动端适配（用户主要用手机在微信内置 H5 浏览器办公）
   窄屏（≤768px）时自动切换为：顶栏 + 抽屉菜单 + 卡片式列表。
   电脑端不受影响，保持原有表格布局。
   ============================================================ */
@media (max-width: 768px) {
  /* 整体改为纵向：顶栏在上，内容在下 */
  .layout.mobile {
    flex-direction: column;
  }

  /* 侧边栏变成顶部通栏，吸顶显示 */
  .layout.mobile .sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* 品牌行：品牌名 + 汉堡按钮 左右排列 */
  .layout.mobile .brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
  }
  /* 去品牌本身的下边框（由品牌行托底） */
  .layout.mobile .brand {
    border-bottom: none;
  }
  /* 显示汉堡按钮 */
  .layout.mobile .burger {
    display: block;
  }
  /* 手机端显示品牌行里的"刷新"按钮 */
  .layout.mobile .brand-row .refresh-btn {
    display: inline-flex;
  }
  /* 手机端隐藏右侧内容区顶部的刷新栏（避免重复） */
  .layout.mobile .refresh-bar {
    display: none;
  }

  /* 菜单默认收起 */
  .layout.mobile .menu {
    display: none;
    flex-direction: column;
    padding: 0;
  }
  /* 点汉堡展开菜单 */
  .layout.mobile.menu-open .menu {
    display: flex;
  }
  .layout.mobile .menu a {
    padding: 12px 20px;
    border-left: none;
    border-bottom: 1px solid #f0f0f0;
  }
  .layout.mobile .menu a.active {
    border-left: none;
  }

  /* 底部运营方信息：平时隐藏，展开菜单时显示 */
  .layout.mobile .footer {
    display: none;
  }
  .layout.mobile.menu-open .footer {
    display: block;
  }

  /* 内容区：全宽，缩小内边距 */
  .layout.mobile .content {
    padding: 12px;
  }

  /* 登录框：窄屏自适应宽度 */
  .login-box {
    width: 92%;
    max-width: 360px;
  }

  /* 工具条：竖向排列，输入框和按钮占满整行 */
  .layout.mobile .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .layout.mobile .toolbar .input {
    width: 100%;
  }
  .layout.mobile .toolbar button {
    width: 100%;
  }

  /* 卡片式列表：上下排列 */
  .card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .m-card {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 12px 14px;
  }
  /* 卡片头部：标题 + 状态标签 */
  .m-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .m-card-title {
    font-weight: 600;
    color: #333333;
    word-break: break-all;
    margin-right: 8px;
  }
  /* 卡片字段行 */
  .m-card-row {
    display: flex;
    font-size: 13px;
    padding: 3px 0;
    color: #333333;
  }
  .m-card-label {
    width: 88px;
    flex-shrink: 0;
    color: #999999;
  }
  /* 长内容（如 openid）允许换行 */
  .m-card-row .m-break {
    word-break: break-all;
  }
  /* 卡片底部操作按钮区 */
  .m-card-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
  }

  /* 弹层：小屏时尽量占满宽度 */
  .modal {
    width: 94vw;
  }
}