/* K02b 投票页接线样式。仅以 .fbh-vote 为根追加，不改 hub.css 既有规则；
 * 候选多选区内部结构由 vote-ui-view.js 生成（.vui-*），其基础外观由本文件补充，
 * 不修改 vote-ui-view.js 与 hub.css（文件边界冻结）。 */

.fbh-vote [hidden] { display: none !important; }

/* 状态提示条：loading / error / construction / info 由 data 属性区分配色 */
.fbh-vote .fbh-vote-notice[data-fbh-vote-notice-kind="error"] { border-color: #E4B6B6; background: #FDF1F1; }
.fbh-vote .fbh-vote-notice[data-fbh-vote-notice-kind="error"] .fbh-status { background: #B34A4A; }
.fbh-vote .fbh-vote-notice[data-fbh-vote-notice-kind="construction"] { border-color: #E8CDA0; background: #FFF6E4; }
.fbh-vote .fbh-vote-notice[data-fbh-vote-notice-kind="info"] { border-color: #BBD4BD; background: #F2F9F2; }
.fbh-vote .fbh-vote-notice[data-fbh-vote-notice-kind="info"] .fbh-status { background: #3E7C46; }
.fbh-vote .fbh-vote-notice[data-fbh-vote-notice-kind="loading"] .fbh-status { background: #5B7BB4; }
.fbh-vote .fbh-vote-retry { margin-left: 10px; padding: 2px 12px; border: 1px solid #C9A24A; border-radius: 999px; background: #FFF; color: #6E5520; font-size: 13px; cursor: pointer; }
.fbh-vote .fbh-vote-retry:hover { background: #FFF3D6; }

/* 状态卡：本期月份与已投内容 */
.fbh-vote [data-fbh-vote-period] { margin: 0 0 10px; font-weight: 600; color: #244B63; }
.fbh-vote [data-fbh-vote-voted] h3 { margin: 0 0 6px; font-size: 15px; color: #1D3154; }
.fbh-vote .fbh-vote-voted-list { margin: 8px 0 0; padding: 12px 12px 12px 30px; border: 1px solid #D5DEEB; border-radius: 12px; background: #FAFCFE; color: #2E3F5F; font-size: 14px; line-height: 1.9; }
.fbh-vote .fbh-vote-countdown { margin-top: 12px; padding: 12px 14px; border: 1px solid #D5DEEB; border-radius: 12px; background: #FAFCFE; color: #2E3F5F; font-size: 15px; }
.fbh-vote .fbh-vote-countdown-label { display: inline-block; margin-right: 8px; color: #62718B; font-size: 13px; }

/* K04 人气榜（GET ranking；服务端序渲染，前端不重排） */
.fbh-vote .fbh-vote-ranking { list-style: none; margin: 4px 0 0; padding: 0; }
.fbh-vote .fbh-vote-ranking-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #E4EAF2; }
.fbh-vote .fbh-vote-ranking-item:last-child { border-bottom: 0; }
.fbh-vote .fbh-vote-ranking-rank { flex: 0 0 26px; text-align: center; padding: 1px 0; border-radius: 8px; background: #E9F0FA; color: #3D5C8F; font-size: 13px; font-weight: 700; }
.fbh-vote .fbh-vote-ranking-item:first-child .fbh-vote-ranking-rank { background: #F5E7C6; color: #7A5C14; }
.fbh-vote .fbh-vote-ranking-name { flex: 1 1 auto; min-width: 0; word-break: break-word; color: #1D3154; font-size: 14px; line-height: 1.6; }
.fbh-vote .fbh-vote-ranking-cat { flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 10px; border-radius: 999px; background: #E9F0FA; color: #3D5C8F; font-size: 12px; }
.fbh-vote .fbh-vote-ranking-votes { flex: 0 0 auto; color: #244B63; font-size: 13px; font-weight: 600; white-space: nowrap; }
.fbh-vote [data-fbh-vote-ranking-total] { margin: 10px 0 0; font-size: 13px; }

/* 选择区：组件挂载容器与提交动作 */
.fbh-vote .fbh-vote-picker { margin: 4px 0 6px; }
.fbh-vote .fbh-vote-actions { margin-top: 14px; }
.fbh-vote .fbh-vote-actions [data-fbh-vote-submit-note] { margin: 0; flex: 1 1 240px; font-size: 13px; }

/* K03 组件外观（.vui-*）：与页面卡片风格一致 */
.fbh-vote .vui { border: 1px solid #D5DEEB; border-radius: 12px; background: #FAFCFE; padding: 16px; }
.fbh-vote .vui-status { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #F1F4F9; color: #465873; font-size: 14px; }
.fbh-vote .vui-status[data-vui-mode="error"] { background: #FDF1F1; color: #8A3B3B; }
.fbh-vote .vui-status[data-vui-mode="disabled"] { background: #F1F4F9; color: #465873; }
.fbh-vote .vui-status[data-vui-mode="loading"] { background: #F1F4F9; color: #465873; }
.fbh-vote .vui-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; margin-bottom: 10px; }
.fbh-vote .vui-filter { display: block; min-width: 0; }
.fbh-vote .vui-filter-name { display: block; font-weight: 600; color: #2E3F5F; font-size: 14px; margin-bottom: 4px; }
.fbh-vote .vui-search, .fbh-vote .vui-category { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #C9D4E4; border-radius: 8px; background: #FFF; color: #1D3154; font-size: 14px; }
.fbh-vote .vui-search:disabled, .fbh-vote .vui-category:disabled { background: #F1F3F7; color: #8A97AC; }
.fbh-vote .vui-candidates { list-style: none; margin: 0 0 10px; padding: 0; max-height: 420px; overflow-y: auto; }
.fbh-vote .vui-candidate { border-bottom: 1px solid #E4EAF2; }
.fbh-vote .vui-candidate:last-child { border-bottom: 0; }
.fbh-vote .vui-candidate-label { display: flex; align-items: baseline; gap: 8px; padding: 9px 4px; cursor: pointer; }
.fbh-vote .vui-check { flex: 0 0 auto; margin: 0; }
.fbh-vote .vui-check:disabled + .vui-candidate-name { color: #8A97AC; }
.fbh-vote .vui-candidate-name { flex: 1 1 auto; min-width: 0; word-break: break-word; color: #1D3154; font-size: 14px; line-height: 1.6; }
.fbh-vote .vui-candidate-category { flex: 0 0 auto; padding: 1px 10px; border-radius: 999px; background: #E9F0FA; color: #3D5C8F; font-size: 12px; }
.fbh-vote .vui-empty { padding: 14px 4px; color: #62718B; font-size: 14px; }
.fbh-vote .vui-count { margin: 0 0 4px; color: #244B63; font-size: 14px; font-weight: 600; }
.fbh-vote .vui-summary { border-top: 1px solid #E4EAF2; padding-top: 10px; }
.fbh-vote .vui-summary-heading { margin: 0 0 6px; font-size: 14px; color: #1D3154; }
.fbh-vote .vui-summary-empty { margin: 0; color: #8A97AC; font-size: 13px; }
.fbh-vote .vui-selected { list-style: none; margin: 0; padding: 0; }
.fbh-vote .vui-selected-item { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; color: #2E3F5F; font-size: 14px; }
.fbh-vote .vui-selected-name { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.fbh-vote .vui-remove { flex: 0 0 auto; padding: 2px 10px; border: 1px solid #C9D4E4; border-radius: 999px; background: #FFF; color: #465873; font-size: 12px; cursor: pointer; }
.fbh-vote .vui-remove:hover { background: #EEF3FA; }
.fbh-vote .vui-remove:disabled { color: #B7C1D1; cursor: default; }
.fbh-vote .vui-time { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E4EAF2; color: #62718B; font-size: 13px; }
.fbh-vote .vui-time-label { margin-right: 8px; }
.fbh-vote .vui-time-value { color: #244B63; font-weight: 600; }

/* 游客/管理员提示卡 */
.fbh-vote .fbh-vote-guest, .fbh-vote .fbh-vote-admin { padding: 26px; border-radius: 18px; box-shadow: 0 4px 18px rgba(29,49,84,.03); }
.fbh-vote .fbh-vote-guest .fb-btn, .fbh-vote .fbh-vote-admin .fb-btn { text-decoration: none; }

@media (max-width: 720px) {
    .fbh-vote .vui-filters { grid-template-columns: minmax(0, 1fr); }
    .fbh-vote .vui-candidates { max-height: 340px; }
}