/* ============================================================================
   KD 食品合规门户 · 统一设计规范（Design System）
   文件：/static/kd-ui.css        建立：2026-09-26（第一批-1 界面统一）
   用法：base.html <head> 里 <link rel="stylesheet" href="/static/kd-ui.css">
         → 改这一处，全站 53 个页面生效
   ----------------------------------------------------------------------------
   规范摘要（KD 门户视觉口径）
   主色   #2c5aa0（深蓝）  深 #1a2b4a / 浅 #eef4fb
   语义色 成功 #2f7d4f  警告 #c8860d  危险 #c0392b  信息 #2c5aa0
   字体   system-ui / -apple-system / "Microsoft YaHei" / "PingFang SC"
          正文 15px（手机 16px，避免 iOS 自动放大）· 小字 13.5px · 标题 17px
   圆角   小 9px · 常规 12px · 大 16px（卡片）· 胶囊 999px（徽章）
   间距   4 / 8 / 12 / 16 / 20 / 24（px）六档，页面统一用这几档
   阴影   静止 0 1px 4px rgba(20,40,80,.07) · 悬浮 0 6px 18px rgba(20,40,80,.14)
   触控   手机上可点元素最小高度 44px（Apple HIG / Material 口径）
   按钮四态 默认 / 悬停 hover / 按下 active / 禁用 disabled（见 .kbtn）
   ========================================================================== */

:root{
  /* 主色阶 */
  --kd-primary:#2c5aa0;
  --kd-primary-d:#244d8c;
  --kd-primary-dd:#1a2b4a;
  --kd-primary-l:#eef4fb;
  --kd-primary-bd:#d6e3f6;

  /* 语义色 */
  --kd-ok:#2f7d4f;      --kd-ok-bg:#eafaf1;    --kd-ok-bd:#c9e8d6;
  --kd-warn:#c8860d;    --kd-warn-bg:#fffdf6;  --kd-warn-bd:#f0dcb8;
  --kd-danger:#c0392b;  --kd-danger-bg:#fdeceb;--kd-danger-bd:#f4cdc8;

  /* 中性色 */
  --kd-ink:#1a2b4a;
  --kd-ink-2:#41506b;
  --kd-ink-3:#54637a;
  --kd-muted:#7a8ba6;
  --kd-muted-2:#98a6bd;
  --kd-line:#e6edf6;
  --kd-line-2:#eef2f8;
  --kd-bg:#f2f5fa;
  --kd-card:#ffffff;

  /* 字体 */
  --kd-font:-apple-system,BlinkMacSystemFont,"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  --kd-fs-xs:12.5px; --kd-fs-sm:13.5px; --kd-fs:15px; --kd-fs-lg:17px; --kd-fs-xl:19px;

  /* 圆角 */
  --kd-r-sm:9px; --kd-r:12px; --kd-r-lg:16px; --kd-r-pill:999px;

  /* 间距（六档，页面只准用这几档） */
  --kd-s1:4px; --kd-s2:8px; --kd-s3:12px; --kd-s4:16px; --kd-s5:20px; --kd-s6:24px;

  /* 阴影 */
  --kd-sh:0 1px 4px rgba(20,40,80,.07);
  --kd-sh-lg:0 6px 18px rgba(20,40,80,.14);
  --kd-sh-xl:0 18px 50px rgba(20,40,80,.2);

  /* 触控尺寸 */
  --kd-tap:44px;
}

/* ---------------------------------------------------------------- 基础排版 */
html{-webkit-text-size-adjust:100%}
body.kd,body{
  font-family:var(--kd-font);
  color:var(--kd-ink);
  background:var(--kd-bg);
}
img,svg,video{max-width:100%;height:auto}

/* ---------------------------------------------------------------- 按钮
   四态：默认 / hover 悬停 / active 按下 / disabled 禁用
   全站任何 <button>、a.kbtn、input[type=submit] 自动套用 */
