/* ===================================================================
   B01 管理端左侧菜单样式
   =================================================================== */

/* ---- body 重置 ---- */
body {
  margin: 0;
  padding: 0;
}

/* ---- 管理端整体布局 ---- */
.admin-layout {
  display: flex;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---- 左侧菜单栏 ---- */
.admin-sidebar {
  width: 200px;
  min-width: 200px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #dfe7dd;
}

.admin-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
}

/* ---- 品牌区域 ---- */
.admin-sidebar-brand {
  margin-bottom: 10px;
}

.admin-brand-name {
  font-size: 18px;
  font-weight: 800;
  color: #25372f;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.admin-brand-since {
  font-size: 11px;
  font-weight: 400;
  color: #aeaeb2;
  line-height: 1.3;
  margin-top: 1px;
}

/* ---- 分隔线 ---- */
.admin-sidebar-divider {
  border: 0;
  border-top: 1px solid #dfe7dd;
  margin: 10px 0;
}

/* ---- 日期区域 ---- */
.admin-sidebar-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.admin-date-day {
  font-size: 15px;
  font-weight: 600;
  color: #455c4e;
}

.admin-date-weekday {
  font-size: 15px;
  font-weight: 500;
  color: #455c4e;
}

/* ---- 菜单分组容器 ---- */
.admin-menu-group {
  margin-bottom: 0;
}

/* 收起的分组：隐藏其二级菜单 */
.admin-menu-group.is-collapsed .admin-menu-items {
  display: none;
}

/* 一级菜单之间 / 一级与下一组之间保持 20px 分区：无论「展开组」「收起组」还是
   「首页/学习与认证」这类独立一级页，相邻元素间距统一，视觉权重一致。 */
.admin-menu-group + .admin-menu-group,
.admin-menu-group + .admin-menu-item--standalone,
.admin-menu-item--standalone + .admin-menu-group,
.admin-menu-item--standalone + .admin-menu-item--standalone {
  margin-top: 20px;
}

/* ---- 一级分组标题（一级 = 业务栏目，非页面按钮；展开后才见具体页面） ---- */
.admin-menu-group-header {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 4px 10px 2px 12px;
  font: inherit;
  text-align: left;
  line-height: 1.3;
  color: inherit;
  cursor: default;
  user-select: none;
  box-sizing: border-box;
}

.admin-menu-group-header[data-group-toggle] {
  cursor: pointer;
}

/* 一级菜单文字：16px / 650 / 深灰——主导航一眼可辨，明显重于 14px 的二级项。
   展开组标题用最深一级色；收起（未展开）组仅降一档到可读中深灰 #55555c，
   仍明显可点击，不与「禁用/不可用」的浅灰混淆。 */
.admin-menu-group-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #55555c;
  white-space: nowrap;
  transition: color .15s ease;
}

/* 展开状态的栏目标题：加深为一级主色，体现「当前栏目/展开」 */
.admin-menu-group:not(.is-collapsed) .admin-menu-group-title {
  color: #2f2f33;
}

.admin-menu-group-header:hover .admin-menu-group-title {
  color: #25372f;
}

/* 折叠箭头（仅可折叠分组渲染；展开朝下、收起朝右）。
   箭头为浅灰辅助色 #a8a8af，收起时略浅 #b0b0b6，仅示意可折叠、不抢文字层级。 */
.admin-menu-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-left: 8px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #a8a8af;
  transition: transform .18s ease, border-top-color .15s ease;
}

.admin-menu-group.is-collapsed .admin-menu-caret {
  border-top-color: #b0b0b6;
  transform: rotate(90deg);
}

.admin-menu-group-header:hover .admin-menu-caret {
  border-top-color: #8f8f96;
}

/* ---- 二级菜单列表 ---- */
.admin-menu-items {
  padding: 3px 0 0;
}

/* ---- 二级菜单项（具体页面入口） ---- */
.admin-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 6px 12px 6px 38px;
  font-size: 14px;
  font-weight: 500;
  color: #66666d;
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
  margin-bottom: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, color .15s ease;
}

.admin-menu-item:last-child {
  margin-bottom: 0;
}

.admin-menu-item:hover {
  background: #e9f1e8;
  color: #25372f;
}

/* 当前所在具体页面：统一收敛的浅灰底选中态 —— 浅灰底 #deebdd + 深字 #25372f，
   左侧用 3px 黑色竖条（pseudo，避开圆角避免弧形），不再整块黑底；
   选中二级项时字号仍保持二级规格（14px），不会因选中升为一级字号。 */
.admin-menu-item.active {
  background: #deebdd;
  color: #25372f;
  font-weight: 700;
}

.admin-menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  background: #355944;
}

/* ---- 独立一级页入口（首页 / 学习与认证，与分组栏目同屏） ----
   视觉权重与「一级分组标题」一致：16px / 650 / #2f2f33。
   选中态复用统一 active 浅灰底，不单独设计第二套首页样式。 */
.admin-menu-item--standalone {
  margin: 2px 0 0;
  padding: 6px 12px 6px 12px;
  font-size: 16px;
  font-weight: 650;
  color: #2f2f33;
  background: transparent;
  white-space: nowrap;
}

.admin-menu-item--standalone:hover {
  background: #e9f1e8;
  color: #25372f;
}

.admin-menu-item--standalone.active {
  background: #deebdd;
  color: #25372f;
  font-weight: 700;
}

