/* 朴素但精致：圆角、柔和阴影、卡片层次 */
.card { border-radius: 1rem; }
.accordion-item { border-radius: 1rem; }
.accordion-button { padding: 1rem 1.25rem; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.table { border-radius: .75rem; }
.sticky-bottom { position: sticky; bottom: 0; z-index: 10; border-radius: 1rem; }

/* 微交互：更接近“工资单系统”的细节 */
.card, .accordion-item{ transition: transform .12s ease, box-shadow .2s ease; }
@media (hover:hover){
  .card:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.08) !important; }
}
.btn{ transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.btn:active{ transform: translateY(1px); }
@media (hover:hover){
  .btn:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.10); }
}

/* ===========================
   ✅ 关键修复：微信端不溢出 + 自适应居中
   =========================== */

/* 1) 顶部两枚徽章（一码一次 / 不采集投票者信息）：允许换行、居中、不撑破卡片
   注意：模板已加 class="hero-badges"，这里用更精准的选择器，避免误伤其它 d-flex */
.hero-badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem !important;
  max-width: 100%;
}
.hero-badges .badge{
  max-width: 100%;
  white-space: normal;  /* 允许换行，防止溢出 */
  text-align: center;
  line-height: 1.15;
  padding: .55rem .85rem;
}


/* 3) 底部提交条：整体对齐更稳（避免微信 flex 收缩异常） */
.vote-page .card-body *{ min-width: 0; }

/* 移动端提交条：避免提示语被按钮挤成“竖排字” */
.submit-bar{ align-items: center !important; }
.submit-bar .submit-hint{ flex: 1 1 auto; min-width: 0; }
.submit-bar .submit-actions{ flex: 0 0 auto; }

/* 按钮区：手机端等宽两列，允许收缩，居中且不溢出 */
.submit-actions{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* ✅允许收缩，避免撑破 */
  gap: .75rem;
  width: 100%;
  justify-content: center;
}
.submit-actions .btn{
  width: 100%;
  min-width: 0;
  justify-content: center;
  white-space: nowrap; /* “弃权/提交测评”不换行更美观 */
}
@media (min-width: 576px){
  .w-sm-auto{ width: auto !important; }
  .submit-actions{ display:flex; gap:.75rem; width:auto; justify-content:center; }
  .submit-actions .btn{ width:auto; }
}

/* 投票页底部粘性工具栏（模仿工资单系统的“粘性工具条”） */
.vote-page{ padding-bottom: 24px; }
.vote-toolbar{
  padding: .85rem 1rem;
  background: rgba(var(--bs-body-bg-rgb), .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  border-radius: 1rem;
}
/* 留一点呼吸感，不顶到屏幕边缘 */
.vote-toolbar.sticky-bottom{ bottom: 12px; }
@media (max-width: 576px){
  .vote-toolbar.sticky-bottom{ bottom: 10px; }
}
[data-bs-theme="dark"] .vote-toolbar{
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}

/* iPhone 安全区 */
.vote-toolbar{ padding-bottom: calc(.85rem + env(safe-area-inset-bottom)); }

.btn-outline-primary { --bs-btn-border-color: rgba(13,110,253,.35); }

/* 柔和的“弃权”按钮：警示但不刺眼 */
.btn-soft-warning{
  --bs-btn-color: #6c4a00;
  --bs-btn-bg: rgba(255,193,7,.16);
  --bs-btn-border-color: rgba(255,193,7,.30);
  --bs-btn-hover-color: #523700;
  --bs-btn-hover-bg: rgba(255,193,7,.22);
  --bs-btn-hover-border-color: rgba(255,193,7,.40);
  --bs-btn-active-bg: rgba(255,193,7,.28);
  --bs-btn-active-border-color: rgba(255,193,7,.45);
}
[data-bs-theme="dark"] .btn-soft-warning{
  --bs-btn-color: #ffd27a;
  --bs-btn-bg: rgba(255,193,7,.16);
  --bs-btn-border-color: rgba(255,193,7,.28);
  --bs-btn-hover-bg: rgba(255,193,7,.22);
  --bs-btn-hover-border-color: rgba(255,193,7,.38);
}

.stat-card { min-height: 110px; }

/* Dark tweaks */
[data-bs-theme="dark"] .bg-body-tertiary { background-color: #0f1115 !important; }

/* 更“大气”的间距与层次 */
.hero{
  background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(32,201,151,.08));
  border: 1px solid rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .hero{
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(13,110,253,.18), rgba(32,201,151,.10));
}

.opt-btn{ font-size: .95rem; }
@media (min-width: 992px){
  .opt-btn{ font-size: 1rem; }
}

.accordion-button{ border-radius: 1rem; }
.accordion-item{ background: transparent; }
.accordion-body{ padding: 1.25rem; }

.cadre-done{
  background: rgba(25,135,84,.10) !important;
}
.badge-done{
  background: rgba(25,135,84,.10) !important;
  border-color: rgba(25,135,84,.25) !important;
}

.q-row.flash-focus{
  outline: 2px solid rgba(13,110,253,.25);
  border-radius: .75rem;
}

.progress{ border-radius: 999px; overflow:hidden; }
.progress-bar{ border-radius: 999px; }

/* Quick nav sticky offset under navbar */
.quicknav-wrap{ top: 72px; z-index: 20; }
@media (max-width: 576px){
  .quicknav-wrap{ top: 64px; }
}
#cadreQuickNav::-webkit-scrollbar{ height: 6px; }
#cadreQuickNav::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }
[data-bs-theme="dark"] #cadreQuickNav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); }

/* Nav button states */
.cadre-jump.cj-done{
  border-color: rgba(25,135,84,.25) !important;
  background: rgba(25,135,84,.10) !important;
  color: inherit;
}
.cadre-jump.cj-active{
  border-color: rgba(13,110,253,.35) !important;
  background: rgba(13,110,253,.08) !important;
}

/* Missing / attention animation */
.q-row.need-attn{
  outline: 2px solid rgba(255,193,7,.45);
  border-radius: .75rem;
  background: rgba(255,193,7,.10);
  animation: pulseGlow 1s ease-in-out 2;
}
@keyframes pulseGlow{
  0%{ transform: translateY(0); box-shadow: 0 0 0 rgba(255,193,7,0); }
  50%{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,193,7,.15); }
  100%{ transform: translateY(0); box-shadow: 0 0 0 rgba(255,193,7,0); }
}

