/* ============================================================
   LIGHT MC · 活动抽奖模块（lottery）页面级样式
   ------------------------------------------------------------
   来源：index.html / admin.html 原内联 <style> 抽离后合并去重。
   由两页 <link rel="stylesheet" href="css/style.css"> 共享。
   约定（与全站组件层一致）：
     - 通用组件（卡片/按钮/表单/表格/徽章/页头…）一律复用 css/theme.css
       的 .lmc-* 组件层，本文件不重定义任何 .lmc-* 类；
     - 本文件只定义「本模块特有」的页面级类，并允许对组件类做
       页面级覆盖（覆盖必须写在本文件，禁止写页面内联 <style>）；
     - 颜色只引用 --lmc-* 令牌，禁止硬编码色值；
   - 暗色规则只写在 html[data-theme="dark"] 下，禁止用系统偏好媒体查询
     重复定义暗色（系统偏好由 <head> 内联脚本转成 data-theme 属性）。
   ============================================================ */

/* ---------------- 0. 基础 reset 与页面底色（沿用原内联设定） ---------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--lmc-font-family);
    background: var(--lmc-color-bg);
    color: var(--lmc-color-text);
    min-height: 100vh;
}

h1 { font-size: 1.8rem; color: var(--lmc-color-primary); font-weight: var(--lmc-font-weight-bold); }
h2 { font-size: 1.2rem; color: var(--lmc-color-text); font-weight: var(--lmc-font-weight-bold); }
h3 { font-size: 0.95rem; color: var(--lmc-color-primary); }

a { color: var(--lmc-color-primary); }
a:hover { color: var(--lmc-color-primary-hover); }

/* ---------------- 1. 页头（两页共用：.lmc-page-head 的页面级覆盖） ---------------- */
.lottery-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lmc-space-md);
    border-bottom: none;
    padding-bottom: 0;
}
.lottery-head-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lmc-space-md);
}
.lottery-sub { color: var(--lmc-color-text-muted); font-size: 1rem; }
.lottery-back-link { color: var(--lmc-color-text-muted); text-decoration: none; }
.lottery-back-link:hover { color: var(--lmc-color-primary); }
.lottery-expired { color: var(--lmc-color-danger); font-weight: var(--lmc-font-weight-bold); }

/* ---------------- 2. 卡片纵向堆叠容器 ---------------- */
.lottery-stack {
    display: flex;
    flex-direction: column;
    gap: var(--lmc-space-lg);
}

/* ---------------- 3. 奖池（index.html） ---------------- */
.lottery-pool-head { justify-content: space-between; align-items: center; }
.lottery-pool-head h2 { margin: 0; }

/* 奖池卡片栅格：随页面宽度自适应（本次修正）
   原先此处把栅格下限覆写成 140px —— 桌面宽屏下能排到 7 列、每张仅约 142px，
   不到全站卡片栅格基准（theme.css .lmc-card-grid 的 260px）的一半，观感明显偏小。
   现改为 [180px, 260px] 的弹性下限（clamp + 22vw）：窗口越宽卡片越大、列数越多，
   窄到一定程度才回落；上限 260px 与全站基准对齐，避免本页又变成特例。
   用 auto-fill（而非 auto-fit）：奖项数量少时余下轨道仍占位，卡片尺寸保持一致，
   不会被拉伸变形。 */
.prize-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 22vw, 260px), 1fr));
    gap: var(--lmc-space-md);
    margin: var(--lmc-space-lg) 0;
}
.prize-item {
    background: var(--lmc-color-bg);
    padding: var(--lmc-space-md);
    text-align: center;
}
.prize-thanks { background: var(--lmc-color-surface); opacity: .9; }
.prize-name { font-size: 0.9rem; color: var(--lmc-color-text); word-break: break-all; }
.prize-count { font-size: 1.8rem; color: var(--lmc-color-primary); margin: var(--lmc-space-xs) 0; }
.prize-thanks .prize-count { color: var(--lmc-color-text-muted); }
.prize-winners {
    margin-top: var(--lmc-space-sm);
    padding-top: var(--lmc-space-sm);
    border-top: 1px solid var(--lmc-color-border);
}
.winners-label { font-size: 0.75rem; color: var(--lmc-color-text-muted); margin-bottom: var(--lmc-space-sm); }
.winners-list { display: flex; flex-wrap: wrap; gap: var(--lmc-space-xs); justify-content: center; }
.lottery-winner-more { color: var(--lmc-color-text-muted); }

.prize-highlight { font-size: 1.2rem; color: var(--lmc-color-primary); margin-bottom: var(--lmc-space-md); }

.form-panel {
    display: flex;
    flex-direction: column;
    gap: var(--lmc-space-md);
    background: var(--lmc-color-bg);
    padding: var(--lmc-space-md);
    margin-top: var(--lmc-space-md);
    border: 1px solid var(--lmc-color-border);
    border-radius: var(--lmc-radius-card);
}
.lottery-pre {
    background: var(--lmc-color-surface);
    padding: var(--lmc-space-md);
    border: 1px solid var(--lmc-color-border);
    border-radius: var(--lmc-radius-input);
    overflow-x: auto;
    font-size: 0.85rem;
}

/* ---------------- 4. 提示块（index.html / admin.html 共用）
   类名 .message / .error / .success / .warning / .info / .hidden 为 JS 契约
   （showMessage() 以 el.className = `message ${type}` 整体重写、drawResult 用
   classList.add('success'/'error')），故沿用原类名，仅将样式令牌化，禁止重命名。 */