/* ---- 菜单未读角标（订单列表）---- */
/* 统计 OrderStore 中 order.isRead === false 的未读订单总数；数量为 0 时隐藏 */
.admin-menu-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e64545;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}

.admin-menu-badge.has-value {
  display: inline-flex;
}

/* 选中态已改为浅灰底（见 .admin-menu-item.active），红底白字角标在浅底上依然清晰，无需反色处理 */

/* ---- 菜单底部（当前登录人员信息 + 修改密码 + 退出登录）---- */
.admin-sidebar-footer {
  padding: 12px;
  border-top: 1px solid #dfe7dd;
}

.admin-user-info {
  text-align: center;
  margin-bottom: 10px;
}

.admin-user-name {
  font-size: 15px;
  font-weight: 650;
  color: #2f2f33;
  line-height: 1.3;
}

.admin-user-role {
  font-size: 13px;
  font-weight: 400;
  color: #a0a0a6;
  line-height: 1.4;
  margin-top: 3px;
}

.admin-pwd-btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #f4f7f3;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #25372f;
  text-align: center;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background .15s ease, color .15s ease;
}

.admin-pwd-btn:hover {
  background: #dfe7dd;
  color: #000;
}

.admin-logout-btn {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #909096;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.admin-logout-btn:hover {
  background: #e9f1e8;
  color: #25372f;
}

/* ---- 修改密码弹窗（本人修改本人密码；所有登录账号可用） ---- */
.pwd-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  padding: 16px;
  box-sizing: border-box;
}

.pwd-modal {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.pwd-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
}

.pwd-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #25372f;
}

.pwd-modal-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #8e8e93;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 8px;
  transition: background .15s ease, color .15s ease;
}

.pwd-modal-close:hover {
  color: #25372f;
  background: #f4f7f3;
}

.pwd-modal-body {
  padding: 8px 24px 18px;
}

.pwd-user-line {
  font-size: 12px;
  color: #8e8e93;
  margin: 0 0 12px;
}

.pwd-field {
  display: block;
  margin-bottom: 14px;
}

.pwd-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #455c4e;
  margin-bottom: 6px;
}

.pwd-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e3e3e8;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: #25372f;
  background: #fff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pwd-input:focus {
  border-color: #355944;
  box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.08);
}

.pwd-msg {
  margin-top: 4px;
  font-size: 13px;
  color: #e64545;
  line-height: 1.4;
}

.pwd-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 24px 20px;
}

.pwd-btn {
  min-width: 92px;
  height: 38px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.pwd-btn-primary {
  border: 1px solid #25372f;
  background: #355944;
  color: #fff;
}

.pwd-btn-primary:hover {
  background: #455c4e;
  border-color: #455c4e;
}

.pwd-btn-primary:disabled {
  opacity: .55;
  cursor: wait;
}

.pwd-btn-ghost {
  border: 1px solid #dedee3;
  background: #fff;
  color: #4b4b50;
}

.pwd-btn-ghost:hover {
  background: #f4f7f3;
}

/* ---- 右侧内容区 ---- */
.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  background: #F4F4F2;
  overflow: hidden;
  min-width: 0;
}

.admin-content-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aeaeb2;
  font-size: 15px;
  font-weight: 500;
}

.admin-content-placeholder h2 {
  font-size: 18px;
  font-weight: 600;
  color: #25372f;
  margin: 0 0 8px;
}

.admin-content-placeholder p {
  margin: 0;
  color: #8e8e93;
  font-size: 14px;
}

.admin-content-placeholder .path-hint {
  margin-top: 12px;
  font-size: 12px;
  color: #aeaeb2;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
}

/* ---- 特定页面容器：填满内容区 ---- */
.admin-orders-container,
.admin-changes-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* 日历看板：允许纵向滚动，使 sticky 工具栏生效 + 页面背景可见 */
.admin-calendar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

/* ===================================================================
   移动端响应式（≤768px）：左侧导航 → 顶部汉堡按钮打开抽屉
   桌面端（≥769px）现有布局、尺寸、滚动逻辑全部保持不变。
   本区域仅当视口 ≤768px 时生效；不用 transform: scale() 缩小页面。
   =================================================================== */
/* 汉堡按钮与遮罩：桌面端始终隐藏（不影响现有布局） */
.admin-menu-toggle,
.admin-menu-backdrop {
  display: none;
}

@media (max-width: 768px) {
  /* 禁止横向滚动（iPhone Safari 橡皮筋/内联字号溢出防护） */
  html,
  body {
    overflow-x: hidden;
  }

  /* 汉堡按钮：固定于顶部左上，浮在所有内容之上 */
  .admin-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: 12px;
    z-index: 1050;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
    color: #25372f;
    cursor: pointer;
  }
  .admin-menu-toggle svg {
    width: 20px;
    height: 20px;
  }
  .admin-menu-toggle:active {
    transform: scale(0.94);
  }

  /* 左侧导航：默认隐藏在屏幕外（translateX(-100%)），.open 滑入 */
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 280px;
    min-width: 280px;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.22);
    border-right: 0;
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }

  /* 遮罩：点按任意处关闭抽屉 */
  .admin-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(20, 20, 18, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .admin-menu-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* 内容区：占满可视宽度，顶部为汉堡按钮预留空间（含 iOS 安全区） */
  .admin-content {
    padding: calc(52px + env(safe-area-inset-top, 0px)) 0 0;
  }
}