/* ============================================================
   养殖称重系统 · 设计系统
   管理端网页 + 手机网页版共用。改这里，两个端一起变。
   ============================================================ */

:root {
  /* 主色：深林绿，稳重、耐看，长时间盯着不累 */
  --g-900: #0f3d26;
  --g-800: #14532d;
  --g-700: #1a6b3c;
  --g-600: #217a46;
  --g-500: #2b8b52;
  --g-100: #e6f2ea;
  --g-50:  #f1f8f4;

  /* 中性色：带一点绿味，跟主色是一家 */
  --ink:   #16241d;
  --ink-2: #3d4f46;
  --ink-3: #6b7c73;
  --ink-4: #9aa8a1;
  --line:  #e4eae6;
  --line-2:#eef2ef;
  --bg:    #f2f5f3;
  --card:  #ffffff;

  /* 语义色 */
  --red:   #c0392b;  --red-bg:   #fdf0ee;
  --amber: #b87514;  --amber-bg: #fdf4e6;
  --blue:  #2563a8;  --blue-bg:  #eef4fb;

  /* 尺度 */
  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;  --r-xl: 20px;
  --sd-1: 0 1px 2px rgba(16, 40, 28, .05);
  --sd-2: 0 2px 8px rgba(16, 40, 28, .06), 0 1px 2px rgba(16, 40, 28, .04);
  --sd-3: 0 8px 24px rgba(16, 40, 28, .08), 0 2px 6px rgba(16, 40, 28, .04);
  --sd-4: 0 18px 50px rgba(16, 40, 28, .16);

  /* 老类名兼容，页面里已经在用 */
  --green: var(--g-700);
  --green-dark: var(--g-800);
  --green-light: var(--g-100);
  --muted: var(--ink-3);
  --text: var(--ink);
  --radius: var(--r);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* 数字等宽：表格里的数字对得齐 */
  /*
   * 手机兜底：整页不许横向滚。
   * 没有这条的话，一个宽表格就能把整个页面撑成 2000px 宽 ——
   * 手机上看到的就是"内容溢出到屏幕外面、怎么滑都滑不过去"。
   */
  overflow-x: hidden;
  max-width: 100vw;
}

a { color: var(--g-700); text-decoration: none; transition: color .15s; }
a:hover { color: var(--g-800); text-decoration: underline; }

/* ------------------------------------------------------------ 登录页 */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1000px 500px at 15% 0%, #1f6b41 0%, transparent 60%),
    radial-gradient(900px 500px at 85% 100%, #16512f 0%, transparent 60%),
    linear-gradient(150deg, #0f3d26, #1a6b3c 55%, #0f3d26);
  position: relative; overflow: hidden;
}
/* 背景上飘一层细网格，显得有质感 */
.login-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
}
.login-box {
  position: relative; width: 100%; max-width: 400px;
  background: #fff; border-radius: var(--r-xl); padding: 40px 36px 32px;
  box-shadow: var(--sd-4);
}
.login-box h1 {
  font-size: 26px; margin: 0 0 6px; letter-spacing: -.3px; color: var(--g-900);
}
.login-box p.sub { color: var(--ink-3); margin: 0 0 28px; font-size: 14px; }

