/* =============================================================
   社区健康体检管理系统（标准版）— 设计系统「公卫纸档」
   米白纸底 · 靛蓝主色 · 朱砂印章红点缀 · 宋黑双字族
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f6f3ec;          /* 米白纸底 */
  --paper-2:#efeadf;        /* 深一档纸 */
  --card:#fffdf8;           /* 卡片 */
  --ink:#22304a;            /* 主墨色（靛） */
  --ink-2:#4a5a78;          /* 次级文字 */
  --ink-3:#8b97ad;          /* 弱文字 */
  --indigo:#1d3a6e;         /* 主靛蓝 */
  --indigo-2:#2e549c;       /* 亮靛蓝 */
  --indigo-soft:#e3eaf7;    /* 靛蓝浅底 */
  --cinnabar:#c0392b;       /* 朱砂红（印章/警示） */
  --cinnabar-soft:#fbe9e6;
  --green:#2e7d52;          /* 合格绿 */
  --green-soft:#e2f1e8;
  --amber:#b07816;          /* 提示黄 */
  --amber-soft:#faf0d9;
  --line:#ddd5c4;           /* 纸面分隔线 */
  --line-2:#e9e3d5;
  --shadow:0 2px 10px rgba(34,48,74,.07);
  --serif:'Noto Serif SC',serif;
  --sans:'Noto Sans SC',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px}
body{
  font-family:var(--sans);color:var(--ink);background:var(--paper);
  /* 纸张纹理：细横线 + 微噪点 */
  background-image:
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(34,48,74,.025) 31px 32px),
    radial-gradient(circle at 20% 0%,rgba(29,58,110,.04),transparent 50%);
  min-height:100vh;display:flex;
}
::selection{background:var(--indigo);color:#fff}
a{color:var(--indigo-2);text-decoration:none}

/* ---------- 侧边栏 ---------- */
.sidebar{
  width:218px;flex:0 0 218px;background:var(--card);
  border-right:1px solid var(--line);min-height:100vh;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;border-bottom:1px dashed var(--line)}
.brand .seal{
  width:38px;height:38px;flex:0 0 38px;border:2px solid var(--cinnabar);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:15px;color:var(--cinnabar);
  letter-spacing:1px;background:var(--cinnabar-soft);
}
.brand b{font-family:var(--serif);font-size:15.5px;font-weight:700;display:block;line-height:1.25}
.brand small{font-size:10.5px;color:var(--ink-3);letter-spacing:.5px}
.nav-group{padding:12px 10px 4px}
.nav-group h6{
  font-size:10.5px;color:var(--ink-3);font-weight:500;letter-spacing:2px;
  padding:6px 10px;text-transform:uppercase;
}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  color:var(--ink-2);font-size:13px;cursor:pointer;transition:.15s;margin-bottom:1px;
}
.nav-item svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{background:var(--paper-2);color:var(--ink)}
.nav-item.active{background:var(--indigo);color:#fff;font-weight:500}
.sidebar-foot{
  margin-top:auto;padding:14px 16px;border-top:1px dashed var(--line);
  display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink-3);
}
.sidebar-foot .avatar{
  width:30px;height:30px;border-radius:50%;background:var(--indigo-soft);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 30px;
}
.sidebar-foot b{color:var(--ink);font-weight:500;display:block;font-size:12px}
.sidebar-foot > svg{width:16px;height:16px;flex:0 0 16px;stroke:var(--ink-3);fill:none;stroke-width:1.8;cursor:pointer}
.sidebar-foot > svg:hover{stroke:var(--indigo)}

