/*
 * 匯出 PDF 的 UI(設定面板 + 預覽面板)與列印隔離樣式。
 * 共用色票 / 字型來自 theme.css(先載入);單位一律 rem / % / vw / vh(無 px)。
 * 螢幕:#mde-pdf-area 為覆蓋層(modal);列印:僅輸出預覽舞台中的 Paged.js 頁面,其餘一律隱藏。
 */

/* ---------------- 覆蓋層 area(不可見 slot:約束所有 PDF 互動元件) ---------------- */
.mde-pdf-area {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 2vw;
}
.mde-pdf-area[hidden] { display: none; }
.mde-pdf-overlay {
    position: absolute;
    inset: 0;
    background: var(--c-overlay);
}

/* ---------------- 面板(設定 / 預覽共用外框) ---------------- */
.mde-pdf-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 96vh;
    background: var(--c-surface);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}
.mde-pdf-panel[hidden] { display: none; }
.mde-pdf-panel--settings { width: 46rem; max-width: 96vw; }
.mde-pdf-panel--preview { width: 96vw; height: 96vh; max-height: 96vh; }

.mde-pdf-panel-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    border-bottom: var(--hair) solid var(--c-line);
    background: var(--c-bg-soft);
    border-radius: var(--radius) var(--radius) 0 0;
}
.mde-pdf-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--c-blue-ink);
}
.mde-pdf-toolbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.mde-pdf-x {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--c-text-3);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.mde-pdf-x:hover { color: var(--c-blue-strong); background: var(--c-blue-soft); }

.mde-pdf-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.2rem;
}
.mde-pdf-panel-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding: 0.9rem 1.2rem;
    border-top: var(--hair) solid var(--c-line);
    background: var(--c-bg-soft);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------------- 設定表單 ---------------- */
.mde-pdf-section-title {
    margin: 1.3rem 0 0.6rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--c-text-3);
}
.mde-pdf-section-title:first-child { margin-top: 0; }

.mde-pdf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1rem;
}
.mde-pdf-grid--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mde-pdf-grid--triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mde-pdf-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.mde-pdf-field > span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-text-2);
}
.mde-pdf-field input,
.mde-pdf-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    font: inherit;
    font-size: 0.88rem;
    color: var(--c-text);
    background: var(--c-surface);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mde-pdf-field input:focus,
.mde-pdf-field select:focus {
    outline: none;
    border-color: var(--c-blue);
    box-shadow: 0 0 0 0.12rem var(--c-blue-soft-2);
}

.mde-pdf-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--c-text-2);
}
.mde-pdf-check input { width: 1rem; height: 1rem; }

.mde-pdf-hint {
    margin: 0.6rem 0 0;
    padding: 0.55rem 0.75rem;
    font-size: 0.76rem;
    line-height: 1.7;
    color: var(--c-text-2);
    background: var(--c-surface-2);
    border-radius: var(--radius-sm);
}
.mde-pdf-hint code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--c-blue-ink);
}

/* ---------------- 頁首 / 頁尾單格:文字輸入 + 「…」字型設定 ---------------- */
.mde-pdf-slot-input {
    display: flex;
    align-items: stretch;
    gap: 0.3rem;
}
.mde-pdf-slot-input input { flex: 1 1 auto; min-width: 0; }
.mde-pdf-dots {
    flex: 0 0 auto;
    width: 2rem;
    appearance: none;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    color: var(--c-text-3);
    background: var(--c-surface-2);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-sm);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mde-pdf-dots:hover { color: var(--c-blue-strong); border-color: var(--c-blue); background: var(--c-blue-soft); }
.mde-pdf-dots.is-set { color: var(--c-blue-strong); border-color: var(--c-blue); background: var(--c-blue-soft); }

