/* ============================================================================
   styles.css —— 个人工作成果管理台的整体外观，以及「不同屏幕下的排版规则」
   作用：让同一套网页在电脑宽屏、笔记本、平板、手机上都能正常看、正常点。
   依赖：无。纯 CSS，不需要任何外部库；由 index.html 用 <link> 引入。
   ⚠️ 2026-11-05 响应式改版（用户已确认方案 A）：
      ① 电脑宽屏：内容区设阅读舒适上限并左右居中，修掉「右侧空一大块」；
      ② 手机：7 个菜单改「两行 4+3 网格」全部可见，不再需要横向滑动；
      ③ 一并修掉窄屏的图表溢出、任务行挤压、按钮触摸区域偏小。
   本次只改排版，不动任何业务逻辑，也不动浏览器里已经存的数据。
   ============================================================================ */

/* 基础重置：让所有元素的「边框和内边距」都算在宽度里面，并清掉浏览器默认间距。
   不加这一条，padding 会把卡片撑得比预期宽，窄屏上更容易顶出屏幕。 */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* 页面整体：浅灰蓝底、深灰字、系统自带中文字体。 */
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f1f5f9;            /* 浅灰蓝背景 */
  color: #1e293b;                /* 深灰文字 */
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;       /* 超长的项目名/描述允许折行，别把卡片撑破屏幕 */
}

/* 整体骨架：左边固定导航 + 右边内容区，横向排成一行。 */
.layout { display: flex; min-height: 100vh; }

