/* ==========================================================================
   志愿服务时长证明 · 打印页样式（v3 服务端渲染路线）
   底图：static/src/img/zhengshuBg3.png  3508 × 2481 px @300DPI = A4 横版 297×210mm
   页面只展示一张服务端渲染好的 PNG，因此这里的 CSS 极简：
     屏幕 → 居中纸张 + 工具栏；打印 → 满版 A4 横向，其余全部隐藏。
   ========================================================================== */

:root {
    --cert-brand: #1a2d8a;
    --cert-brand-dark: #14206a;
    --cert-text: #2b2b2b;
    --cert-muted: #6b7280;
    --cert-bg: #eef1f5;
    --cert-line: #d6dae2;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--cert-bg);
    color: var(--cert-text);
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
                 "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

#certPage {
    padding: 8px;
}

/* --------------------------------------------------------------------------
   工具栏
   -------------------------------------------------------------------------- */
.cert-toolbar {
    max-width: 297mm;
    margin: 0 auto 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--cert-line);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(20, 32, 106, .06);
}

.cert-toolbar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    margin-right: auto;
}

.cert-toolbar-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--cert-brand);
    line-height: 1.3;
}

.cert-toolbar-meta {
    font-size: 12px;
    color: var(--cert-muted);
}

.cert-toolbar-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* --- 按钮（沿用站点 .btn-bjh 命名，自带样式免得依赖 memberDetail.css） --- */
.btn-bjh {
    display: inline-block;
    padding: 8px 20px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.btn-bjh-primary {
    color: #fff;
    background-color: #6CB14F;
    border-color: #6CB14F;
}
.btn-bjh-primary:hover { background-color: #5fa044; border-color: #5fa044; }

.btn-bjh-default {
    color: var(--cert-brand);
    background-color: #fff;
    border-color: #b9c0d4;
}
.btn-bjh-default:hover { background-color: #f4f6fb; border-color: var(--cert-brand); }

.btn-bjh-txt {
    color: var(--cert-muted);
    background-color: transparent;
    border-color: transparent;
}
.btn-bjh-txt:hover { color: var(--cert-brand); background-color: #f4f6fb; }

.btn-bjh[disabled],
.btn-bjh:disabled {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none;
}

/* 打印设置区：纸张口径提示 + 安全边距开关（屏幕上显示，打印时隐藏） */
.cert-print-opts {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--cert-muted);
}

.cert-opt-line { display: inline-flex; align-items: center; gap: 5px; }

.cert-opt-code {
    padding: 1px 6px;
    background: #f2f4f8;
    border-radius: 3px;
    color: var(--cert-brand);
    font-weight: 600;
}

.cert-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.cert-opt input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--cert-brand);
}

/* 移动端提示：屏幕上一直显示（打印时隐藏） */
.btn-mobile {
    display: none;
    flex: 1 1 100%;
    font-size: 13px;
    color: var(--cert-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   业务提示条（如「该年度 0 小时」）：屏幕上醒目，打印时隐藏
   -------------------------------------------------------------------------- */
.cert-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 297mm;
    max-width: 100%;
    margin: 0 auto 14px;
    padding: 12px 16px;
    background: #fff8e6;
    border: 1px solid #f0d18a;
    border-left: 4px solid #e6a700;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #8a6100;
}

.cert-warn-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: #e6a700;
    border-radius: 50%;
}

.cert-warn-text { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   纸张
   -------------------------------------------------------------------------- */
.cert-paper {
    position: relative;
    width: 297mm;
    max-width: 100%;
    aspect-ratio: 297 / 210;      /* 与底图 3508×2481 一致，避免任何裁切 */
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(20, 32, 106, .16);
}

.cert-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;          /* 底图比例与 A4 横版差 0.02%，contain 更不容易溢边 */
    opacity: 0;
    transition: opacity .2s ease;
}

/* 图片加载完成 → JS 给 .cert-paper 加 .is-ready */
.cert-paper.is-ready .cert-img { opacity: 1; }
.cert-paper.is-ready .cert-loading { display: none; }

/* 加载态 */
.cert-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #fff;
    color: var(--cert-muted);
    font-size: 14px;
    z-index: 2;
}

.cert-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid #dfe4ef;
    border-top-color: var(--cert-brand);
    border-radius: 50%;
    animation: cert-spin .8s linear infinite;
}

