/* =========================================================
   components.css · 通用组件（双皮肤变量化）
   ========================================================= */

/* ========== 面板 ========== */
.panel{
  background: var(--panel-bg);
  border:1px solid var(--border-soft); border-radius:8px;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-card);
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--border-soft);
  min-height:40px;
}
.panel-head .title{ font-size:14px; font-weight:600; color:var(--text-main); }
.panel-head .title.gold{ color:var(--wheat-gold-2); }
.panel-head .title.cyan{ color:var(--tech-cyan); }
.panel-head .extra{ font-size:11px; color:var(--text-mute); display:flex; gap:8px; align-items:center; }
.panel-body{ padding:12px 14px; flex:1; min-height:0; }
.panel-body.flush{ padding:0; }

/* ========== 按钮 ========== */
.btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; height:30px;
  background:linear-gradient(180deg,var(--gov-blue-2),var(--gov-blue));
  color:#fff; font-size:12px; border-radius:6px;
  border:1px solid var(--gov-blue); transition:all .15s;
  white-space:nowrap;
}
.btn:hover{ filter:brightness(1.08); box-shadow:0 0 12px rgba(43,108,255,.4); }
.btn.sm{ height:24px; padding:0 10px; font-size:11px; }
.btn.lg{ height:36px; padding:0 18px; font-size:13px; }
.btn.ghost{
  background:var(--form-bg); border:1px solid var(--border);
  color:var(--text-main);
}
.btn.ghost:hover{ border-color:var(--form-focus); color:var(--text-main); }
.btn.warn{
  background:linear-gradient(180deg,#ffb547,var(--orange));
  border-color:rgba(255,138,61,.6); color:#21130a;
}
.btn.danger{
  background:linear-gradient(180deg,#ff6075,var(--high));
  border-color:rgba(255,61,79,.6); color:#fff;
}
.btn.success{
  background:linear-gradient(180deg,#37c98a,var(--agri-green-2));
  border-color:rgba(55,201,138,.6); color:#06210f;
}
.btn.ai{
  background:linear-gradient(180deg,#b388ff,var(--ai-purple));
  border-color:rgba(169,116,255,.6); color:#fff;
}
.btn[disabled]{ opacity:.5; cursor:not-allowed; filter:grayscale(.4); }

/* ========== 行内迷你按钮 ========== */
.mini-link{
  padding:2px 8px; font-size:11px; color:var(--tech-cyan);
  border:1px solid rgba(62,218,244,.40); border-radius:10px;
  background:rgba(62,218,244,.06); cursor:pointer; white-space:nowrap;
}
.mini-link:hover{ background:rgba(62,218,244,.18); color:var(--text-main); }
:root[data-theme="light"] .mini-link{
  color:var(--gov-blue); border-color:rgba(36,87,214,.30); background:rgba(36,87,214,.06);
}
:root[data-theme="light"] .mini-link:hover{ background:rgba(36,87,214,.14); color:var(--gov-blue); }

.mini-link.warn{ color:var(--orange); border-color:rgba(255,138,61,.4); background:rgba(255,138,61,.06); }
.mini-link.warn:hover{ background:rgba(255,138,61,.20); color:var(--text-main); }
.mini-link.danger{ color:var(--high); border-color:rgba(255,61,79,.4); background:rgba(255,61,79,.06); }
.mini-link.success{ color:var(--ok); border-color:rgba(55,201,138,.4); background:rgba(55,201,138,.06); }

/* ========== 标签 / Pill ========== */
.tag-pill{
  display:inline-block; padding:1px 8px; font-size:10px; line-height:16px;
  border-radius:9px; background:rgba(43,108,255,.18);
  color:var(--blue-lvl); white-space:nowrap;
}
:root[data-theme="light"] .tag-pill{
  background:rgba(36,87,214,.10); color:var(--gov-blue);
}
.tag-pill.gold{ background:rgba(246,199,97,.16); color:var(--wheat-gold-2); }
.tag-pill.green{ background:rgba(55,201,138,.16); color:var(--ok); }
.tag-pill.orange{ background:rgba(255,138,61,.16); color:var(--orange); }
.tag-pill.red{ background:rgba(255,61,79,.16); color:var(--high); }
.tag-pill.purple{ background:rgba(169,116,255,.18); color:var(--ai-purple); }
.tag-pill.gray{ background:rgba(125,143,164,.16); color:var(--gray-lvl); }

/* ========== 状态徽章 ========== */
.status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.status-dot.pending{ background:var(--st-pending); }
.status-dot.signed{ background:var(--st-signed); }
.status-dot.decomposed{ background:var(--st-decomposed); }
.status-dot.dispatching{ background:var(--st-dispatch); }
.status-dot.in_progress{ background:var(--st-running); }
.status-dot.waiting_report{ background:var(--st-wait); }
.status-dot.done{ background:var(--st-done); }
.status-dot.overdue{ background:var(--st-overdue); box-shadow:0 0 5px var(--st-overdue); }
.status-dot.archived{ background:var(--st-archived); }

/* ========== 表格 ========== */
table.tbl{ width:100%; border-collapse:collapse; font-size:12px; color:var(--text-main); }
table.tbl thead th{
  text-align:left; padding:8px 10px;
  background: var(--table-head-bg); color:var(--text-soft);
  font-weight:600; border-bottom:1px solid var(--border-soft);
  white-space:nowrap; font-size:11.5px;
}
table.tbl tbody td{
  padding:8px 10px; border-bottom:1px solid var(--table-border);
  vertical-align:middle;
}
table.tbl tbody tr:hover{ background: var(--table-row-hover); }
table.tbl tbody tr.row-overdue{ background:rgba(255,61,79,.08); }
table.tbl tbody tr.row-overdue:hover{ background:rgba(255,61,79,.14); }
table.tbl tbody tr.row-warn{ background:rgba(255,138,61,.06); }
table.tbl tbody td.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.tbl tbody td.center{ text-align:center; }
table.tbl tbody tr.row-active{ background:rgba(62,218,244,.12); }
table.tbl tbody tr.clickable{ cursor:pointer; }

/* ========== KPI 行 ========== */
.kpi-row{
  display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:10px;
  margin-bottom:12px;
}
.kpi-card{
  background: var(--card-bg);
  border:1px solid var(--border-soft); border-radius:8px;
  padding:10px 12px; min-height:78px; position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
}
.kpi-card .k-title{ font-size:11px; color:var(--text-mute); margin-bottom:4px; }
.kpi-card .k-value{ font-size:22px; font-weight:700; color:var(--text-main); line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi-card .k-value .k-unit{ font-size:11px; color:var(--text-mute); margin-left:4px; font-weight:400; }
.kpi-card .k-foot{ font-size:10px; color:var(--text-mute); margin-top:2px; }
.kpi-card .k-foot.warn{ color:var(--orange); }
.kpi-card .k-foot.red{ color:var(--high); }
.kpi-card .k-foot.green{ color:var(--ok); }
.kpi-card .k-mouth{
  position:absolute; right:8px; top:6px; font-size:9px;
  color:var(--text-faint); letter-spacing:.5px;
}
.kpi-card.high{ border-color:rgba(255,61,79,.45); }
.kpi-card.warn{ border-color:rgba(255,138,61,.40); }
.kpi-card.cyan{ border-color:rgba(62,218,244,.40); }
.kpi-card.gold{ border-color:rgba(246,199,97,.40); }

/* ========== Toast ========== */
.toast-stack{
  position:fixed; right:24px; bottom:24px; z-index:11000;
  display:flex; flex-direction:column; gap:8px;
}
.toast{
  min-width:240px; max-width:380px;
  padding:10px 14px; border-radius:6px;
  background: var(--toast-bg);
  border:1px solid var(--border); color:var(--text-main);
  box-shadow: var(--shadow-soft);
  font-size:12.5px; line-height:1.6;
  animation:toastIn .25s ease-out;
}
.toast.success{ border-left:3px solid var(--ok); }
.toast.info{ border-left:3px solid var(--tech-cyan); }
.toast.warn{ border-left:3px solid var(--orange); }
.toast.error{ border-left:3px solid var(--high); }
.toast .t-title{ font-weight:600; color:var(--text-main); margin-bottom:2px; }
.toast .t-body{ color:var(--text-soft); }
@keyframes toastIn{ from{transform:translateX(40px); opacity:0;} to{transform:translateX(0); opacity:1;} }

/* ========== Modal ========== */
.modal-mask{
  position:fixed; inset:0; background:rgba(4,8,18,.6); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:10500;
}
:root[data-theme="light"] .modal-mask{ background:rgba(20,40,80,.30); }
.modal-mask.show{ display:flex; }
.modal-box{
  width:520px; max-width:92vw;
  /* 第十二轮 P1-3：弹窗最大高度 86vh，内部滚动 + 底部按钮固定 */
  max-height:86vh;
  background: var(--modal-bg);
  border:1px solid var(--border); border-radius:10px;
  box-shadow: var(--shadow-soft);
  display:flex; flex-direction:column;
}
.modal-box.lg{ width:760px; }
.modal-box.xl{ width:900px; }
.modal-head{
  padding:12px 18px; border-bottom:1px solid var(--border-soft);
  font-size:14px; font-weight:600; color:var(--text-main);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.modal-body{
  padding:18px; overflow:auto; flex:1 1 auto;
  font-size:13px; color:var(--text-main); line-height:1.75;
  min-height:0;
}
.modal-foot{
  padding:10px 18px; border-top:1px solid var(--border-soft);
  display:flex; justify-content:flex-end; gap:8px;
  flex-shrink:0;
  background: var(--modal-bg);
}

/* ========== 弹窗内表单（通用类，避免内联样式硬编码颜色） ========== */
.modal-form-input,
.modal-form-textarea,
.modal-form-select{
  width:100%;
  background: var(--form-bg);
  border:1px solid var(--form-border);
  color: var(--text-main);
  border-radius:5px;
  padding:8px;
  outline:none;
  font-size:12.5px;
  font-family:inherit;
}
.modal-form-textarea{ min-height:80px; resize:vertical; }
.modal-form-input:focus,
.modal-form-textarea:focus,
.modal-form-select:focus{
  border-color: var(--form-focus);
  box-shadow: 0 0 0 2px rgba(43,108,255,.16);
}
:root[data-theme="light"] .modal-form-input:focus,
:root[data-theme="light"] .modal-form-textarea:focus,
:root[data-theme="light"] .modal-form-select:focus{
  box-shadow: 0 0 0 2px rgba(36,87,214,.18);
}
.modal-hint{ font-size:12.5px; color:var(--text-soft); line-height:1.8; }

/* ========== 表单组件 ==========
   第二十九轮 P0-1：拆 field-name / src-tag / 输入框三段，标签列扩到 168px，
   避免"上报单位 / 县级核定受灾(亩) / 初报受灾面积(亩)"等字段被压换行 */
.form-row{
  display:grid;
  grid-template-columns: minmax(148px, 168px) 1fr;
  gap:10px;
  margin-bottom:10px;
  align-items:center;
}
.form-row.col{ grid-template-columns:1fr; }
.form-row label{
  color:var(--form-label); font-size:12px;
  display:flex; align-items:center; gap:5px;
}
.form-row label.field-label{
  min-width:0;
  white-space:nowrap;
}
.form-row .field-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.form-row label .req{ color:var(--form-required); font-weight:700; }
/* 来源标签：第二十九轮 P0-1 移出 label，独立放在 .field-control 内 */
.form-row .field-control{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
  min-width:0;
}
.form-row.col .field-control{
  grid-template-columns:1fr;
  gap:6px;
}
.form-row .src-tag{
  display:inline-block; flex-shrink:0;
  font-size:10px; padding:2px 8px; border-radius:10px;
  letter-spacing:.5px;
  white-space:nowrap;
  line-height:1.4;
}
.form-row .src-tag.auto{ background:rgba(36,87,214,.14); color:var(--gov-blue); }
.form-row .src-tag.must{ background:rgba(217,59,79,.14); color:var(--high); }
.form-row .src-tag.edit{ background:rgba(31,166,216,.14); color:var(--tech-cyan); }
.form-row .src-tag.ro  { background:rgba(125,143,164,.18); color:var(--text-mute); }
/* 兼容：旧 modal 表单可能仍把 src-tag 放在 label 内 */
.form-row label .src-tag{
  display:inline-block; font-size:9.5px; padding:1px 6px; border-radius:8px;
  letter-spacing:.5px; margin-left:5px;
}
.form-row label .src-tag.auto{ background:rgba(36,87,214,.14); color:var(--gov-blue); }
.form-row label .src-tag.must{ background:rgba(217,59,79,.14); color:var(--high); }
.form-row label .src-tag.edit{ background:rgba(31,166,216,.14); color:var(--tech-cyan); }
.form-row label .src-tag.ro  { background:rgba(125,143,164,.18); color:var(--text-mute); }
.form-row input, .form-row textarea, .form-row select{
  background: var(--form-bg); border:1px solid var(--form-border); border-radius:5px;
  padding:6px 10px; color:var(--text-main); font-size:12.5px; width:100%;
}
.form-row textarea{ min-height:64px; resize:vertical; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  border-color:var(--form-focus); outline:none;
}
.form-row input[readonly], .form-row textarea[readonly], .form-row input.readonly{
  background:transparent; border-color:transparent; padding-left:0; color:var(--text-soft);
}

/* ========== 空态 ========== */
.empty{
  padding:32px 16px; text-align:center;
  color:var(--text-mute); font-size:12.5px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.empty .icon{ font-size:36px; opacity:.5; }
.empty .em-title{ color:var(--text-soft); font-size:14px; }
.empty .em-sub{ color:var(--text-faint); font-size:12px; max-width:360px; line-height:1.7; }

/* ========== 分隔线 ========== */
.hr-soft{ height:1px; background:var(--border-soft); margin:10px 0; }

.scroll-y{ overflow-y:auto; }

/* ========== 数据口径徽章 ========== */
.caliber-badge{
  display:inline-block; font-size:10px; padding:1px 8px;
  border-radius:8px; margin-left:6px; vertical-align:middle;
  letter-spacing:.5px;
}
.caliber-badge.prediction{ background:rgba(169,116,255,.14); color:var(--ai-purple); border:1px solid rgba(169,116,255,.32); }
.caliber-badge.object{ background:rgba(62,218,244,.12); color:var(--tech-cyan); border:1px solid rgba(62,218,244,.28); }
.caliber-badge.verified{ background:rgba(55,201,138,.12); color:var(--ok); border:1px solid rgba(55,201,138,.28); }
:root[data-theme="light"] .caliber-badge.object{ color:#0e9fc0; }
:root[data-theme="light"] .caliber-badge.prediction{ color:var(--ai-purple); }
:root[data-theme="light"] .caliber-badge.verified{ color:#1fa968; }

/* ========== 附件上传卡（材料填报工作台） ========== */
.upload-zone{
  margin-top:10px; padding:14px;
  background: var(--upload-bg);
  border: var(--upload-border);
  border-radius:6px;
}
.upload-zone .uz-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; font-size:12.5px; color:var(--text-soft);
}
.upload-zone .uz-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.upload-zone .uz-list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:8px;
}
.upload-zone .att-card{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; background:var(--card-bg);
  border:1px solid var(--border-soft); border-radius:5px;
  font-size:11.5px;
}
.upload-zone .att-card .att-icon{
  width:30px; height:30px; border-radius:5px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2457d6,#4b82f1); color:#fff; font-size:13px;
}
.upload-zone .att-card .att-body{ flex:1; min-width:0; }
.upload-zone .att-card .att-name{
  color:var(--text-main); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.upload-zone .att-card .att-meta{ color:var(--text-mute); font-size:10.5px; }
.upload-zone .att-card .att-del{
  cursor:pointer; color:var(--text-mute); padding:3px 6px; font-size:12px;
}
.upload-zone .att-card .att-del:hover{ color:var(--high); }

/* 提交前检查面板 */
.check-list{ display:flex; flex-direction:column; gap:5px; }
.check-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:7px 10px; border-radius:5px; font-size:12px;
  background: var(--card-bg); border:1px solid var(--border-soft);
}
.check-item.ok{ border-left:3px solid var(--ok); }
.check-item.err{ border-left:3px solid var(--high); }
.check-item.warn{ border-left:3px solid var(--orange); }
.check-item .ci-icon{ font-size:14px; flex-shrink:0; }
.check-item.ok .ci-icon{ color:var(--ok); }
.check-item.err .ci-icon{ color:var(--high); }
.check-item.warn .ci-icon{ color:var(--orange); }
.check-item .ci-body{ flex:1; color:var(--text-main); }
.check-item .ci-body .ci-sub{ color:var(--text-mute); font-size:11px; margin-top:2px; }

/* 工作台概览条 */
.lwb-stat-row{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px;
  margin-bottom:12px;
}
.lwb-stat{
  padding:10px 12px; border:1px solid var(--border-soft); border-radius:8px;
  background: var(--card-bg);
  display:flex; flex-direction:column;
}
.lwb-stat .ls-k{ font-size:11px; color:var(--text-mute); }
.lwb-stat .ls-v{ font-size:18px; font-weight:700; color:var(--text-main); margin-top:2px; }
.lwb-stat.warn{ border-color:rgba(255,138,61,.40); }
.lwb-stat.high{ border-color:rgba(255,61,79,.40); }
.lwb-stat.ok{ border-color:rgba(55,201,138,.40); }

/* ========== 第九轮：通用语义文本色 / Modal 信息块 / 间距工具 ========== */
.text-high{ color: var(--high); }
.text-orange{ color: var(--orange); }
.text-ok{ color: var(--ok); }
.text-cyan{ color: var(--tech-cyan); }
.text-mute{ color: var(--text-mute); }
.text-purple{ color: var(--ai-purple); }

.modal-info-block{
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-main);
}
.modal-info-block > div{ margin-bottom: 2px; }
.modal-info-block .next-step-line{
  margin-top: 8px;
  color: var(--text-mute);
  border-top: 1px dashed var(--border-soft);
  padding-top: 6px;
}

.mt-4{ margin-top: 4px; }
.mt-6{ margin-top: 6px; }
.mt-8{ margin-top: 8px; }
.mt-10{ margin-top: 10px; }