/* --------------------------------------------------------------- 布局 */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 224px; flex: 0 0 224px; padding: 0 0 20px;
  background: linear-gradient(180deg, #14532d, #0f3d26);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }

.sidebar .brand {
  padding: 24px 22px 20px; color: #fff; font-size: 17px; font-weight: 700;
  letter-spacing: -.2px; line-height: 1.35;
  border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 10px;
}
.sidebar .brand small {
  display: block; font-weight: 400; font-size: 11.5px;
  color: rgba(255,255,255,.55); margin-top: 3px; letter-spacing: .2px;
}

.nav-item {
  display: block; padding: 11px 22px; margin: 2px 10px;
  color: rgba(255,255,255,.78); font-size: 14.5px; cursor: pointer;
  border-radius: var(--r-sm); transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.nav-item.active {
  background: rgba(255,255,255,.16); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 #7fd6a3;
}
.nav-item .badge { float: right; margin-top: 3px; }

.main { flex: 1; min-width: 0; }

.topbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 26px 34px 22px; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
  background-image: linear-gradient(180deg, var(--g-50), #fff 70%);
  flex-wrap: wrap;
}
.topbar h2 {
  margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -.5px;
  color: var(--g-900); line-height: 1.25;
}
.topbar .who { color: var(--ink-3); font-size: 13.5px; }

.main > #view { padding: 26px 34px 60px; }

/* ---------------------------------------------------------------- 卡片 */
.card {
  background: var(--card); border-radius: var(--r-lg);
  padding: 22px 24px; margin-bottom: 18px;
  box-shadow: var(--sd-2); border: 1px solid var(--line-2);
  /*
   * 卡片自己横向滚动。
   * 表格里的字我设了 nowrap（列对齐才好看），代价是窄屏上表格会很宽。
   * 让它**在卡片里**滚，而不是把整页撑破 —— 这才是手机上该有的行为。
   */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.card::-webkit-scrollbar { height: 6px; }
.card::-webkit-scrollbar-thumb { background: #d5ded9; border-radius: 3px; }
.card h3 {
  margin: 0 0 18px; font-size: 17px; font-weight: 700;
  color: var(--ink); display: flex; align-items: baseline; gap: 10px;
  letter-spacing: -.2px;
}
.card h3 small { color: var(--ink-3); font-weight: 400; font-size: 13px; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid.c6 { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }

/* 指标卡：左边一道彩色竖条 + 大号数字 */
.stat {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 20px 22px 18px;
  box-shadow: var(--sd-1); transition: box-shadow .18s, transform .18s;
}
.stat:hover { box-shadow: var(--sd-3); transform: translateY(-1px); }
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--g-600); border-radius: 0 4px 4px 0;
}
.stat .label { color: var(--ink-3); font-size: 13px; letter-spacing: .2px; }
.stat .value {
  font-size: 34px; font-weight: 700; line-height: 1.15; margin: 6px 0 2px;
  letter-spacing: -1px; color: var(--g-900);
}
.stat .value small { font-size: 15px; font-weight: 500; color: var(--ink-3); margin-left: 5px; letter-spacing: 0; }
.stat .hint { font-size: 12.5px; color: var(--ink-4); }

.stat.warn { background: var(--amber-bg); border-color: #f3dcb8; }
.stat.warn::before { background: var(--amber); }
.stat.warn .value { color: #8a531a; }
.stat.danger { background: var(--red-bg); border-color: #f5cec8; }
.stat.danger::before { background: var(--red); }
.stat.danger .value { color: #93301f; }
.stat.good { background: var(--g-50); border-color: #cfe6d8; }
.stat.good::before { background: var(--g-600); }

/* --------------------------------------------------------------- 控件 */
input, select, textarea, button { font-family: inherit; font-size: 14.5px; color: var(--ink); }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=email], select, textarea {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 12px 14px; line-height: 1.6; }
input:hover, select:hover, textarea:hover { border-color: #cfdad4; }
input:focus, select:focus, textarea:focus {
  border-color: var(--g-600); box-shadow: 0 0 0 4px rgba(33, 122, 70, .12);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%236b7c73' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}

button {
  height: 42px; padding: 0 20px; border: 0; border-radius: var(--r);
  background: linear-gradient(180deg, var(--g-600), var(--g-700));
  color: #fff; font-weight: 600; cursor: pointer; letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(20, 83, 45, .22);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
button:hover { filter: brightness(1.07); box-shadow: 0 4px 14px rgba(20, 83, 45, .28); }
button:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(20,83,45,.2); }
button.ghost {
  background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  box-shadow: var(--sd-1); font-weight: 500;
}
button.ghost:hover { background: var(--g-50); border-color: #cddcd4; color: var(--g-800); }
button.danger { background: linear-gradient(180deg, #d0492f, var(--red)); box-shadow: 0 2px 6px rgba(192,57,43,.24); }
button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
button.sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); font-weight: 500; }
button.big { height: 52px; font-size: 16.5px; width: 100%; border-radius: var(--r); letter-spacing: 1px; }

.row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.row > * { min-width: 0; }
.field { flex: 1 1 160px; }
.field label { display: block; font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; letter-spacing: .2px; }
.field.wide { flex: 2 1 260px; }

label.check {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14px;
  padding: 8px 0; cursor: pointer; color: var(--ink-2);
}
label.check input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--g-600); cursor: pointer; margin: 0;
}

/* ---------------------------------------------------------------- 表格 */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th, td { text-align: left; padding: 13px 16px; white-space: nowrap; }
th {
  color: var(--ink-3); font-weight: 600; font-size: 12.5px; letter-spacing: .4px;
  background: var(--g-50); position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--line);
}
th:first-child { border-top-left-radius: var(--r); }
th:last-child { border-top-right-radius: var(--r); }
tbody tr { transition: background .12s; }
tbody tr:nth-child(even) { background: #fafcfb; }
tbody tr:hover { background: var(--g-50); }
td { border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
tbody tr:last-child td { border-bottom: 0; }
td b, td strong { color: var(--ink); font-weight: 650; }
td.wrap, th.wrap { white-space: normal; min-width: 200px; }

.table-scroll {
  overflow: auto; max-height: 640px;
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sd-1);
}
.table-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.table-scroll::-webkit-scrollbar-thumb { background: #cdd8d2; border-radius: 5px; border: 2px solid #fff; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: #b3c2ba; }

/* ---------------------------------------------------------------- 标签 */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--line-2); color: var(--ink-3); line-height: 1.65;
}
.tag.high, .tag.danger { background: var(--red-bg); color: var(--red); }
.tag.mid, .tag.warn { background: var(--amber-bg); color: var(--amber); }
.tag.low, .tag.ok { background: var(--g-100); color: var(--g-800); }
.tag.info { background: var(--blue-bg); color: var(--blue); }

.badge {
  display: inline-block; min-width: 20px; text-align: center;
  background: var(--red); color: #fff; border-radius: 999px;
  padding: 0 7px; font-size: 11.5px; font-weight: 600; line-height: 19px;
  box-shadow: 0 1px 3px rgba(192,57,43,.35);
}
.badge.gray { background: #b9c5be; box-shadow: none; }

.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 14px; }
.hidden { display: none !important; }

/* -------------------------------------------------------------- 提示条 */
.notice {
  padding: 14px 18px; border-radius: var(--r); font-size: 14px;
  background: var(--blue-bg); border-left: 4px solid var(--blue);
  color: #1e4e85; margin-bottom: 16px; line-height: 1.7;
}
.notice.warn { background: var(--amber-bg); border-left-color: var(--amber); color: #7d4c11; }
.notice.danger { background: var(--red-bg); border-left-color: var(--red); color: #8d2a1d; }
.notice.good { background: var(--g-50); border-left-color: var(--g-600); color: var(--g-800); }
.notice code {
  background: rgba(0,0,0,.05); padding: 1px 6px; border-radius: 5px;
  font-size: 12.5px; font-family: ui-monospace, Consolas, monospace;
}

/* ----------------------------------------------------------------- 图表 */
.chart { width: 100%; height: 230px; display: block; }
.chart.tall { height: 320px; }
.legend {
  display: flex; gap: 18px; font-size: 12.5px; color: var(--ink-3);
  margin-top: 10px; flex-wrap: wrap;
}
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }

/* ----------------------------------------------------------------- 弹层 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(12, 32, 22, .5);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px; overflow-y: auto; z-index: 50;
  animation: fade .16s ease-out;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal {
  background: #fff; border-radius: var(--r-xl); padding: 26px 28px;
  width: 100%; max-width: 640px; box-shadow: var(--sd-4);
  animation: rise .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.99) } to { opacity: 1; transform: none } }
.modal.wide { max-width: 940px; }
.modal h3 { margin: 0 0 18px; font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.modal .actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }

.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%) translateY(8px);
  background: #16241d; color: #fff; padding: 12px 22px; border-radius: var(--r);
  font-size: 14.5px; z-index: 99; opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; max-width: 90vw; box-shadow: var(--sd-4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #8d2a1d; }

/* ------------------------------------------------------------ 新版本提示条 */
.update-bar {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #1a6b3c, #14532d);
  color: #fff; padding: 12px 16px 12px 20px; border-radius: 999px;
  box-shadow: 0 12px 32px rgba(15, 61, 38, .32); z-index: 98;
  font-size: 14.5px; animation: dropIn .28s cubic-bezier(.2,.8,.3,1);
  max-width: calc(100vw - 32px);
}
@keyframes dropIn { from { opacity: 0; transform: translate(-50%, -14px) } to { opacity: 1; transform: translate(-50%, 0) } }
.update-bar .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.update-bar button {
  height: 32px; padding: 0 16px; font-size: 14px; border-radius: 999px;
  background: rgba(255,255,255,.95); color: var(--g-800); font-weight: 600;
  box-shadow: none; flex: 0 0 auto;
}
.update-bar button:hover { background: #fff; filter: none; }
.update-bar .x {
  cursor: pointer; opacity: .7; font-size: 18px; line-height: 1;
  padding: 0 2px; flex: 0 0 auto;
}
.update-bar .x:hover { opacity: 1; }

/* ------------------------------------------------------------- App 端 */
.app { max-width: 520px; margin: 0 auto; min-height: 100vh; background: var(--bg); padding-bottom: 74px; }

.app-head {
  background: linear-gradient(160deg, var(--g-700), var(--g-900));
  color: #fff; padding: 20px 20px 22px; position: sticky; top: 0; z-index: 10;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: 0 6px 20px rgba(15, 61, 38, .22);
}
.app-head .t { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.app-head .s { font-size: 12.5px; opacity: .8; margin-top: 2px; }
.app-body { padding: 16px 14px; }
.app-body .card { margin-bottom: 14px; padding: 18px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); display: flex; z-index: 20;
  max-width: 520px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; text-align: center; padding: 10px 0 12px; color: var(--ink-4);
  font-size: 11.5px; text-decoration: none; transition: color .15s;
}
.tabbar a.on { color: var(--g-700); font-weight: 700; }
.tabbar a .ic { display: block; font-size: 19px; line-height: 1.4; }
.tabbar a .badge { position: absolute; transform: translate(8px, -3px); }

/* ------------------------------------------------------------- 响应式 */
@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: static; padding: 6px 8px;
    display: flex; overflow-x: auto; gap: 4px;
    background: linear-gradient(90deg, var(--g-800), var(--g-900));
  }
  .sidebar .brand { display: none; }
  .nav-item {
    margin: 0; padding: 9px 14px; white-space: nowrap; font-size: 13.5px;
  }
  .nav-item.active { box-shadow: inset 0 -3px 0 #7fd6a3; background: rgba(255,255,255,.14); }
  .nav-item .badge { float: none; margin-left: 6px; }
  .topbar { padding: 16px 18px 14px; position: static; }
  .topbar h2 { font-size: 21px; }
  .main > #view { padding: 16px 14px 48px; }
  .card { padding: 18px; border-radius: var(--r); }
  .stat .value { font-size: 29px; }

  /* 手机上表格再紧凑一点，能少滚一点是一点 */
  th, td { padding: 10px 12px; font-size: 13px; }
  .table-scroll { max-height: 420px; }
  .grid { gap: 12px; }

  /* 长字符串（耳标 EPC、报错信息）不撑破布局 */
  .notice, .modal, td.wrap, .wrap { word-break: break-word; overflow-wrap: anywhere; }

  /* 顶部栏和底部 tab 的刘海屏适配 */
  .topbar { padding-top: max(16px, env(safe-area-inset-top)); }
  .update-bar { top: max(16px, env(safe-area-inset-top)); }
}

/* 更窄的手机（竖屏小屏） */
@media (max-width: 430px) {
  .stat .value { font-size: 26px; }
  .card { padding: 16px; }
  .app-body { padding: 12px 10px; }
  th, td { padding: 9px 10px; font-size: 12.5px; }
  .modal { padding: 20px 16px; }
  .modal-mask { padding: 20px 10px; }
}

/* 打印：把导航和按钮去掉，只留数据 */
@media print {
  .sidebar, .topbar .who, button, .nav-item { display: none !important; }
  .main > #view { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}