@charset "utf-8";
/* ===================================================================
   红事 / 白事 双主题（按钮与卡片配色）
   -------------------------------------------------------------------
   为什么独立成文件：主程序 gift_book_main.php 是 4900 行的老页面，CSS 全内联，
   在里面插大段规则容易踩两个坑：①注释里写出注释结束标记（星号紧跟斜杠）会把后面
   整段样式吞掉；②优先级被后面的块覆盖。
   独立文件在 </head> 前加载 ⇒ 排在页面所有内联 CSS 之后，同优先级下天然生效；
   再统一用 body.gb-th-xxx 前缀抬特异度，压得住页面里那些带 !important 的旧规则。

   ⚠️ 改动守则：
   1. 只改**颜色 / 渐变 / 阴影 / 字重**，不改 padding、height、display、顺序 ——
      一排按钮的等高（42px）是靠 #createEventForm/.btn 的 height 规则钉死的，
      动一点就全歪。
   2. 主题类只挂在 body 上（由 PHP 输出 + JS 联动「礼簿类型」下拉）。
      登录页 / 注册弹窗没有这个类 ⇒ 那边的按钮保持原配色，不受影响。
   3. 三层视觉权重，别让一排实心按钮互相打架：
      实心主色（创建事务 / 打印 / 导出 / 大屏） > 实心次色（导入 / 移交 / 二维码开关）
      > 主题描边浅底（名单 / 关于 / 锁屏 / 语音 / 返回） > 中性灰（收款二维码）。
   4. 白事一律不用高饱和暖色：礼金统计卡、成功/警告按钮全部压成墨青冷灰系。
   =================================================================== */

/* ---------- 主题变量 ---------- */
body.gb-th-red{
    --gb-a1:#e23b3b;  --gb-a2:#b91c1c;      /* 主色（喜庆中国红），统计卡左侧色条用 */
    --gb-b1:#e08a2e;  --gb-b2:#b45309;      /* 次色（金橙）—— 按钮已不再用，留着兜底 */
    --gb-ink:#9f1239;                        /* 描边按钮的字色 */
    --gb-line:#f0c9c9;                       /* 描边 */
    --gb-tint:#fef5f5;                       /* 浅底 */
    --gb-tint2:#fde8e8;                      /* 浅底 hover */
    --gb-sh:rgba(185,28,28,.26);             /* 主题投影 */
    --gb-sh2:rgba(185,28,28,.34);
    --gb-ring:rgba(185,28,28,.45);           /* 焦点环 */
    --gb-danger:#dc2626;
    --gb-warn1:#d97706;  --gb-warn2:#b45309;
    --gb-neutral-bg:#fff;
    --gb-neutral-ink:#4b5563;
    --gb-neutral-line:#d1d5db;
    /* 实心主色的四档：静 / hover 各两端 + 两层投影。
       比 --gb-a1 再压深一档：正红 #e23b3b 做大面积实心会发「荧光」，
       印刷 / 深色界面上尤其明显；压到 #d9483f→#b02a22 才有实心的厚重感。 */
    --gb-solid-1:#d9483f;  --gb-solid-2:#b02a22;
    --gb-solid-1h:#c53d34; --gb-solid-2h:#982116;
    --gb-solid-sh:rgba(176,42,34,.22);
    --gb-solid-sh2:rgba(152,33,22,.30);
    /* 危险色：实心两档 + 描边三档（描边给表格里「每行一颗」的删除用） */
    --gb-dgr-1:#bf3a2f;  --gb-dgr-2:#9c2419;
    --gb-dgr-1h:#b03227; --gb-dgr-2h:#861e15;
    --gb-dgr-ink:#b42318;
    --gb-dgr-line:#f0bdb9;
    --gb-dgr-line2:#e39c96;
    --gb-dgr-tint:#fef3f2;
    --gb-dgr-sh:rgba(156,36,25,.18);
    --gb-dgr-sh2:rgba(134,30,21,.26);
}
body.gb-th-white{
    --gb-a1:#546e7a;  --gb-a2:#263238;      /* 主色渐变（墨青，素雅） */
    --gb-b1:#607d8b;  --gb-b2:#37474f;      /* 次色渐变 */
    --gb-ink:#263238;
    --gb-line:#cfd8dc;
    --gb-tint:#f4f7f8;
    --gb-tint2:#e6ecef;
    --gb-sh:rgba(38,50,56,.24);
    --gb-sh2:rgba(38,50,56,.32);
    --gb-ring:rgba(55,71,79,.45);
    --gb-danger:#8b2e2e;                     /* 白事下的删除：保留危险语义，但降饱和 */
    --gb-warn1:#8d6e63; --gb-warn2:#5d4037;  /* 移交礼簿：茶褐，不用亮琥珀 */
    --gb-neutral-bg:#fff;
    --gb-neutral-ink:#455a64;
    --gb-neutral-line:#cfd8dc;
    /* 白事实心：墨青，明度跨度比红事更小（素雅，不要厚重的对比） */
    --gb-solid-1:#516b7a;  --gb-solid-2:#31454f;
    --gb-solid-1h:#465d6a; --gb-solid-2h:#26363e;
    --gb-solid-sh:rgba(38,54,63,.20);
    --gb-solid-sh2:rgba(20,32,38,.28);
    /* 白事危险：低饱和深红，跟墨青同处一屏不打架 */
    --gb-dgr-1:#8f3a34;  --gb-dgr-2:#742a25;
    --gb-dgr-1h:#83322d; --gb-dgr-2h:#62231f;
    --gb-dgr-ink:#8b2e2e;
    --gb-dgr-line:#dcc0bd;
    --gb-dgr-line2:#c9a29e;
    --gb-dgr-tint:#f9f0ef;
    --gb-dgr-sh:rgba(116,42,37,.16);
    --gb-dgr-sh2:rgba(98,35,31,.24);
}

