/* ============================================================
   Ecoso Space · 移动端适配
   桌面端：隐藏汉堡按钮与遮罩；手机端（<=900px，含全部手机）：
   侧边栏改为抽屉式弹出，主内容占满，卡片/模态框自适应铺满。
   关键：桌面 CSS 在 <=900px 会把侧栏折叠成「图标栏」并隐藏 .nav-text / 子项，
   这里必须显式 display 回来，否则栏目名不显示（只剩图标横线）。
   ============================================================ */

/* 桌面端默认：汉堡按钮与遮罩都隐藏 */
.menu-toggle { display: none; }
.sidebar-overlay { display: none; }

/* 声明浅色主题（与 app-new.css 白底浅蓝一致），防止原生 select/日期弹层在手机上变黑 */
:root { color-scheme: light; }

/* 汉堡按钮外观（仅手机显示）—— 浅色主题下用深色图标，避免白底上看不见 */
.menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px; background: #ffffff;
  color: #1e3a5a; font-size: 20px; line-height: 1;
  cursor: pointer; flex-shrink: 0;
}
/* 侧边栏遮罩（抽屉打开时覆盖内容区） */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 1990;
}

@media (max-width: 900px) {

  /* ---------- 侧边栏 -> 抽屉 ---------- */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 86vw; max-width: 320px; min-width: 260px;
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 2000; margin: 0;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(30,58,138,.14);
    /* 浅色纸质感（与桌面 app-new.css 侧栏一致），避免与浅色内容区割裂 */
    background: #ffffff !important;
    color: #1e3a5a !important;
    border-right: none;
  }
  .sidebar .logo-text,
  .sidebar .user-info span,
  .sidebar .nav-item,
  .sidebar .nav-group-header,
  .sidebar .sidebar-search input,
  .sidebar .sidebar-search input::placeholder {
    color: #334155 !important;
  }
  .sidebar .nav-item,
  .sidebar .nav-group-header {
    --text-dim: #94a3b8 !important;
    --text-main: #1e3a5a !important;
  }
  .sidebar .nav-item:hover,
  .sidebar .nav-group-header:hover,
  .sidebar .nav-group-header.open {
    color: #1d4ed8 !important;
    background: #f1f5f9 !important;
  }
  .sidebar .nav-item.active {
    color: #1d4ed8 !important;
    background: linear-gradient(90deg, rgba(59,130,246,.12), transparent) !important;
    border-left-color: #3b82f6 !important;
  }
  .sidebar .badge-role {
    color: #2563eb !important;
    background: rgba(59,130,246,.10) !important;
    border-color: rgba(59,130,246,.22) !important;
  }
  .sidebar .sidebar-search input {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e3a5a !important;
  }
  .sidebar .sidebar-footer { border-top-color: #f1f5f9 !important; }
  .sidebar .btn-ghost {
    color: #64748b !important;
    border-color: #e2e8f0 !important;
    background: transparent !important;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay { display: block; }

  /* ---------- 取消桌面窄屏「图标化」折叠：手机上必须显示栏目名与子项 ---------- */
  /* 桌面 @media(max-width:900px) 把 .nav-text / .nav-item.sub / .logo-text /
     .user-info / .nav-arrow / .sidebar-search 设成了 display:none，
     这里用 !important 全部恢复可见，否则左侧只剩图标横线、没有文字。 */
  .sidebar .logo-text,
  .sidebar-user .user-info,
  .nav-text,
  .sidebar-search { display: block !important; }
  .nav-arrow { display: inline-block !important; }
  .nav-item.sub { display: flex !important; align-items: center; }

  /* 还原左对齐与缩进（覆盖桌面折叠时的居中/无缩进） */
  .sidebar .nav-item,
  .sidebar .nav-group-header { justify-content: flex-start !important; padding: 12px 16px !important; }
  .nav-item.sub { padding: 9px 20px 9px 52px !important; }

  /* 主内容占满宽度 */
  .main-content { margin-left: 0; width: 100%; }

  /* ---------- 顶栏 + 汉堡 ---------- */
  .menu-toggle { display: inline-flex; }
  .topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center;
    gap: 0; padding: 10px 14px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #eef2f7;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .topbar h2 { font-size: 17px; }

  /* ---------- 内容留白收敛 ---------- */
  .content-page { padding: 14px 12px; }

  /* ---------- 登录卡片自适应 ---------- */
  #loginPage .login-card,
  .login-card {
    width: calc(100vw - 32px); max-width: 430px;
    padding: 30px 22px;
  }

  /* ---------- 模态框铺满屏幕（覆盖内联 width） ---------- */
  .modal-content {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 90vh;
  }
  .modal-body { padding: 16px; }
  .glass-modal { border-radius: 16px; }

  /* ---------- 统计卡两列 ---------- */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* ---------- 图表单列 ---------- */
  .charts-grid { grid-template-columns: 1fr; }

  /* ---------- 工具栏/搜索框占满 ---------- */
  .toolbar { gap: 8px; }
  .toolbar-left, .toolbar-right { gap: 8px; width: 100%; }
  .search-input, .filter-select { min-width: 0; flex: 1; }
  .scope-tag { align-self: flex-start; }

  /* ---------- 表格：保持横向滚动（容器已有 overflow-x:auto），缩小字号 ---------- */
  .data-table { font-size: 13px; min-width: 600px; }
  .table-container { -webkit-overflow-scrolling: touch; }

  /* ---------- 文档编辑器头部换行 ---------- */
  .doc-editor-header { flex-wrap: wrap; gap: 8px; }
  .doc-title-input { flex: 1 1 100%; order: -1; }
  .doc-editor-actions { flex-wrap: wrap; }

  /* ---------- 用户选择器/勾选列表铺满 ---------- */
  .user-picker, .check-list { width: 100%; }

  /* ---------- 待办类宽模态也铺满 ---------- */
  .modal-content[style*="width:780px"],
  .modal-content[style*="width:880px"],
  .modal-content[style*="width:920px"] {
    width: calc(100vw - 16px) !important;
  }
}