/**
 * 帖子投票插件样式
 *
 * ⚠️ 只用 9 套主题**全共有**的 --mn-* 变量（本文件用到的 20 个已脚本核对，9/9 命中）。
 *    禁用 --mn-danger / --mn-spectrum-*（非全主题存在 → 夜间「浅底浅字」）。
 * ⚠️ 核心 .mn-btn / .mn-input 同为 (0,1,0) 且**核心后胜** → 插件内改宽/改布局必须提权
 *    （本文件统一用 .pp-* 双类选择器 / .pp-card .mn-btn 提权）。
 * ⚠️ 进度条宽度**禁止内联 style**（零内联红线 §7.3）→ 走 data-pct 属性 + CSS 自定义属性：
 *      宽度 = calc(var(--pp-pct) * 1%)，由属性选择器逐值映射（见下方 [data-pct] 规则）。
 *
 * @file plugins/post_poll/assets/style.css
 * @package Plugin\PostPoll
 * @version 1.0.0
 */

/* ========================================================================
   一、帖子详情页：投票卡片
   ======================================================================== */

.pp-card {
    margin: 12px 0;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-card);
    overflow: hidden;
}

.pp-card-inner {
    padding: 0;
}

.pp-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mn-text);
    background: var(--mn-bg-row-hover);
    border-bottom: 1px solid var(--mn-border-light);
}

.pp-card-tag {
    margin-left: auto;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 400;
    color: var(--mn-text-muted);
    background: var(--mn-bg-tag);
    border-radius: 10px;
}

.pp-card-question {
    padding: 14px 16px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mn-text);
    word-break: break-word;
}

.pp-card-sub {
    padding: 4px 16px 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mn-text-muted);
}

/*
 * 分隔符「·」由 ::before 生成 —— 窄屏换行后行首不会残留孤立的点。
 * ⚠️ 不要改回 PHP 里硬编码 <span>·</span>：那样换行时行首会多一个点。
 * （与 reply_reward 同一套做法，保持一致）
 */
.pp-card-sub .pp-dot {
    display: none;
}

.pp-card-question + .pp-card-sub + .pp-card-body {
    margin-top: 10px;
}

.pp-hidden-hint {
    color: var(--mn-warning);
}

/* ===== 选项列表 ===== */

.pp-card-body {
    padding: 4px 16px 14px;
}

.pp-options-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-top: 6px;
    font-size: 14px;
    color: var(--mn-text);
    border: 1px solid var(--mn-border-light);
    border-radius: 6px;
    overflow: hidden;
}

.pp-option-clickable {
    cursor: pointer;
}

.pp-option-clickable:hover {
    border-color: var(--mn-primary-light);
    background: var(--mn-bg-row-hover);
}

.pp-option-picked {
    border-color: var(--mn-primary);
    background: var(--mn-primary-subtle);
}

.pp-option-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.pp-option-pick input {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.pp-option-text {
    position: relative;
    z-index: 1;
    min-width: 0;
    word-break: break-word;
}

.pp-option-stat {
    position: relative;
    z-index: 1;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--mn-text-muted);
    font-variant-numeric: tabular-nums;
}

.pp-option-count {
    font-weight: 600;
    color: var(--mn-text);
}

.pp-option-pct {
    margin-left: 6px;
}

/*
 * 结果条：绝对定位铺在选项行底部（不影响行高，视觉上像「填充背景」）。
 * ⚠️ 宽度**没有内联 style**（零内联红线 §7.3）→ 走 data-pct 属性，
 *    由文件末尾的 [data-pct="N"] 规则逐值映射到具体宽度。
 * ⚠️ 不要试图用 `width: attr(data-pct)` 或 `calc(attr(...) * 1%)` —— 
 *    attr() 在 width 上不被现代浏览器支持（只在 content 可用），写了等于宽度恒 0（静默无进度条）。
 */
.pp-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--mn-primary);
    opacity: 0.55;
    transition: width 0.3s ease;
}

/* ===== 卡片底部 ===== */

.pp-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 13px;
}

.pp-total {
    color: var(--mn-text-muted);
}

.pp-status {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
}

.pp-status-ok {
    color: var(--mn-success);
}

.pp-status-off {
    color: var(--mn-text-muted);
}

/* 提权：压过核心 .mn-btn（同 (0,1,0)，核心后胜） */
.pp-card .pp-login,
.pp-card .mn-btn {
    margin-left: auto;
    flex-shrink: 0;
}

.pp-card-error,
.pp-form-error {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mn-error);
}

/* ========================================================================
   二、发帖表单：添加投票折叠区
   ======================================================================== */

