/**
 * FlintHub 道具中心插件 — 前台样式
 *
 * ⚠️ 前台**只用核心 --mn-* 主题变量**（9 套主题自动适配，含夜间）。
 *    本文件用到的每个变量都已脚本化核对「在全部 9 套主题中均被重定义」——
 *    ⚠️ 不要引入 --mn-danger / --mn-spectrum-* ：前者只在 :root 定义，后者只有
 *    modern-spectrum 一套定义，其余主题下会回落到浅色值 → 夜间「浅底浅字」。
 * ⚠️ 零内联：无 style="" / 无 onclick，布局全部收敛在此。
 * ⚠️ 外层容器用核心 .mn-section（规范 §6.4），本文件的 .pp-* 只做内部排版。
 * ⚠️ .pp-grid 在本文件（商品网格）与 admin.css（表单网格）同名但不同义 ——
 *    两者永不同页加载（前台 style.css / 后台 admin.css），不会冲突。
 *
 * @file plugins/props/assets/style.css
 */

/* ---------- 外框 ---------- */
.pp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mn-border-light, #e8eaee);
}

.pp-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--mn-text, #1f2937);
}

.pp-points {
    font-size: 13px;
    color: var(--mn-text-secondary, #5b6778);
    background: var(--mn-bg-body, #f3f4f6);
    padding: 5px 12px;
    border-radius: 14px;
}

.pp-points strong {
    color: var(--mn-primary, #3b82f6);
    font-size: 14px;
}

.pp-desc {
    margin: 0;
    padding: 12px 20px 0;
    font-size: 13px;
    color: var(--mn-text-muted, #8b95a5);
}

/* ---------- 子导航 ---------- */
.pp-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px 0;
}

.pp-nav-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--mn-text-secondary, #5b6778);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.pp-nav-link:hover {
    background: var(--mn-bg-nav-hover, #eef1f5);
    color: var(--mn-text, #1f2937);
}

.pp-nav-active {
    background: var(--mn-primary-subtle, #e8f0fe);
    color: var(--mn-primary, #3b82f6);
    font-weight: 600;
}

/* ---------- 内容区 ---------- */
.pp-body {
    padding: 16px 20px 20px;
}

.pp-empty {
    padding: 26px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--mn-text-muted, #8b95a5);
}

.pp-subtitle {
    margin: 22px 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mn-text, #1f2937);
}

.pp-note {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--mn-text-muted, #8b95a5);
}

.pp-flash {
    margin-bottom: 14px;
}

.pp-hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--mn-text-muted, #8b95a5);
}

/* ---------- 商品 / 礼包网格 ---------- */
.pp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.pp-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--mn-bg-card, #ffffff);
    border: 1px solid var(--mn-border, #e2e8f0);
    border-radius: 10px;
}

/* ---------- 礼包卡（与商品卡视觉区分：主色描边 + 内容胶囊） ---------- */
.pp-card-pack {
    border-color: var(--mn-primary-light, #bfdbfe);
}

.pp-pack-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-pack-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--mn-primary-subtle, #e8f0fe);
}

.pp-pack-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.pp-pack-sub {
    font-size: 12px;
    color: var(--mn-text-muted, #8b95a5);
}

/* 礼包内容：胶囊列表（替代原来的项目符号列表，视觉更紧凑、可带道具图标） */
.pp-pack-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pp-pack-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 9px 3px 7px;
    border: 1px solid var(--mn-border-light, #e8eaee);
    border-radius: 12px;
    background: var(--mn-bg-body, #f3f4f6);
    font-size: 12px;
    line-height: 1.5;
    color: var(--mn-text-secondary, #5b6778);
}

.pp-pack-item-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pp-pack-item-qty {
    font-weight: 600;
    color: var(--mn-primary, #3b82f6);
}

.pp-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pp-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mn-text, #1f2937);
}

.pp-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.6;
}

.pp-badge-sale {
    background: var(--mn-tag-hot-bg, #fee2e2);
    color: var(--mn-tag-hot-text, #b91c1c);
}

.pp-badge-group {
    background: var(--mn-tag-elite-bg, #ede9fe);
    color: var(--mn-tag-elite-text, #6d28d9);
}

.pp-badge-pack {
    background: var(--mn-tag-warning-bg, #fef3c7);
    color: var(--mn-tag-warning-text, #b45309);
}

.pp-card-effect {
    font-size: 12px;
    color: var(--mn-text-muted, #8b95a5);
}

.pp-card-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--mn-text-secondary, #5b6778);
}

.pp-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

.pp-price {
    font-size: 13px;
    color: var(--mn-text-secondary, #5b6778);
}

.pp-price strong {
    font-size: 15px;
    color: var(--mn-primary, #3b82f6);
}

.pp-price-old {
    margin-right: 4px;
    font-size: 12px;
    color: var(--mn-text-muted, #8b95a5);
}

.pp-meta-line {
    font-size: 12px;
    color: var(--mn-text-muted, #8b95a5);
}

/* ---------- 购买表单 ----------
   布局：数量框与购买按钮**各占一半** —— 两者都 `flex: 1 1 0`（flex-basis 为 0 → 等分），
   中间 8px 由 gap 占掉，实际各为 `(100% - 8px) / 2`。
   礼包表单没有数量框、只有按钮 → 同样是 `flex: 1 1 0`，自然撑满整行。

   ⚠️ 为什么选择器要写这么重：核心 `.mn-input { width: 100% }` 与单类 `.pp-qty`（0,1,0）
      **同优先级**，核心样式表后加载就赢 → 输入框撑满整行 → 按钮被挤到第二行。
      所以购买表单里用 `.pp-buy-form .pp-qty`（0,2,0）压过核心，并把 `width` 显式归零
      （虽然 `flex-basis:0` 已经架空了 width，显式归零可避免「哪天 flex 被改回 auto」时又炸一次）。
   档位分工（两条不冲突，优先级 0,2,0 > 0,1,1）：
      · `input.pp-qty`            → **基础档**，固定 64px，给背包「回收数量框」用；
      · `.pp-buy-form .pp-qty`    → **购买表单档**，等分宽度。 */
.pp-buy-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-buy-form .pp-qty {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* 基础档：背包「回收数量框」（`bag.php:193`）在 `.pp-use-opt` 列布局里，需要固定窄宽。
   购买表单里被上面那条（0,2,0）覆盖成等分宽度。 */
input.pp-qty {
    width: 64px;
    padding: 8px 6px;
    text-align: center;
}

.pp-buy-form .mn-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
}

.pp-owned {
    font-size: 12px;
    color: var(--mn-text-muted, #8b95a5);
}

.pp-btn-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---------- 道具 / 礼包图标 ----------
   ⚠️ 字形尺寸：`Plugin::iconHtml($this, $icon, N)` 会**剥掉**核心 icon() 输出的内联
      `style="font-size:Npx"`，改挂尺寸类 `pp-icon-s{N}`（本插件 HTML 有零内联硬门禁）。
      故尺寸由下面这组类提供；调用处的 N 变了要同步补类。选择器写成 `i.pp-icon-s{N}`
      （0,1,1）以稳定压过 FontAwesome 的 `.fa`（0,1,0），不依赖样式表加载顺序。 */
.pp-icon {
    line-height: 1;
    color: var(--mn-primary, #3b82f6);
}

i.pp-icon-s13 { font-size: 13px; }
i.pp-icon-s15 { font-size: 15px; }
i.pp-icon-s16 { font-size: 16px; }
i.pp-icon-s18 { font-size: 18px; }
i.pp-icon-s20 { font-size: 20px; }

.pp-icon-img {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
    object-fit: cover;
}

/* 商品卡左上角的图标底座 */
.pp-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--mn-primary-subtle, #e8f0fe);
}

.pp-pack-item .pp-icon {
    color: var(--mn-text-muted, #8b95a5);
}

/* ---------- 目标主题筛选（渐进增强：无 JS 时下拉照常提交） ---------- */
input.pp-filter-input {
    width: 220px;
    max-width: 100%;
    padding: 7px 11px;
    font-size: 13px;
}

.pp-filter-select {
    width: 320px;
    max-width: 100%;
}

.pp-filter-select.pp-filter-nomatch {
    border-color: var(--mn-error, #dc2626);
}

.pp-filter-count {
    font-size: 12px;
    color: var(--mn-text-muted, #8b95a5);
}

/* ---------- 表格（背包 / 使用记录共用） ---------- */
.pp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pp-table th,
.pp-table td {
    padding: 9px 10px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--mn-border-light, #e8eaee);
}

.pp-table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--mn-text-muted, #8b95a5);
    background: var(--mn-bg-body, #f3f4f6);
}

.pp-table tbody tr:hover {
    background: var(--mn-bg-row-hover, #f7f9fc);
}

/* ⚠️ 列宽只是「提示值」：table-layout 默认 auto，内容会把窄列挤回去。
   表头「选择」= 2 个 CJK 字 @12px ≈ 24px + 左右 padding 20px = 44px，
   原来的 40px 装不下 → 表头折行。这里按实际需要给宽。 */
.pp-col-pick {
    width: 52px;
}

.pp-col-num {
    width: 70px;
}

.pp-col-time {
    width: 150px;
    white-space: nowrap;
}

/* 背包「有效期」列：内容只有 Y-m-d（10 字符），比 logs 的「Y-m-d H:i」窄。
   ⚠️ 这一列此前误用了 .pp-col-num（70px）→ 日期被挤到折行。 */
.pp-col-expire {
    width: 104px;
    white-space: nowrap;
}

/* 表格「道具」单元格：图标 + 名称/描述 两栏 */
.pp-cell-item {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pp-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--mn-primary-subtle, #e8f0fe);
}

.pp-cell-main {
    min-width: 0;
}

.pp-cell-name {
    font-weight: 600;
    color: var(--mn-text, #1f2937);
}

.pp-cell-sub {
    font-size: 12px;
    color: var(--mn-text-muted, #8b95a5);
}

.pp-cell-time {
    font-size: 12px;
    color: var(--mn-text-muted, #8b95a5);
}

.pp-delta-plus {
    color: var(--mn-success, #16a34a);
}

.pp-delta-minus {
    color: var(--mn-error, #dc2626);
}

.pp-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.6;
    background: var(--mn-tag-bg, #eef1f5);
    color: var(--mn-tag-text, #4b5563);
}

/* ---------- 使用道具表单 ---------- */
.pp-use-form {
    margin: 0;
}

.pp-use-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 0 0;
}

.pp-use-opt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--mn-text-muted, #8b95a5);
}

.pp-use-actions {
    padding: 14px 0 0;
}

.pp-recycle-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mn-border-light, #e8eaee);
}

.pp-btn-danger {
    background: var(--mn-error, #dc2626);
    color: var(--mn-text-white, #ffffff);
    border: none;
}

.pp-pager {
    padding-top: 14px;
}