/* 左侧导航栏：桌面上固定在左边，页面滚动时它不跟着跑。 */
.nav {
  width: 220px;
  flex: 0 0 220px;               /* 不许被右边内容挤窄 */
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  padding: 18px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.nav .brand { font-size: 16px; font-weight: 700; color: #2563eb; margin-bottom: 4px; }
.nav .brand-sub { font-size: 11px; color: #94a3b8; margin-bottom: 16px; }

/* 每个菜单项：桌面上是竖排的一整行。 */
.nav a {
  display: block; padding: 10px 12px; margin: 4px 0; border-radius: 8px;
  color: #475569; text-decoration: none; font-size: 14px; cursor: pointer;
}
.nav a:hover { background: #eff6ff; }
.nav a.active { background: #2563eb; color: #fff; }   /* 当前页面高亮 */

/* 菜单的两套文字：电脑显示完整名称，手机显示短名称（由最下面的媒体查询切换）。 */
.menu-full  { display: inline; }
.menu-short { display: none; }

/* 右侧内容区 —— 这里是「宽屏右边空一大块」的根治点。
   flex:1 让它占满导航以外的宽度；max-width 设一个阅读舒适的上限；
   margin-inline:auto 把超过上限的空间平均分到左右两边，于是留白左右对称。
   ⚠️ min-width:0 很关键：不加的话 flex 子项会被内部内容撑宽，max-width 就管不住了。 */
.main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 1560px;             /* 电脑宽屏上内容最宽 1560 像素，再宽读起来累 */
  margin-inline: auto;           /* 左右居中，空白不再全堆在右边 */
  padding: 24px;
}
.page-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; }

/* 卡片通用样式：白底、细边、圆角。 */
.card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.card h3 { font-size: 15px; margin-bottom: 10px; color: #334155; }

/* 图表：charts.js 画出来的 SVG 自带固定宽度（折线图是 340 像素），
   窄卡片里会顶出去。这里统一限制「最宽不超过容器」并让它等比缩放。
   SVG 本身带 viewBox，所以设 height:auto 不会变形。
   好处：不用改 charts.js 一行代码，改动面更小、更不容易碰坏图表逻辑。 */
.card svg { max-width: 100%; height: auto; }

/* 顶部蓝色横幅 */
.banner {
  background: linear-gradient(90deg, #2563eb, #3b82f6); color: #fff;
  border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; font-size: 16px; font-weight: 600;
}

/* 指标卡一排：桌面用弹性布局，宽了就多排、窄了自动换行。 */
.metrics { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.metric { flex: 1; min-width: 140px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; }
.metric .num { font-size: 24px; font-weight: 700; color: #2563eb; }
.metric .lbl { font-size: 12px; color: #64748b; }

/* 紧急提醒区（红框） */
.alert-box { background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.alert-box .title { color: #b91c1c; font-weight: 700; margin-bottom: 8px; }
.alert-item { padding: 6px 0; border-bottom: 1px dashed #fecaca; font-size: 13px; }
.alert-item:last-child { border-bottom: none; }

/* 进度条：外层灰槽，内层蓝条按百分比设宽度。 */
.progress { background: #e2e8f0; border-radius: 999px; height: 8px; overflow: hidden; margin-top: 6px; }
.progress > span { display: block; height: 100%; background: #2563eb; }

/* 紧急度色块 */
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; color: #fff; }
.tag.normal { background: #16a34a; } .tag.warning { background: #f59e0b; }
.tag.urgent { background: #dc2626; } .tag.overdue { background: #7f1d1d; }

/* 按钮：统一蓝底白字，次要/危险/小号各有变体。 */
.btn { display: inline-block; padding: 8px 14px; border: none; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; font-size: 13px; }
.btn:hover { background: #1d4ed8; }
.btn.secondary { background: #e2e8f0; color: #334155; }
.btn.danger { background: #dc2626; }
.btn.sm { padding: 3px 8px; font-size: 12px; border-radius: 6px; }  /* 列表/卡片里的删除等次要操作 */
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 表单：输入框一律占满所在容器（受上面的 box-sizing 保护，不会溢出）。 */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; font-family: inherit;
}

/* 两列 / 三列网格：桌面并排，窄屏由下面的媒体查询改成单列。 */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* 列表行：一行里放复选框、文字、按钮，挤不下时由手机规则允许换行。 */
.row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.row:last-child { border-bottom: none; }
.row .grow { flex: 1; }
.row.done .title { text-decoration: line-through; color: #94a3b8; }

/* 模态弹窗：浮在页面中央，内容太高时自己滚动。 */
.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 12px; padding: 20px; width: 90%; max-width: 520px; max-height: 86vh; overflow-y: auto; }
.modal h3 { margin-bottom: 12px; }

/* 周报/月报生成结果的文本框 */
textarea.output { width: 100%; min-height: 160px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; font-family: inherit; }

/* 复盘总结等长文本，允许折行，别把卡片撑宽 */
pre { overflow-wrap: anywhere; }

/* ============================================================================
   以下三段是「按屏幕宽度切换排版」的规则（媒体查询）。
   ============================================================================ */

/* ① 超宽屏（≥1600 像素）：卡片间距放宽一点，看起来更透气。 */
@media (min-width: 1600px) {
  .grid2 { gap: 20px; }
}

/* ② 平板 / 小笔记本（721～900 像素）：导航仍竖排但收窄，卡片先改单列，避免两列太挤。 */
@media (min-width: 721px) and (max-width: 900px) {
  .nav { width: 180px; flex-basis: 180px; padding: 16px 10px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .main { padding: 18px; }
}

/* ③ 手机（≤720 像素）：导航搬到顶部，排成两行「4 + 3」网格，7 个菜单一次看全。 */
@media (max-width: 720px) {
  .layout { flex-direction: column; }   /* 整体改成上下排：导航在上，内容在下 */

  .nav {
    width: 100%;
    flex: 0 0 auto;
    height: auto;
    position: static;             /* 不再吸顶，免得挡住下面的内容 */
    display: grid;                /* 用网格摆菜单 */
    grid-template-columns: repeat(4, minmax(0, 1fr));  /* 每行 4 个 → 7 个自动变成 4 + 3 两行 */
    gap: 6px;
    padding: 10px;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    overflow: visible;            /* 关键：不再横向滚动，菜单不会被藏到屏幕外 */
  }
  .nav .brand, .nav .brand-sub { display: none; }  /* 手机上省掉标题，把空间留给菜单 */
  .nav a {
    margin: 0;
    padding: 10px 2px;
    min-height: 44px;             /* 手指点得中的高度（原来约 33 像素偏小） */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
  }
  .menu-full  { display: none; }  /* 手机上换成短名称 */
  .menu-short { display: inline; }

  .grid2, .grid3 { grid-template-columns: 1fr; }  /* 卡片一律单列 */
  .main { padding: 14px; }

  /* 指标卡改两列网格；如果总数是单数，最后一张占满整行，不留半截空白 */
  .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric { min-width: 0; }
  .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* 一行挤不下时自动换行，避免文字和「编辑/删除」按钮叠在一起 */
  .row { flex-wrap: wrap; gap: 8px; }
  .row .grow { flex: 1 1 60%; min-width: 0; }
  /* ⚠️ 这条用了 !important，因为 AI 拆解弹窗给日期框写死了 width:150px（行内样式），
     普通 CSS 盖不过它；不覆盖的话手机上日期框会把弹窗顶破。 */
  .row input[type="date"] { width: 100% !important; }

  /* 所有按钮至少 40 像素高，手机上手指点得准 */
  .btn { min-height: 40px; padding: 10px 14px; }
  .btn.sm { min-height: 40px; padding: 8px 10px; font-size: 12px; }

  .modal { width: calc(100% - 24px); padding: 16px; max-height: 88vh; }
  textarea.output { min-height: 140px; }
  .card { overflow-wrap: anywhere; }
}

/* ④ 极窄手机（≤360 像素，如小屏 iPhone SE）：再收一点间距，指标卡改单列。 */
@media (max-width: 360px) {
  .nav { gap: 4px; padding: 8px; }
  .nav a { padding: 8px 1px; }
  .metrics { grid-template-columns: 1fr; }
  .metric:last-child:nth-child(odd) { grid-column: auto; }
}