/* ---------- 页面氛围：极淡的主题光晕（只加背景图，不动 background-color） ---------- */
body.gb-th-red{
    background-image:
        radial-gradient(1100px 560px at 12% -10%, rgba(226,59,59,.10), transparent 62%),
        radial-gradient(900px 480px at 100% 0%, rgba(217,119,6,.09), transparent 58%);
    background-attachment:fixed;
}
body.gb-th-white{
    background-image:
        radial-gradient(1100px 560px at 12% -10%, rgba(55,71,79,.11), transparent 62%),
        radial-gradient(900px 480px at 100% 0%, rgba(120,144,156,.12), transparent 58%);
    background-attachment:fixed;
}
/* 卡片顶部一道 3px 主题色细条：纯 inset 阴影，不占位、不影响卡片高度 */
body.gb-th-red   .card-header{ box-shadow:inset 0 3px 0 var(--gb-a1); }
body.gb-th-white .card-header{ box-shadow:inset 0 3px 0 var(--gb-a2); }

/* ---------- 通用质感：字重 + 焦点环 + 按下回弹 ---------- */
body.gb-th-red   .btn,
body.gb-th-white .btn{ font-weight:600; letter-spacing:.02em; }
body.gb-th-red   .btn:focus-visible,
body.gb-th-white .btn:focus-visible{ outline:2px solid var(--gb-ring); outline-offset:2px; }
body.gb-th-red   .btn:active,
body.gb-th-white .btn:active{ transform:translateY(0) scale(.985); }

/* ===================================================================
   ⚠️ 按钮配色全部搬到 gb_ui.css（排在后面加载的那份）了，这里不再定义。
   -------------------------------------------------------------------
   原因：按钮的「好看」和「按主题变色」是两件事，分开写就会互相覆盖 ——
   主题层先给一套渐变，视觉层再压一遍，两处规则靠 !important 和后加载顺序
   才勉强分出胜负，改一个色要同时翻两个文件，还容易漏。
   现在职责划清楚：
     本文件只提供**颜色的原料**（--gb-solid-* 实心主色、--gb-dgr-* 危险色，
     随红事 / 白事切换）；
     gb_ui.css 决定**哪颗按钮用哪一档**（实心 / 中性实心 / 描边 / 幽灵 / 危险）。
   排版铁律：一屏之内只允许出现「一颗」实心主色，其余全部退到中性灰阶，
   靠填充方式（实心 > 描边 > 浅底）而不是靠色相分主次 —— 满屏红橙紫是
   「不高级」的根源。
   =================================================================== */

/* ---------- 礼金统计卡：整排跟主题走（inline style 的渐变也压得住） ---------- */
body.gb-th-red #statCards .stat-card:nth-child(1){background:linear-gradient(135deg,#e23b3b,#991b1b)!important;}
body.gb-th-red #statCards .stat-card:nth-child(2){background:linear-gradient(135deg,#ea580c,#c2410c)!important;}
body.gb-th-red #statCards .stat-card:nth-child(3){background:linear-gradient(135deg,#f59e0b,#d97706)!important;}
body.gb-th-red #statCards .stat-card:nth-child(4){background:linear-gradient(135deg,#eab308,#a16207)!important;}
body.gb-th-red #statCards .stat-card:nth-child(5){background:linear-gradient(135deg,#be123c,#881337)!important;}
body.gb-th-red #statCards .stat-card:nth-child(6){background:linear-gradient(135deg,#b91c1c,#7f1d1d)!important;}
/* 白事：六档墨青明度递进，素雅但仍能一眼区分 */
body.gb-th-white #statCards .stat-card:nth-child(1){background:linear-gradient(135deg,#263238,#171e22)!important;}
body.gb-th-white #statCards .stat-card:nth-child(2){background:linear-gradient(135deg,#37474f,#212b31)!important;}
body.gb-th-white #statCards .stat-card:nth-child(3){background:linear-gradient(135deg,#455a64,#2b3a42)!important;}
body.gb-th-white #statCards .stat-card:nth-child(4){background:linear-gradient(135deg,#546e7a,#37474f)!important;}
body.gb-th-white #statCards .stat-card:nth-child(5){background:linear-gradient(135deg,#607d8b,#455a64)!important;}
body.gb-th-white #statCards .stat-card:nth-child(6){background:linear-gradient(135deg,#78909c,#546e7a)!important;}