/* ---------- 主区域 ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:52px;background:rgba(255,253,248,.9);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-2);display:flex;align-items:center;
  padding:0 24px;gap:14px;position:sticky;top:0;z-index:50;
}
.topbar .crumb{font-size:12.5px;color:var(--ink-3)}
.topbar .crumb b{color:var(--ink);font-weight:500}
.topbar .spacer{flex:1}
.topbar .clock{font-family:var(--mono);font-size:12px;color:var(--ink-2);background:var(--paper-2);padding:4px 10px;border-radius:6px}
.topbar .org{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.topbar .org::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green)}

.content{padding:22px 26px 40px;max-width:1480px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:.5px}
.page-head h1 .tag-cn{
  display:inline-block;vertical-align:4px;margin-left:10px;font-family:var(--sans);
  font-size:10.5px;font-weight:500;color:var(--cinnabar);border:1px solid var(--cinnabar);
  border-radius:4px;padding:1px 7px;letter-spacing:1px;
}
.page-head p{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:7px;
  font-size:12.5px;font-weight:500;font-family:var(--sans);cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);transition:.15s;
}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{border-color:var(--indigo-2);color:var(--indigo)}
.btn.primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn.primary:hover{background:var(--indigo-2)}
.btn.danger{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
.btn.sm{padding:4px 10px;font-size:11.5px;border-radius:5px}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden;
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line-2);
}
.card-head h3{font-family:var(--serif);font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-head h3::before{content:'';width:4px;height:15px;background:var(--indigo);border-radius:2px}
.card-head .sub{font-size:11.5px;color:var(--ink-3);font-weight:400}
.card-body{padding:18px}
.card-body.flush{padding:0}

/* ---------- KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.kpi{
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;
  padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--indigo)}
.kpi.red::after{background:var(--cinnabar)}
.kpi.green::after{background:var(--green)}
.kpi.amber::after{background:var(--amber)}
.kpi .label{font-size:12px;color:var(--ink-3);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.kpi .label svg{width:14px;height:14px;stroke:var(--ink-3);fill:none;stroke-width:1.8}
.kpi .num{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-.5px}
.kpi .num small{font-size:13px;color:var(--ink-3);font-weight:400;margin-left:3px}
.kpi .delta{font-size:11px;margin-top:5px;color:var(--ink-3)}
.kpi .delta.up{color:var(--green)}
.kpi .delta.down{color:var(--cinnabar)}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:12.5px}
table.data th{
  text-align:left;padding:10px 14px;background:var(--paper-2);color:var(--ink-2);
  font-weight:500;font-size:11.5px;letter-spacing:.5px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.data td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:#faf7ef}
table.data .mono{font-family:var(--mono);font-size:12px}
table.data .name{font-weight:500}

/* ---------- 标签 ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;
  font-size:11px;font-weight:500;white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.blue{background:var(--indigo-soft);color:var(--indigo-2)}
.pill.green{background:var(--green-soft);color:var(--green)}
.pill.red{background:var(--cinnabar-soft);color:var(--cinnabar)}
.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.gray{background:var(--paper-2);color:var(--ink-3)}
.pill.plain::before{display:none}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 18px}
.field label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:6px;font-weight:500}
.field label .req{color:var(--cinnabar);margin-left:2px}
.field input,.field select,.field textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:7px;
  background:#fff;font-family:var(--sans);font-size:13px;color:var(--ink);outline:none;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--indigo-2);box-shadow:0 0 0 3px rgba(46,84,156,.12)}
.field .hint{font-size:11px;color:var(--ink-3);margin-top:4px}
.field .hint.warn{color:var(--amber)}
.field .hint.error{color:var(--cinnabar)}
.field input.error{border-color:var(--cinnabar);background:#fffafa}
.field .unit-input{position:relative}
.field .unit-input span{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}

/* ---------- 提示条 ---------- */
.notice{
  display:flex;gap:10px;padding:11px 14px;border-radius:9px;font-size:12.5px;
  margin-bottom:14px;line-height:1.6;align-items:flex-start;
}
.notice svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notice.info{background:var(--indigo-soft);color:var(--indigo)}
.notice.warn{background:var(--amber-soft);color:var(--amber)}
.notice.danger{background:var(--cinnabar-soft);color:var(--cinnabar);border:1px solid #ecc7c1}
.notice.ok{background:var(--green-soft);color:var(--green)}
.notice b{font-weight:700}

/* ---------- 步骤条 ---------- */
.steps{display:flex;gap:0;margin-bottom:20px;flex-wrap:wrap}
.step{flex:1;min-width:130px;display:flex;align-items:center;gap:9px;padding:10px 12px;position:relative}
.step .dot{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:12px;color:var(--ink-3);flex:0 0 26px;font-weight:600;
}
.step.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.step.now .dot{background:var(--indigo);border-color:var(--indigo);color:#fff}
.step .t b{display:block;font-size:12.5px;font-weight:500}
.step .t small{font-size:10.5px;color:var(--ink-3)}
.step::after{content:'';position:absolute;right:-8px;top:50%;width:16px;height:1px;background:var(--line)}
.step:last-child::after{display:none}

/* ---------- 进度条 ---------- */
.bar{height:7px;background:var(--paper-2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--indigo-2)}
.bar i.green{background:var(--green)}
.bar i.red{background:var(--cinnabar)}
.bar i.amber{background:var(--amber)}

/* ---------- 条码 ---------- */
.barcode{display:flex;align-items:flex-end;gap:1.5px;height:36px}
.barcode i{display:block;background:var(--ink);width:2px;height:100%}
.barcode i:nth-child(3n){width:1px;height:85%}
.barcode i:nth-child(4n){width:3px}
.barcode i:nth-child(5n){height:90%}
.barcode-num{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--ink-2);margin-top:4px}

/* ---------- 双栏布局 ---------- */
.cols{display:grid;gap:18px}
.cols.c2{grid-template-columns:1fr 1fr}
.cols.c21{grid-template-columns:2fr 1fr}
.cols.c12{grid-template-columns:1fr 2fr}
.cols.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.cols.c2,.cols.c21,.cols.c12,.cols.c3{grid-template-columns:1fr}}