.message {
    padding: 0.7rem 1rem;
    margin: var(--lmc-space-md) 0;
    border: 1px solid;
    border-radius: var(--lmc-radius-input);
    font-size: 0.85rem;
}
.message.error {
    background: var(--lmc-color-danger-soft);
    color: var(--lmc-color-danger);
    border-color: var(--lmc-color-danger);
}
.message.success {
    background: var(--lmc-color-success-soft);
    color: var(--lmc-color-success);
    border-color: var(--lmc-color-success);
}
.message.warning {
    background: var(--lmc-color-warning-soft);
    color: var(--lmc-color-warning);
    border-color: var(--lmc-color-warning);
}
.message.info {
    background: var(--lmc-color-primary-soft);
    color: var(--lmc-color-primary-dark);
    border-color: var(--lmc-color-primary);
}
.hidden { display: none; }

/* ---------------- 5. 后台表格（admin.html） ---------------- */
/* 表格底色：沿用原「表头浅底、数据行透明」的观感 */
.lottery-table { background: transparent; margin: var(--lmc-space-md) 0; }
.lottery-table th, .lottery-table td { font-size: 0.85rem; }

/* 活动名称 / 截止时间 表单行（.lmc-toolbar 的页面级覆盖：底部对齐） */
.lottery-activity-form { align-items: flex-end; }
.lottery-activity-name { flex: 1 1 240px; }
.lottery-activity-end { flex: 0 1 220px; }

/* 操作列按钮：紧凑尺寸（.lmc-btn 提供外观，.action-btn 仅收窄尺寸） */
.action-btn { min-height: 32px; padding: 0 var(--lmc-space-sm); font-size: 0.85rem; }
/* .edit-name / .edit-count 为 JS 选择器契约（row.querySelector('.edit-name')），保留类名 */
.edit-name, .edit-count { max-width: 100%; }

/* 批量导入区 */
.batch-area { margin-top: var(--lmc-space-md); display: flex; flex-direction: column; gap: var(--lmc-space-sm); }
.batch-area textarea { min-height: 100px; resize: vertical; }
.batch-hint { color: var(--lmc-color-text-muted); font-size: 0.8rem; }

/* ---------------- 6. 中奖记录分组（admin.html） ---------------- */
.activity-group {
    margin-bottom: var(--lmc-space-lg);
    background: var(--lmc-color-bg);   /* 覆盖 .lmc-card 的 surface 底，保留原「分组内白底 + 表头浅底」观感 */
    border: 1px solid var(--lmc-color-border);
}
.activity-group:last-child { margin-bottom: 0; }
.activity-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lmc-space-sm);
    padding: var(--lmc-space-sm) var(--lmc-space-md);
    background: var(--lmc-color-surface);
}
.activity-header h3 { margin: 0; }
.activity-count {
    color: var(--lmc-color-text-muted);
    font-size: 0.8rem;
    margin-left: auto;
}
.activity-group .lmc-table { margin: 0; }

/* 宽屏：每个活动分组横向并排（"每个活动都横向排列"）
   分组内是 6 列表格；并排后每块约 547px（1440px 视口），表格会变窄并出现横向滚动
   （.lmc-table-wrap 已设 overflow-x:auto）—— 该取舍经用户确认接受。
   用 auto-fit：活动只剩 1 个时该块自动占满整行，不会被压成半宽。
   下限取 460px 而非 480px：可用宽度 = 视口 − 32（视口 ≤1200 时）
                     − 48（.lmc-card 左右内边距 24×2），
   断点 1080px 时可用仅 983px；若下限 480 则 2 列需 2×480+24(gap)=984px，
   差 1px 排不下 → 出现「断点已触发但仍单列」的空转区（1080–1104px）。
   460px 时 2 列仅需 944px，断点处即可并排，且分组仍足够放表格（溢出交给横向滚动）。 */
@media (min-width: 1080px) {
    .records-groups {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
        gap: var(--lmc-space-lg);
        align-items: start;
    }
    /* 网格内间距交由 gap 控制，去掉卡片自带的 margin-bottom 免得叠加 */
    .records-groups .activity-group { margin-bottom: 0; }
}

/* ---------------- 7. 响应式 ---------------- */

/* 宽屏：奖池与抽奖记录左右并排（"页面够宽时横向排列"）
   仅当两块同时存在时才由 .lottery-stack--split 触发（见 index.html renderMain）——
   未抽奖时只有奖池一块，保持整宽，奖项卡片才有 4 列 × 260px。
   记录栏固定 380px（够放表单），奖池占其余宽度；.lottery-stack 自带的 gap 在
   grid 下同样生效，无需重复声明。
   断点取 1080px 的原因：并排会压缩奖池宽度，须保证其内部奖项栅格仍能排满 2 列
   (2×260 + 16 = 536px)。算式（视口 ≤1200 时）：
     奖池卡宽 = 视口 − 64(.lmc-main/.lmc-container 左右内边距各 16×2)
                      − 24(gap) − 380(记录栏)
   需 ≥ 584px（536 + 48 卡片内边距）→ 视口 ≥ 1052px，取 1080px 留余量。 */
@media (min-width: 1080px) {
    .lottery-stack--split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
        align-items: start;   /* 记录栏不被拉伸到与奖池等高 */
    }
}

@media (max-width: 768px) {
    .lottery-head { flex-direction: column; align-items: flex-start; }
    .lottery-pool-head { align-items: flex-start; }
}
/* 窄屏：固定两列。弹性下限在 560px 以下会把卡片挤成单列或过窄（列宽只剩 ~100px），
   固定两列反而更整齐；本条覆盖基础规则，须排在基础规则之后。 */
@media (max-width: 560px) {
    .prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .activity-header { row-gap: var(--lmc-space-xs); }
    .activity-count { margin-left: 0; }
}