/* ==========
   响应式样式（独立：仅媒体查询与断点覆盖，依赖 main.css 变量）
   ========== */

/* 小屏（平板 + 手机） */
@media (max-width: 768px) {
  .app-root {
    min-height: 100vh;
  }

  .app-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
  }

  /* 显示汉堡按钮 */
  .sidebar-toggle {
    display: inline-flex;
  }

  .app-layout {
    position: relative;
    height: auto; /* 移动端恢复自动高度 */
    overflow: visible; /* 移动端允许正常滚动 */
  }

  /* 内容区填满屏幕，侧边栏改为抽屉 */
  .content {
    padding: 1rem 0.9rem 1.25rem;
  }

  .page-meta,
  .page-body,
  .page-hero {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }

  .field-textarea {
    min-height: 140px;
  }

  /* 抽屉式侧边栏：默认隐藏，通过 body.sidebar-open 显示 */
  .sidebar {
    position: fixed;
    inset: auto auto 0 0;
    top: 3.5rem; /* 约等于 header 高度 */
    height: calc(100vh - 3.5rem);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
    box-shadow: 0 0 0 transparent;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 24px var(--color-drawer-shadow);
  }

  /* 侧边栏打开时的遮罩层：由 body.sidebar-open 驱动，与 main.css 主题变量一致 */
  body.sidebar-open .app-root::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--color-backdrop);
    z-index: 35;
  }
}

/* 中等及以上屏幕：确保侧边栏为固定布局，防止被移动端样式影响 */
@media (min-width: 769px) {
  .sidebar {
    position: static;
    transform: none !important;
    height: 100%; /* 保持固定高度，与 main.css 中的设置一致 */
    box-shadow: none !important;
  }

  .app-header {
    position: relative;
  }

  /* 桌面端隐藏汉堡按钮，使用“折叠侧边栏”按钮 */
  .sidebar-toggle {
    display: none !important;
  }
}