/* 徽章（总体/分项）在微信浏览器里也要清晰可见：显式设置文字与背景 */
.badge-kind{
  border: 1px solid transparent;
  padding: .35rem .6rem;
  border-radius: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.badge-overall{
  color: #0b5ed7;              /* primary */
  background: rgba(13,110,253,.12);
  border-color: rgba(13,110,253,.25);
}
.badge-sub{
  color: #495057;              /* gray-700 */
  background: rgba(108,117,125,.12);
  border-color: rgba(108,117,125,.25);
}
[data-bs-theme="dark"] .badge-overall{
  color: #9ec5fe;
  background: rgba(13,110,253,.20);
  border-color: rgba(13,110,253,.35);
}
[data-bs-theme="dark"] .badge-sub{
  color: #dee2e6;
  background: rgba(108,117,125,.18);
  border-color: rgba(108,117,125,.35);
}

/* Submit button nudge when all cadres completed */
#submitBtn.submit-nudge{
  outline: 2px solid rgba(25,135,84,.45);
  box-shadow: 0 10px 24px rgba(25,135,84,.16);
  transform: translateY(-1px);
  animation: submitPulse 1.2s ease-in-out 1;
}
@keyframes submitPulse{
  0%{ outline-color: rgba(25,135,84,.15); box-shadow: 0 0 0 rgba(25,135,84,0); transform: translateY(0); }
  50%{ outline-color: rgba(25,135,84,.55); box-shadow: 0 12px 26px rgba(25,135,84,.18); transform: translateY(-2px); }
  100%{ outline-color: rgba(25,135,84,.25); box-shadow: 0 0 0 rgba(25,135,84,0); transform: translateY(0); }
}


/* ===========================
   ✅ 题目头部：第一行“姓名分项测评-德/能/勤/绩/廉”，第二行标题
   不用省略号，必要时自动换行
   =========================== */
.q-head{ display:block; }
.q-head .q-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.q-head .q-title{ margin-top:.25rem; }

.q-row .badge-kind{
  white-space: normal;          /* ✅允许换行 */
  overflow-wrap: anywhere;      /* ✅超长也能断行（微信端更稳） */
  word-break: break-word;
  line-height: 1.15;
  max-width: 100%;
}


/* 提交卡片内：完成进度条（常驻显示，更直观） */
.submit-progress{ flex: 1 1 100%; }
.progress.progress-thin{ height: 10px; border-radius: 999px; overflow: hidden; }
.progress.progress-thin .progress-bar{ border-radius: 999px; }
@media (min-width: 576px){
  .submit-progress{ max-width: 360px; }
}