@keyframes cert-spin { to { transform: rotate(360deg); } }

/* 失败态（默认隐藏） */
.cert-fail {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    background: #fff;
    z-index: 3;
}

.cert-paper.is-failed .cert-loading { display: none; }
.cert-paper.is-failed .cert-fail { display: flex; }
.cert-fail-title { font-size: 16px; font-weight: 600; color: #c0392b; }
.cert-fail-msg { font-size: 13px; color: var(--cert-muted); }

/* --------------------------------------------------------------------------
   屏幕上的数据核对
   已并入 .cert-toolbar 卡片，作为「打印设置」的下一行 —— 所以不再需要
   自己那层白底圆角卡片外观，只保留一条虚线把三块（按钮区 / 打印设置 / 核对信息）分开。
   -------------------------------------------------------------------------- */
.cert-fields {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    width: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.cert-field { display: flex; align-items: baseline; gap: 8px; font-size: 12px;}
.cert-field-k { color: var(--cert-muted); }
.cert-field-v { color: var(--cert-text); font-weight: 600; }
.cert-field-v.is-warn { color: #b26a00; font-weight: 500; }

/* --------------------------------------------------------------------------
   错误页
   -------------------------------------------------------------------------- */
.cert-error {
    width: 560px;
    max-width: 100%;
    margin: 80px auto;
    padding: 32px 28px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--cert-line);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(20, 32, 106, .08);
}

.cert-error-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    line-height: 48px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    background: #c0392b;
    border-radius: 50%;
}

.cert-error-title { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.cert-error-msg { font-size: 14px; color: #c0392b; margin-bottom: 16px; }
.cert-error-tip { font-size: 12px; color: var(--cert-muted); }
.cert-error-tip code {
    padding: 2px 6px;
    background: #f2f4f8;
    border-radius: 4px;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   响应式：窄屏时纸张撑满可视宽度，隐藏 PC 按钮（改用长按保存）
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    #certPage { padding: 8px; }
    .cert-toolbar { padding: 10px 12px; }
    .cert-toolbar-btns { flex: 1 1 100%; justify-content: center; }
    .btn-pc { display: none; }
    .btn-mobile { display: block; }
}

/* --------------------------------------------------------------------------
   打印：A4 横向，1:1 满版（底图 3508×2481 @300DPI = 297×210mm，正好 A4 横版）

   两个要点：
   1. `@page` 用**显式尺寸 `297mm 210mm`** 而不是关键字 `A4 landscape`：后者在部分
      浏览器/打印驱动下不被识别，纸张会退回默认（常见是 Letter 或 A4 竖版），
      证书就被缩成一小块。
   2. A4 高度只有 210mm，而 297mm 宽的图片按比例算是 210.05mm —— 任何 0.1mm 的
      舍入溢出都会多吐一张空白页。所以纸张/图片都**同时锁死 width 与 height**，
      再用 `object-fit: contain` 吃掉那 0.05mm。
   -------------------------------------------------------------------------- */
@page {
    size: 297mm 210mm;
    margin: 0;
}

@media print {
    html, body {
        width: 297mm;
        height: 210mm;
        max-height: 210mm;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .no-print,
    .cert-loading,
    .cert-fail,
    .cert-error { display: none !important; }

    #certPage { padding: 0 !important; margin: 0 !important; }

    .cert-paper {
        width: 297mm !important;
        height: 210mm !important;
        max-width: none !important;
        max-height: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
        break-after: avoid !important;
        break-inside: avoid !important;
    }

    .cert-img {
        display: block !important;
        width: 297mm !important;
        height: 210mm !important;
        max-height: 210mm !important;
        opacity: 1 !important;
        object-fit: contain !important;
    }

    /* ---- 安全边距模式（页面上勾选后生效）------------------------------
       大多数喷墨/激光打印机不能无边距打印，A4 四周有 3~5mm 的不可打印区。
       证书的蓝金边框离纸边最近处只有约 2mm，会被裁掉一条。
       勾选后整体缩到 287×200mm 居中，四周留 5mm，内容 100% 落在可打印区内。 */
    html.cert-safe .cert-paper {
        width: 287mm !important;
        height: 200mm !important;
        max-height: 200mm !important;
        margin: 5mm auto !important;
    }

    html.cert-safe .cert-img {
        width: 287mm !important;
        height: 200mm !important;
        max-height: 200mm !important;
    }
}