/* ===========================================
 * MD 模式编辑器样式
 * 文件：office/edit_md.css
 * 2026-07-19 新增
 * =========================================== */

.em-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.em-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #0f172a;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    transition: background 0.15s;
}
.em-back:hover { background: #eff6ff; }
.em-title-text {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.em-topbar-actions { display: flex; gap: 8px; }
.em-topbar-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.em-topbar-btn:hover { background: #eff6ff; }

.em-wrap {
    padding: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.em-empty {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
}
.em-empty h2 { color: #0f172a; }

/* 横幅提示（Canvas 模式警告 / MD 模式提示） */
.em-banner {
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.65;
    border: 1px solid transparent;
}
.em-banner--warn {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #78350f;
}
.em-banner--info {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e3a8a;
}
body[data-theme="dark"] .em-banner--warn {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}
body[data-theme="dark"] .em-banner--info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.em-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.em-toolbar-left, .em-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.em-info { font-size: 12px; color: #64748b; }

/* 2026-07-25：文档元数据行（标题 / 权限 / 分类 可编辑） */
.em-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.em-form-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}
.em-form-input {
    padding: 6px 10px;
    font-size: 13px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.em-form-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.em-form-title {
    flex: 1 1 240px;
    min-width: 200px;
    font-weight: 600;
}
.em-form-class-name {
    flex: 0 0 auto;
    min-width: 120px;
    background: #f8fafc;
    cursor: default;
}
.em-form-select {
    padding: 6px 10px;
    font-size: 13px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    font-weight: 600;
}
.em-form-select:focus {
    border-color: #2563eb;
}
.em-stat {
    font-size: 12px;
    color: #64748b;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 8px;
    font-weight: 600;
}
.em-btn {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.em-btn-ghost {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.3);
    color: #475569;
}
.em-btn-ghost:hover {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.5);
}
.em-btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.em-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.em-textarea {
    width: 100%;
    min-height: calc(100vh - 240px);
    padding: 18px 20px;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
    font-size: 14px;
    line-height: 1.7;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.em-textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.em-status {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    display: none;
    z-index: 9999;
}
.em-status.ok { display: block; background: #10b981; color: #ffffff; }
.em-status.err { display: block; background: #ef4444; color: #ffffff; }
.em-status.info { display: block; background: #0f172a; color: #ffffff; }

body[data-theme="dark"] .em-topbar { background: rgba(15, 23, 42, 0.92); border-bottom-color: rgba(148, 163, 184, 0.2); }
body[data-theme="dark"] .em-title-text { color: #e2e8f0; }
body[data-theme="dark"] .em-back { background: rgba(30, 41, 59, 0.7); border-color: rgba(148, 163, 184, 0.25); color: #e2e8f0; }
body[data-theme="dark"] .em-topbar-btn { background: rgba(30, 41, 59, 0.7); border-color: rgba(148, 163, 184, 0.25); color: #e2e8f0; }
body[data-theme="dark"] .em-toolbar { background: #1e293b; border-color: rgba(148, 163, 184, 0.2); }
body[data-theme="dark"] .em-info { color: #94a3b8; }
body[data-theme="dark"] .em-stat { background: #0f172a; color: #94a3b8; }
body[data-theme="dark"] .em-btn-ghost { background: #1e293b; border-color: rgba(148, 163, 184, 0.25); color: #cbd5e1; }
body[data-theme="dark"] .em-textarea { background: #1e293b; border-color: rgba(148, 163, 184, 0.25); color: #e2e8f0; }

/* ===========================================
 * MD 渲染样式（view_pdf_html.css 中已加，这里补充列表嵌套/表格细节）
 * =========================================== */
.vp-md-source .vp-md-h1, .vp-md-source .vp-md-h2, .vp-md-source .vp-md-h3, .vp-md-source .vp-md-h4 {
    margin: 18px 0 10px;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.4;
}
.vp-md-source .vp-md-h1 { font-size: 1.8em; border-bottom: 2px solid rgba(148, 163, 184, 0.3); padding-bottom: 8px; }
.vp-md-source .vp-md-h2 { font-size: 1.45em; border-bottom: 1px solid rgba(148, 163, 184, 0.2); padding-bottom: 6px; }
.vp-md-source .vp-md-h3 { font-size: 1.22em; }
.vp-md-source .vp-md-h4 { font-size: 1.08em; }
.vp-md-source .vp-md-p {
    margin: 10px 0;
    line-height: 1.75;
    color: #1e293b;
}
.vp-md-source .vp-md-list {
    list-style: none;
    padding-left: 24px;
    margin: 8px 0;
    counter-reset: vp-md-ol;
}
.vp-md-source ol.vp-md-list { counter-reset: vp-md-ol; }
.vp-md-source ol.vp-md-list > .vp-md-li { counter-increment: vp-md-ol; }
.vp-md-source ol.vp-md-list > .vp-md-li::before {
    content: counter(vp-md-ol) ".";
    position: absolute;
    left: 0;
    width: 22px;
    text-align: right;
    color: #2563eb;
    font-weight: 700;
}
.vp-md-source ul.vp-md-list > .vp-md-li::before {
    content: "●";
    position: absolute;
    left: 4px;
    color: #64748b;
    font-size: 0.85em;
}
.vp-md-source .vp-md-li {
    position: relative;
    padding: 2px 0 2px 22px;
    margin: 0;
    line-height: 1.7;
}
.vp-md-source .vp-md-list .vp-md-list { margin: 4px 0; }
.vp-md-source .vp-md-quote {
    margin: 12px 0;
    padding: 10px 16px;
    background: rgba(148, 163, 184, 0.08);
    border-left: 4px solid #94a3b8;
    border-radius: 0 8px 8px 0;
    color: #475569;
    font-style: italic;
}
.vp-md-source .vp-md-code {
    display: block;
    margin: 12px 0;
    padding: 12px 16px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
}
.vp-md-source .vp-md-inline-code {
    padding: 1px 6px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 4px;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.92em;
    color: #db2777;
}
.vp-md-source .vp-md-table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
}
.vp-md-source .vp-md-table th,
.vp-md-source .vp-md-table td {
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    line-height: 1.5;
}
.vp-md-source .vp-md-table th {
    background: #f1f5f9;
    font-weight: 700;
    color: #0f172a;
}
.vp-md-source .vp-md-table tbody tr:nth-child(even) { background: #fafbfc; }
.vp-md-source .vp-md-hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.5), transparent);
    margin: 20px 0;
}
.vp-md-source .vp-md-link {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body[data-theme="dark"] .vp-md-source .vp-md-h1,
body[data-theme="dark"] .vp-md-source .vp-md-h2,
body[data-theme="dark"] .vp-md-source .vp-md-h3,
body[data-theme="dark"] .vp-md-source .vp-md-h4 { color: #e2e8f0; }
body[data-theme="dark"] .vp-md-source .vp-md-p { color: #cbd5e1; }
body[data-theme="dark"] .vp-md-source .vp-md-quote { background: rgba(148, 163, 184, 0.1); color: #94a3b8; }
body[data-theme="dark"] .vp-md-source .vp-md-table { background: #1e293b; border-color: rgba(148, 163, 184, 0.2); }
body[data-theme="dark"] .vp-md-source .vp-md-table th { background: #0f172a; color: #e2e8f0; }
body[data-theme="dark"] .vp-md-source .vp-md-table td { border-color: rgba(148, 163, 184, 0.2); }
body[data-theme="dark"] .vp-md-source .vp-md-table tbody tr:nth-child(even) { background: rgba(148, 163, 184, 0.04); }
body[data-theme="dark"] .vp-md-source .vp-md-inline-code { background: rgba(148, 163, 184, 0.15); color: #f472b6; }