.pp-form-details {
    margin: 16px 0 0;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-card);
}

.pp-form-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mn-text);
    cursor: pointer;
    list-style: none;
}

.pp-form-summary::-webkit-details-marker {
    display: none;
}

.pp-form-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--mn-text-muted);
}

.pp-form-body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--mn-border-light);
}

.pp-form-field {
    margin-top: 12px;
}

.pp-form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* 提权：核心 .mn-input{width:100%} 会静默压掉插件尺寸控制 */
.pp-form-body .pp-field {
    width: 100%;
    box-sizing: border-box;
}

.pp-form-body .pp-field-num {
    width: 72px;
}

.pp-form-body .pp-field-sel {
    width: auto;
    min-width: 120px;
}

/* ===== 选项行 ===== */

.pp-options {
    margin-top: 6px;
}

.pp-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.pp-option-idx {
    flex-shrink: 0;
    width: 20px;
    font-size: 12px;
    text-align: center;
    color: var(--mn-text-muted);
}

.pp-option-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* 提权 + 禁用态（核心 .mn-btn 未定义 :disabled 视觉） */
.pp-form-body .pp-add-opt,
.pp-form-body .pp-del-opt {
    width: auto;
}

.pp-form-body .mn-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== 单选/多选 ===== */

.pp-type-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    font-size: 14px;
}

.pp-radio,
.pp-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--mn-text);
}

.pp-radio input,
.pp-check input {
    margin: 0;
    cursor: pointer;
}

.pp-max-choices {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mn-text-muted);
}

.pp-form-tip {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mn-text-muted);
}

/* ========================================================================
   三、后台
   ======================================================================== */

.pp-table-wrap {
    overflow-x: auto;
}

/* ---- 列宽与「不挤成两行」 ----
   ⚠️ 核心 .admin-table 内置了 td:nth-child(4){max-width:180px;white-space:nowrap} 等
      **按列序硬编码**的规则（admin.css:180-187），其具体度 = (0,3,1)。
      插件 CSS 虽在 admin.css 之后加载，但**同具体度才靠源序取胜** → 低具体度必被压。
      → 统一用 `.pp-table td.pp-col-x`（(0,2,1)）不够，第 4 列必须≥(0,3,1)：
        这里用 `.pp-table.pp-table td.pp-col-x`（双类，(0,3,1)）与核心平权，再靠源序取胜。
      ⚠️ modern.css / 主题文件**不碰 admin-table**（已核 9/9），故只需对付 admin.css。
   ⚠️ 长文本列一律「单行 + 省略号」：完整内容放 title 属性（可悬停查看）。
      不用 word-break 换行 —— 那正是「挤成两行」的来源。
   ⚠️ min-width 100% 保证列宽总和不足时仍铺满；超宽时由 .pp-table-wrap 横向滚动。 */
.pp-table {
    min-width: 100%;
}

.pp-table.pp-table th,
.pp-table.pp-table td {
    white-space: nowrap;
    vertical-align: middle;
}

/* 解除核心 td:nth-child(4) 的 180px 限宽（它是给核心自己的列序设计的，与本表不对齐） */
.pp-table.pp-table td:nth-child(4) {
    max-width: none;
    overflow: visible;
}

/* 长文本列：单行截断（三件套显式声明 —— 别依赖核心 td:nth-child(4) 那条巧合同效的规则） */
.pp-table.pp-table th.pp-col-question,
.pp-table.pp-table td.pp-col-question,
.pp-table.pp-table th.pp-col-thread,
.pp-table.pp-table td.pp-col-thread,
.pp-table.pp-table th.pp-col-creator,
.pp-table.pp-table td.pp-col-creator {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-table .pp-ellipsis {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-table.pp-table th.pp-col-question,
.pp-table.pp-table td.pp-col-question {
    min-width: 200px;
    max-width: 340px;
}

.pp-table.pp-table th.pp-col-thread,
.pp-table.pp-table td.pp-col-thread {
    min-width: 140px;
    max-width: 240px;
}

.pp-table.pp-table th.pp-col-creator,
.pp-table.pp-table td.pp-col-creator {
    min-width: 90px;
    max-width: 160px;
}

/* 窄列：定宽后不再参与拉伸 */
.pp-table.pp-table th.pp-col-id,
.pp-table.pp-table td.pp-col-id {
    width: 56px;
}

.pp-table.pp-table th.pp-col-num,
.pp-table.pp-table td.pp-col-num {
    width: 68px;
    text-align: center;
}

.pp-table.pp-table th.pp-col-status,
.pp-table.pp-table td.pp-col-status {
    width: 88px;
}

.pp-table.pp-table th.pp-col-time,
.pp-table.pp-table td.pp-col-time {
    width: 148px;
}

.pp-table.pp-table th.pp-col-action,
.pp-table.pp-table td.pp-col-action {
    width: 96px;
    text-align: right;
}

.pp-status-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pp-status-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 12px;
    border-radius: 10px;
    color: var(--mn-text-muted);
    background: var(--mn-bg-tag);
    white-space: nowrap;
}

.pp-status-badge-active {
    color: var(--mn-success);
    background: var(--mn-alert-success-bg);
}

.pp-status-badge-ended,
.pp-status-badge-expired,
.pp-status-badge-closed {
    color: var(--mn-warning);
    background: var(--mn-comp-alert-warning-bg);
}

.pp-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.pp-inline-form {
    display: inline;
}

.pp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.pp-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.pp-range-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--mn-text-muted);
}

