/* responsive.css —— 桌面优先 + 多端自适应 */
/* 设计稿默认是 1280×800 桌面窗口；这里补全：
  *   - 大屏 1600+ / 2K / 4K：放大字号、放大限宽
  *   - 中等桌面 1280~1599：默认（与设计稿一致）
  *   - 小桌面 1024~1279：边栏略窄
  *   - 平板 768~1023：侧栏转抽屉
  *   - 手机 <768：顶栏 + 单列布局
  *   - 矮窗口（高度 < 720）：min-height 收紧、滚动区自适应
  *   - 任意尺寸：iframe 浮窗自适应
  *
  * 关键尺寸用 clamp() 平滑过渡，避免断点跳变。
  */

/* ============================================================
 * 全局尺寸 token：使用 clamp() 跟随屏幕
 * ============================================================ */
:root {
  --resp-base-fs: clamp(12px, 0.6vw + 10px, 16px);
  --resp-title-fs: clamp(13px, 0.7vw + 11px, 17px);
  --resp-pad: clamp(8px, 0.6vw + 4px, 18px);
  --resp-grid-side: clamp(200px, 14vw, 260px);
  --resp-grid-mid:  clamp(280px, 22vw, 340px);
}

/* 应用整页字号（影响所有 rem/em 派生） */
html { font-size: var(--resp-base-fs); }

/* ============================================================
 * 中等桌面 1024~1279：边栏略窄
 * ============================================================ */
@media (max-width: 1279px) {
  .app { grid-template-columns: var(--resp-grid-side) var(--resp-grid-mid) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: 200px 280px minmax(0, 1fr); }
  .groups .task-list .task .task-row { gap: 6px; }
}

/* ============================================================
 * 大屏 1600+：放大字号与间距（不要过密）
 * ============================================================ */
@media (min-width: 1600px) {
  .app { grid-template-columns: 260px 360px minmax(0, 1fr); }
  .titlebar { padding: 0 20px; }
  .main-inner { padding: 24px 32px; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi .val { font-size: 26px; }
  .task-hero h1 { font-size: 30px; }
}
@media (min-width: 2000px) {
  .app { grid-template-columns: 280px 380px minmax(0, 1fr); }
  html { font-size: clamp(14px, 0.5vw + 11px, 18px); }
}
@media (min-width: 2560px) {
  /* 2K / 4K：内容最大宽限制避免行长过大 */
  .main-inner { max-width: 1800px; margin: 0 auto; }
}

/* ============================================================
 * 矮窗口：高度 < 720 时收紧
 * ============================================================ */
@media (max-height: 760px) {
  .app { min-height: 100vh; }
  .titlebar { padding: 0 12px; }
  .titlebar, .app > header.titlebar { min-height: 44px; }
  .main-inner { padding: 14px 18px; }
  .w-body { max-height: 50vh; }
}
@media (max-height: 600px) {
  .main-inner { padding: 10px 14px; }
  .kpis { gap: 8px; }
  .kpi { padding: 8px 10px; }
}

/* ============================================================
 * 平板 768~1023：侧栏转抽屉
 * ============================================================ */
@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "titlebar"
      "main"
      "groups";
  }
  .app > header.titlebar { grid-area: titlebar; }
  .app > aside.sidebar { display: none; }
  .app > section.groups {
    grid-area: groups;
    border-right: 0;
    border-top: 1px solid var(--border);
    max-height: 280px;
  }
  .app > main.main { grid-area: main; }
  .page { grid-template-columns: 1fr !important; }
  .brand-side { display: none !important; }
  .form-side { padding: 32px 20px !important; }
}

/* ============================================================
 * 手机 <768：紧凑单列
 * ============================================================ */
@media (max-width: 640px) {
  .titlebar { padding: 0 12px !important; }
  .titlebar-left > span { display: none; }
  .tb-search { display: none; }
  .titlebar-right .tb-refresh span:not(.meta) { display: none; }
  .main-inner { padding: 14px !important; }
  .kpis { grid-template-columns: 1fr !important; gap: 10px !important; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .subtask { flex-wrap: wrap; }
  .subtask-actions { width: 100%; justify-content: flex-end; }
  .modal { width: 96vw !important; max-height: 92vh; overflow: auto; }
  .seg-tabs .tab2 { font-size: 12px; }
}

/* ============================================================
 * 全局可滚动兜底（高度不足的窗口也能用）
 * ============================================================ */
html, body { overflow-x: hidden; }
.main { min-width: 0; }

/* ============================================================
 * 浮窗页（floating.html）：根据屏幕自适应
 *   - 屏幕宽 ≥ 1280：widget 固定 320px
 *   - 屏幕宽 640~1279：widget 固定 280px
 *   - 屏幕宽 < 640：widget 充满左右各 8px
 *   - 屏幕高 < 600：widget 紧凑化（正文字号、padding 收紧）
 * ============================================================ */
.desktop { min-height: 100vh; padding: 24px; box-sizing: border-box; }

/* 中屏：widget 收紧 */
@media (max-width: 1279px) {
  .widget { width: 280px; }
  .widget.is-minimized { width: 200px; }
}
/* 小屏：widget 贴边 */
@media (max-width: 640px) {
  .desktop { padding: 8px; }
  .widget {
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none;
  }
  .widget.is-minimized { width: 200px; left: auto !important; }
}
/* 矮窗口：widget 内容紧凑 */
@media (max-height: 640px) {
  .w-body { max-height: 40vh; }
  .w-kpi .val { font-size: 16px; }
  .widget { font-size: 12px; }
}
/* 超高屏：避免内容区过高 */
@media (min-height: 1100px) {
  .w-body { max-height: 55vh; }
}