.mde-pdf-fontpanel {
    margin-top: 0.4rem;
    padding: 0.5rem;
    background: var(--c-surface-2);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-sm);
}
.mde-pdf-fontpanel[hidden] { display: none; }
.mde-pdf-fontadd {
    display: flex;
    gap: 0.3rem;
}
.mde-pdf-fontadd select,
.mde-pdf-fontadd input {
    flex: 1 1 50%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.3rem 0.45rem;
    font: inherit;
    font-size: 0.82rem;
    color: var(--c-text);
    background: var(--c-surface);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-sm);
}
.mde-pdf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.mde-pdf-chips:empty { margin-top: 0; }
.mde-pdf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.2rem 0.15rem 0.55rem;
    font-size: 0.78rem;
    color: var(--c-blue-ink);
    background: var(--c-blue-soft);
    border-radius: var(--radius-pill);
}
.mde-pdf-chip button {
    appearance: none;
    border: none;
    cursor: pointer;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1;
    font-size: 0.7rem;
    color: var(--c-blue-strong);
    background: transparent;
    border-radius: var(--radius-pill);
    transition: background 0.15s;
}
.mde-pdf-chip button:hover { background: var(--c-blue-soft-2); }

/* 字級 / 顏色 / 粗斜底線(「…」面板下半) */
.mde-pdf-fontmeta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.5rem;
}
.mde-pdf-fontmeta-row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}
.mde-pdf-mini-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.mde-pdf-mini-field > span {
    font-size: 0.72rem;
    color: var(--c-text-2);
}
.mde-pdf-mini {
    width: 5rem;
    box-sizing: border-box;
    padding: 0.3rem 0.45rem;
    font: inherit;
    font-size: 0.82rem;
    color: var(--c-text);
    background: var(--c-surface);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-sm);
}
.mde-pdf-colorctl {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.9rem;
}
.mde-pdf-colorctl input[type="color"] {
    width: 2.2rem;
    height: 1.6rem;
    padding: 0;
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    cursor: pointer;
}
.mde-pdf-colorctl input[type="color"]:disabled { opacity: 0.4; cursor: not-allowed; }
.mde-pdf-toggles { gap: 0.3rem; }
.mde-pdf-tg {
    width: 2rem;
    height: 1.9rem;
    appearance: none;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: var(--c-text-2);
    background: var(--c-surface);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-sm);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mde-pdf-tg:hover { border-color: var(--c-blue); color: var(--c-blue-strong); }
.mde-pdf-tg[aria-pressed="true"] { color: #fff; background: var(--c-blue); border-color: var(--c-blue); }
.mde-pdf-tg[title="粗體"] { font-weight: 800; }
.mde-pdf-tg[title="斜體"] { font-style: italic; }
.mde-pdf-tg[title="底線"] { text-decoration: underline; }

/* ---------------- 預覽舞台(Paged.js 渲染處) ---------------- */
.mde-pdf-warnings {
    flex: 0 0 auto;
    margin: 0.8rem 1.2rem 0;
    padding: 0.6rem 0.9rem;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--c-done);
    background: var(--c-bg-soft);
    border: var(--hair) solid var(--c-line);
    border-radius: var(--radius-sm);
}
.mde-pdf-warnings[hidden] { display: none; }
.mde-pdf-warnings.is-warning { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn); }
.mde-pdf-warnings p { margin: 0 0 0.3rem; font-weight: 700; }
.mde-pdf-warnings ul { margin: 0; padding-left: 1.4rem; }

.mde-pdf-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1.5rem;
    background: var(--c-surface-2);
}
/* Paged.js 每頁外觀(螢幕預覽):白底、置中、陰影 */
.mde-pdf-stage .pagedjs_page {
    margin: 0 auto 1.5rem;
    background: #fff;
    box-shadow: var(--shadow-pop);
}

/* ---------------- 列印:僅輸出 Paged.js 頁面,其餘隱藏 ---------------- */
/* 僅在 PDF 預覽開啟時(area 非 hidden)才隔離列印;平時 Ctrl+P 不受影響 */
@media print {
    body:has(#mde-pdf-area:not([hidden])) { margin: 0 !important; height: auto !important; display: block !important; }
    body:has(#mde-pdf-area:not([hidden])) > *:not(#mde-pdf-area) { display: none !important; }

    #mde-pdf-area { position: static !important; padding: 0 !important; display: block !important; }
    .mde-pdf-overlay,
    .mde-pdf-panel--settings,
    .mde-pdf-panel-head,
    .mde-pdf-warnings { display: none !important; }

    .mde-pdf-panel--preview {
        position: static !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
    }
    .mde-pdf-stage {
        overflow: visible !important;
        padding: 0 !important;
        background: none !important;
    }
    .mde-pdf-stage .pagedjs_page {
        margin: 0 !important;
        box-shadow: none !important;
    }
}