/* ---------- 表头：跟主题走（原来是靛蓝/灰，夹在主题色里显得跳） ---------- */
body.gb-th-red   #statCards .stat-card,
body.gb-th-white #statCards .stat-card{ text-shadow:0 1px 3px rgba(0,0,0,.22); }

/* ---------- 打印 / 导出弹窗里的两个大卡片：边框跟主题（hover 才有反馈） ---------- */
body.gb-th-red   #mainPrintMask .print-mode-detail:hover{ border-color:var(--gb-a1) !important; }
body.gb-th-white #mainPrintMask .print-mode-detail:hover{ border-color:var(--gb-a1) !important; }

/* ---------- 减弱动效偏好：不上浮、不改亮度 ---------- */
@media (prefers-reduced-motion: reduce){
    body.gb-th-red   .btn:hover,
    body.gb-th-white .btn:hover{ transform:none !important; }
}

/* ===================================================================
   列表页「礼簿事务管理」：中性克制（红事 / 白事共用同一套界面）
   -------------------------------------------------------------------
   这里是两个类型共用的地方，装饰一律不上主题色：卡片细条、表格、标题竖条
   全走冷灰蓝（#94a3b8 / #334155 / #f8fafc 那一档），只有「新建礼簿事务」
   那排操作按钮保留主题联动 —— 它跟「礼簿类型」下拉直接对应，是用户要的
   所见即所得，不算装饰。
   ⚠️ 表格规则整段包在 @media (min-width:769px) 里：≤768px 时 #eventTable 被
   页面自己的规则改成 block 卡片流（thead 隐藏、td 变块级 + ::before 列名），
   那里 td 的 padding / 边框是刻意调过的，不能拿桌面的 12px 14px 去覆盖。
   选择器统一带 body.gb-th-*.gb-page-list 三级，压得住上面那批主题规则。
   =================================================================== */

/* 卡片顶部细条：列表页用中性灰蓝，详情页才用主题色（写在后面，特异度也更高） */
body.gb-th-red.gb-page-list   .card-header,
body.gb-th-white.gb-page-list .card-header{ box-shadow:inset 0 3px 0 #cbd5e1; }

/* 标题左侧竖条：纯装饰，4px 中性色，不抢戏 */
.gb-list-title{ display:flex; align-items:center; gap:10px; color:#1f2937; }
.gb-list-title::before{
    content:""; width:4px; height:17px; border-radius:2px;
    background:#94a3b8; flex:none;
}

@media (min-width:769px){
    /* 表头：比正文小半档、字距拉开，用「弱化」而不是「加粗」做层次 */
    body.gb-page-list #eventTable>thead th{
        background:#f8fafc;
        color:#475569;
        font-size:12.5px;
        font-weight:600;
        letter-spacing:.03em;
        white-space:nowrap;
        padding:11px 14px;
        border-bottom:1px solid #e2e8f0;
    }
    body.gb-page-list #eventTable>tbody td{
        padding:12px 14px;
        border-bottom:1px solid #f1f5f9;
        vertical-align:middle;
        color:#334155;
        font-size:14px;
    }
    body.gb-page-list #eventTable>tbody tr{ transition:background .15s ease; }
    body.gb-page-list #eventTable>tbody tr:hover{ background:#f8fafc; }
    /* hover 时首列内侧浮出一道 3px 中性指示条：比整行变色更克制，也更好定位 */
    body.gb-page-list #eventTable>tbody>tr:hover>td:first-child{ box-shadow:inset 3px 0 0 #94a3b8; }
    body.gb-page-list #eventTable td.cell-id{ font-variant-numeric:tabular-nums; }
    body.gb-page-list #eventTable>tbody tr:last-child>td{ border-bottom:none; }

    /* 主信息（事务名）加深，次要信息（ID / 管账 / 时间）退到灰阶 */
    body.gb-page-list #eventTable td.cell-name{ color:#0f172a; font-size:15px; font-weight:700; }
    body.gb-page-list #eventTable td.cell-id,
    body.gb-page-list #eventTable td.cell-person,
    body.gb-page-list #eventTable td.cell-time{ color:#64748b; font-size:13px; }

    /* 空态：只给留白和字色，不加边框（整行 td 描边会显得像坏掉的表格） */
    body.gb-page-list #eventTable>tbody>tr>td[colspan]{
        padding:30px 14px; color:#94a3b8; font-size:13.5px; border-bottom:none;
    }

    /* 表格 / 工具栏里的操作按钮配色不在这里写 —— 统一由 gb_ui.css 的
       「按钮配色体系」按语义分档（实心 / 中性实心 / 描边 / 幽灵 / 危险）。
       写在这边的后果是：列表页和详情页两套规则抢同一颗按钮，
       改一个色要同时改两处，且 @media 边界一变就错位。 */
}