button,.kbtn,input[type=submit],input[type=button]{
  font-family:var(--kd-font);
  font-size:var(--kd-fs-lg);
  font-weight:600;
  color:#fff;
  background:var(--kd-primary);
  border:0;
  border-radius:var(--kd-r);
  cursor:pointer;
  transition:background .15s ease, transform .08s ease, box-shadow .15s ease;
}
/* ① 悬停 */
button:hover,.kbtn:hover,input[type=submit]:hover{background:var(--kd-primary-d)}
/* ② 按下（手机点下去有反馈） */
button:active,.kbtn:active,input[type=submit]:active{background:var(--kd-primary-dd);transform:scale(.985)}
/* ③ 禁用（含提交中"登录中…"态） */
button:disabled,.kbtn:disabled,button[disabled]{
  background:#8ba7cd;color:#fff;cursor:default;transform:none;opacity:.95;
}
/* ④ 焦点（键盘/无障碍） */
button:focus-visible,.kbtn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--kd-primary);outline-offset:2px;
}
/* 变体：次要 / 成功 / 危险 / 幽灵 */
.kbtn-ghost,button.ghost{
  background:#fff;color:var(--kd-primary);border:1px solid var(--kd-primary-bd);
}
.kbtn-ghost:hover,button.ghost:hover{background:var(--kd-primary-l)}
.kbtn-ghost:active,button.ghost:active{background:var(--kd-primary-bd)}
.kbtn-ok,button.ok{background:var(--kd-ok)}
.kbtn-ok:hover,button.ok:hover{background:#266743}
.kbtn-danger,button.danger{background:var(--kd-danger)}
.kbtn-danger:hover,button.danger:hover{background:#a33025}
/* 尺寸：手机加大到 46px，便于拇指点 */
.kbtn-lg{min-height:46px;font-size:var(--kd-fs-lg)}

/* ---------------------------------------------------------------- 卡片 */
.kcard{
  background:var(--kd-card);border-radius:var(--kd-r-lg);
  padding:var(--kd-s4);box-shadow:var(--kd-sh);margin-bottom:var(--kd-s3);
}
.kcard-t{font-size:var(--kd-fs-lg);font-weight:600;color:var(--kd-ink)}
.kcard-sub{font-size:var(--kd-fs-sm);color:var(--kd-muted);margin-top:var(--kd-s1)}

/* ---------------------------------------------------------------- 徽章 / 标签 */
.kbadge{
  display:inline-block;font-size:var(--kd-fs-sm);font-weight:600;
  padding:3px 10px;border-radius:var(--kd-r-pill);
  background:var(--kd-ok-bg);color:var(--kd-ok);white-space:nowrap;
}
.kbadge.warn{background:var(--kd-warn-bg);color:var(--kd-warn)}
.kbadge.bad,.kbadge.danger{background:var(--kd-danger-bg);color:var(--kd-danger)}
.kbadge.info{background:var(--kd-primary-l);color:var(--kd-primary)}

/* ---------------------------------------------------------------- 表单 */
.kinput,input,select,textarea{
  font-family:var(--kd-font);
}
input:not([type=checkbox]):not([type=radio]),select,textarea{
  border:1px solid var(--kd-primary-bd);border-radius:var(--kd-r);
}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  border-color:var(--kd-primary);outline:none;box-shadow:0 0 0 3px rgba(44,90,160,.12);
}

/* ---------------------------------------------------------------- 章节标题 */
.k-sec{
  font-size:var(--kd-fs-lg);font-weight:600;color:#31456b;
  margin:var(--kd-s5) 0 var(--kd-s3);
}

/* ============================================================================
   手机适配（<900px）：卡片单列 / 表格转卡片 / 按钮加大 / 不横滑
   ========================================================================== */
@media(max-width:899px){
  /* 页面容器留白收窄，给内容更多宽度 */
  .wrap{padding-left:var(--kd-s3);padding-right:var(--kd-s3)}
  .kcard,.card{border-radius:var(--kd-r);padding:var(--kd-s3) var(--kd-s3)}

  /* 按钮 / 输入框加大到拇指友好尺寸（≥44px） */
  button,.kbtn,input[type=submit],input[type=button]{min-height:var(--kd-tap);font-size:17px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:var(--kd-tap);font-size:16px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}

  /* 双列 → 单列（卡片单列） */
  .grid2,.kcols{grid-template-columns:1fr !important}

  /* 表格式（有些页面自己写 <table>）：兜底允许内部横滑，绝不撑破整页 */
  .k-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 顶栏图标：只适当加高触控区域，不加宽 —— KD 明确要求手机上标题不能被挤到截断 */
  .top a.ico{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- 表格转卡片（窄屏自动生效，由 base.html 的脚本打 .kcards） ----------
   原理：脚本把 <table> 第一行的 <th> 文本写进同列 <td> 的 data-label，
         这里用 CSS 把每一行渲染成一张卡片，每个单元格变成"标签：值"一行。
   好处：53 个页面共用一段代码，不用逐页改 <table>。 */
@media(max-width:899px){
  table.kcards{display:block;border:0;background:transparent;width:100%}
  table.kcards thead{display:none}
  /* 表头行：不在 <thead> 里的（很多老页面直接写 <tr><th>）也要隐藏，
     否则卡片上方会残留一行"企业 项目 到期日 状态" */
  table.kcards tr[data-khead]{display:none}
  table.kcards tbody,table.kcards tr,table.kcards td{display:block;width:auto}
  table.kcards tr{
    background:#fff;border-radius:var(--kd-r);padding:var(--kd-s2) var(--kd-s3);
    margin-bottom:var(--kd-s2);box-shadow:var(--kd-sh);border:1px solid var(--kd-line);
  }
  table.kcards td{
    border:0;padding:5px 0 5px 5.6em;position:relative;
    font-size:var(--kd-fs);color:var(--kd-ink-2);
    display:block;text-align:left;
    overflow-wrap:anywhere;word-break:break-word;   /* 超长型号/英文串不撑破卡片 */
  }
  /* 标签用绝对定位放在左侧留白里：值再长也会正常折行，不会挤到标签旁边 */
  table.kcards td::before{
    content:attr(data-label);
    position:absolute;left:0;top:6px;width:5.4em;
    color:var(--kd-muted);font-size:var(--kd-fs-sm);line-height:1.6;
    word-break:keep-all;
  }
  table.kcards td:empty{display:none}
  table.kcards td[data-label=""]::before{content:none}
  /* 第一行（通常是名称列）当卡片标题：加粗、无标签、分割线 */
  table.kcards td:first-child{
    font-size:var(--kd-fs-lg);font-weight:600;color:var(--kd-ink);
    padding:0 0 var(--kd-s2) 0;margin-bottom:var(--kd-s1);
    border-bottom:1px solid var(--kd-line-2);
  }
  table.kcards td:first-child::before{content:none}
  table.kcards tr.over td:first-child{color:var(--kd-danger)}
  table.kcards tr.soon td:first-child{color:var(--kd-warn)}
  table.kcards td.dl,table.kcards td.act{justify-content:flex-end}
}
/* 打印时永远回到真正的表格（发货单/检查报告要打印） */
@media print{
  table.kcards,table.kcards tbody,table.kcards tr,table.kcards td{display:revert}
  table.kcards td::before{content:none !important}
}

/* ── C8：客户「我的进度」数字卡（从首页挪到「我的档案」页用）── */
.mpg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.mpg a{background:#f4f8fe;border-radius:11px;padding:11px 4px;text-decoration:none;color:inherit;display:block}
.mpg .n{font-size:21px;font-weight:700;color:#2c5aa0;line-height:1.15}
.mpg .l{font-size:12.5px;color:#7a8ba6;margin-top:3px;line-height:1.3}
@media(max-width:560px){.mpg{grid-template-columns:repeat(2,1fr)}}