/* ========================================================================
   四、窄屏（移动端）
   断点 768px 与核心一致（modern.css:2248 合并了原 9 处 768 查询），
   不自造 640 之类 —— 否则 640~768 区间会出现「页面已切单列、卡片仍横排」的错位。
   ======================================================================== */

@media (max-width: 768px) {
    /* 后台表格：列多且已 nowrap → 窄屏一律横向滚动，绝不靠换行挤（换行=高矮不齐） */
    .pp-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 窄屏下放松长文本列的 min-width，配合滚动；问题列仍给足可读宽度 */
    .pp-table.pp-table th.pp-col-question,
    .pp-table.pp-table td.pp-col-question {
        min-width: 160px;
    }

    .pp-table.pp-table th.pp-col-thread,
    .pp-table.pp-table td.pp-col-thread {
        min-width: 120px;
    }

    .pp-table.pp-table th.pp-col-time,
    .pp-table.pp-table td.pp-col-time {
        width: 132px;
    }

    .pp-card-question,
    .pp-card-sub,
    .pp-card-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* 「至 xx 结束」换行独占一行；其分隔符随之取消，避免行首出现孤立的「·」 */
    .pp-card-sub .pp-dot {
        display: none;
    }

    .pp-card-foot {
        flex-wrap: wrap;
    }

    .pp-option {
        align-items: flex-start;
    }

    /* 多选「最多选」独占一行，避免窄屏被挤成两行错位 */
    .pp-type-row {
        gap: 10px;
    }

    .pp-form-inline {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ========================================================================
   五、data-pct → 宽度映射（1%~100%）
   ⚠️ 没有内联 style 的代价：需要逐值枚举。
      若将来档位不够，**只加不删**（删了对应档位会宽度为 0，静默无进度条）。
   ======================================================================== */

.pp-bar[data-pct="0"]   { width: 0; }
.pp-bar[data-pct="1"]   { width: 1%; }
.pp-bar[data-pct="2"]   { width: 2%; }
.pp-bar[data-pct="3"]   { width: 3%; }
.pp-bar[data-pct="4"]   { width: 4%; }
.pp-bar[data-pct="5"]   { width: 5%; }
.pp-bar[data-pct="6"]   { width: 6%; }
.pp-bar[data-pct="7"]   { width: 7%; }
.pp-bar[data-pct="8"]   { width: 8%; }
.pp-bar[data-pct="9"]   { width: 9%; }
.pp-bar[data-pct="10"]  { width: 10%; }
.pp-bar[data-pct="11"]  { width: 11%; }
.pp-bar[data-pct="12"]  { width: 12%; }
.pp-bar[data-pct="13"]  { width: 13%; }
.pp-bar[data-pct="14"]  { width: 14%; }
.pp-bar[data-pct="15"]  { width: 15%; }
.pp-bar[data-pct="16"]  { width: 16%; }
.pp-bar[data-pct="17"]  { width: 17%; }
.pp-bar[data-pct="18"]  { width: 18%; }
.pp-bar[data-pct="19"]  { width: 19%; }
.pp-bar[data-pct="20"]  { width: 20%; }
.pp-bar[data-pct="21"]  { width: 21%; }
.pp-bar[data-pct="22"]  { width: 22%; }
.pp-bar[data-pct="23"]  { width: 23%; }
.pp-bar[data-pct="24"]  { width: 24%; }
.pp-bar[data-pct="25"]  { width: 25%; }
.pp-bar[data-pct="26"]  { width: 26%; }
.pp-bar[data-pct="27"]  { width: 27%; }
.pp-bar[data-pct="28"]  { width: 28%; }
.pp-bar[data-pct="29"]  { width: 29%; }
.pp-bar[data-pct="30"]  { width: 30%; }
.pp-bar[data-pct="31"]  { width: 31%; }
.pp-bar[data-pct="32"]  { width: 32%; }
.pp-bar[data-pct="33"]  { width: 33%; }
.pp-bar[data-pct="34"]  { width: 34%; }
.pp-bar[data-pct="35"]  { width: 35%; }
.pp-bar[data-pct="36"]  { width: 36%; }
.pp-bar[data-pct="37"]  { width: 37%; }
.pp-bar[data-pct="38"]  { width: 38%; }
.pp-bar[data-pct="39"]  { width: 39%; }
.pp-bar[data-pct="40"]  { width: 40%; }
.pp-bar[data-pct="41"]  { width: 41%; }
.pp-bar[data-pct="42"]  { width: 42%; }
.pp-bar[data-pct="43"]  { width: 43%; }
.pp-bar[data-pct="44"]  { width: 44%; }
.pp-bar[data-pct="45"]  { width: 45%; }
.pp-bar[data-pct="46"]  { width: 46%; }
.pp-bar[data-pct="47"]  { width: 47%; }
.pp-bar[data-pct="48"]  { width: 48%; }
.pp-bar[data-pct="49"]  { width: 49%; }
.pp-bar[data-pct="50"]  { width: 50%; }
.pp-bar[data-pct="51"]  { width: 51%; }
.pp-bar[data-pct="52"]  { width: 52%; }
.pp-bar[data-pct="53"]  { width: 53%; }
.pp-bar[data-pct="54"]  { width: 54%; }
.pp-bar[data-pct="55"]  { width: 55%; }
.pp-bar[data-pct="56"]  { width: 56%; }
.pp-bar[data-pct="57"]  { width: 57%; }
.pp-bar[data-pct="58"]  { width: 58%; }
.pp-bar[data-pct="59"]  { width: 59%; }
.pp-bar[data-pct="60"]  { width: 60%; }
.pp-bar[data-pct="61"]  { width: 61%; }
.pp-bar[data-pct="62"]  { width: 62%; }
.pp-bar[data-pct="63"]  { width: 63%; }
.pp-bar[data-pct="64"]  { width: 64%; }
.pp-bar[data-pct="65"]  { width: 65%; }
.pp-bar[data-pct="66"]  { width: 66%; }
.pp-bar[data-pct="67"]  { width: 67%; }
.pp-bar[data-pct="68"]  { width: 68%; }
.pp-bar[data-pct="69"]  { width: 69%; }
.pp-bar[data-pct="70"]  { width: 70%; }
.pp-bar[data-pct="71"]  { width: 71%; }
.pp-bar[data-pct="72"]  { width: 72%; }
.pp-bar[data-pct="73"]  { width: 73%; }
.pp-bar[data-pct="74"]  { width: 74%; }
.pp-bar[data-pct="75"]  { width: 75%; }
.pp-bar[data-pct="76"]  { width: 76%; }
.pp-bar[data-pct="77"]  { width: 77%; }
.pp-bar[data-pct="78"]  { width: 78%; }
.pp-bar[data-pct="79"]  { width: 79%; }
.pp-bar[data-pct="80"]  { width: 80%; }
.pp-bar[data-pct="81"]  { width: 81%; }
.pp-bar[data-pct="82"]  { width: 82%; }
.pp-bar[data-pct="83"]  { width: 83%; }
.pp-bar[data-pct="84"]  { width: 84%; }
.pp-bar[data-pct="85"]  { width: 85%; }
.pp-bar[data-pct="86"]  { width: 86%; }
.pp-bar[data-pct="87"]  { width: 87%; }
.pp-bar[data-pct="88"]  { width: 88%; }
.pp-bar[data-pct="89"]  { width: 89%; }
.pp-bar[data-pct="90"]  { width: 90%; }
.pp-bar[data-pct="91"]  { width: 91%; }
.pp-bar[data-pct="92"]  { width: 92%; }
.pp-bar[data-pct="93"]  { width: 93%; }
.pp-bar[data-pct="94"]  { width: 94%; }
.pp-bar[data-pct="95"]  { width: 95%; }
.pp-bar[data-pct="96"]  { width: 96%; }
.pp-bar[data-pct="97"]  { width: 97%; }
.pp-bar[data-pct="98"]  { width: 98%; }
.pp-bar[data-pct="99"]  { width: 99%; }
.pp-bar[data-pct="100"] { width: 100%; }