/* ---------- 模态警告框（质控弹窗示意） ---------- */
.modal-demo{
  border:2px solid var(--cinnabar);border-radius:12px;background:#fffafa;
  box-shadow:0 8px 30px rgba(192,57,43,.18);overflow:hidden;
}
.modal-demo .mh{
  background:var(--cinnabar);color:#fff;padding:10px 16px;font-weight:700;
  font-size:13.5px;display:flex;align-items:center;gap:8px;
}
.modal-demo .mh svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2}
.modal-demo .mb{padding:16px}

/* ---------- 图例 ---------- */
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* ---------- 打印纸预览 ---------- */
.print-sheet{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 4px 18px rgba(34,48,74,.1);padding:30px 34px;
  font-size:12.5px;line-height:1.8;position:relative;
}
.print-sheet h2{font-family:var(--serif);text-align:center;font-size:19px;letter-spacing:3px;margin-bottom:4px}
.print-sheet .sub-line{text-align:center;font-size:11px;color:var(--ink-3);letter-spacing:1px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:14px}
.print-sheet table{width:100%;border-collapse:collapse;font-size:12px}
.print-sheet table th,.print-sheet table td{border:1px solid #999;padding:6px 9px;text-align:left}
.print-sheet table th{background:#f2efe6;font-weight:500}
.stamp{
  position:absolute;right:36px;bottom:30px;width:88px;height:88px;border:3px solid rgba(192,57,43,.75);
  border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;
  color:rgba(192,57,43,.8);font-family:var(--serif);font-size:11px;font-weight:700;
  transform:rotate(-12deg);line-height:1.5;padding:8px;
}

/* ---------- 工具 ---------- */
.muted{color:var(--ink-3)}
.mono{font-family:var(--mono)}
.tr{text-align:right}.tc{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.flex{display:flex;align-items:center;gap:10px}
.flex .grow{flex:1}
.chart-note{font-size:11px;color:var(--ink-3);margin-top:8px}
svg.chart text{font-family:var(--mono)}