/* 2026-07-21 工具栏美化（funny_pdf.php 顶部 dialog_save）
 * 设计目标（v2 改造）：
 *   1. 现代化：渐变背景 + 阴影 + 圆角
 *   2. 信息层次：左 = 导航 / 中 = 文档设置下拉 / 右 = 主操作 + 更多下拉
 *   3. 工具栏不再一次性堆砌所有字段，文档信息收纳到下拉面板中
 *   4. 状态反馈：hover / disabled / active 都有视觉反馈
 *   5. 暗色友好：背景与暗色主题协调
 */

:root {
    --pdf-toolbar-bg: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
    --pdf-toolbar-border: #d6dce5;
    --pdf-toolbar-text: #1f2937;
    --pdf-toolbar-muted: #6b7280;
    --pdf-toolbar-accent: #2563eb;
    --pdf-toolbar-accent-hover: #1d4ed8;
    --pdf-toolbar-success: #16a34a;
    --pdf-toolbar-success-hover: #15803d;
    --pdf-toolbar-purple: #8b5cf6;
    --pdf-toolbar-purple-hover: #7c3aed;
    --pdf-toolbar-radius: 8px;
    --pdf-toolbar-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.06);
    --pdf-toolbar-z: 100;
}

/* 主容器：玻璃感 + 顶部分隔线 + 阴影 + 高度适配（两段布局：左+右） */
.dialog_save {
    position: fixed;
    padding: 8px 16px;
    background: var(--pdf-toolbar-bg);
    border-bottom: 1px solid var(--pdf-toolbar-border);
    box-shadow: var(--pdf-toolbar-shadow);
    width: 100%;
    height: var(--pdf_topbar_height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    top: 0;
    z-index: var(--pdf-toolbar-z);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--pdf-toolbar-text);
}

/* 中间：标题区域 + 文档设置下拉（合并显示） */
.dialog_save__title-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    justify-content: center;
    /* 标题输入框最多占据中间区域 */
}

.dialog_save__title-label {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--pdf-toolbar-muted);
    margin: 0;
    padding: 0;
}

#title {
    flex: 1 1 200px;        /* 2026-07-25：改 basis=200px，让位给右侧的"权限 select + 分类 input + btn"内联控件 */
    min-width: 100px;
    max-width: 320px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    background: #ffffff;
    color: var(--pdf-toolbar-text);
    transition: all 0.15s ease;
    box-sizing: border-box;
}

#title:focus {
    outline: none;
    border-color: var(--pdf-toolbar-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#title::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* 文档设置下拉触发器（紧凑版） */
.dialog_save__title-area .dialog_save__dropdown__trigger {
    height: 36px;
    padding: 0 10px;
    background: #ffffff;
    flex-shrink: 0;
}

.dialog_save__title-area .dialog_save__dropdown__panel {
    min-width: 280px;
}

/* 左侧：导航链接 */
.dialog_save__links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.dialog_save__links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    color: var(--pdf-toolbar-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.dialog_save__links a:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--pdf-toolbar-accent);
}

/* 右侧：主操作 */
.dialog_save__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 通用按钮基础样式（覆盖浏览器默认） */
.dialog_save input[type="button"],
.dialog_save button {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: var(--pdf-toolbar-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-family: inherit;
}

.dialog_save input[type="button"]:hover,
.dialog_save button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

.dialog_save input[type="button"]:active,
.dialog_save button:active {
    transform: translateY(0);
}

/* 主操作：保存/另存（绿色强调） */
.dialog_save #save_file,
.dialog_save #save_as {
    background: var(--pdf-toolbar-success);
    color: #ffffff;
    border-color: var(--pdf-toolbar-success);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.2);
}

.dialog_save #save_file:hover,
.dialog_save #save_as:hover {
    background: var(--pdf-toolbar-success-hover);
    border-color: var(--pdf-toolbar-success-hover);
    box-shadow: 0 4px 8px rgba(22, 163, 74, 0.25);
}

/* 列宽调整按钮：进入模式时高亮蓝色 */
.dialog_save #btn_table_col_resize {
    background: #ffffff;
    border: 1px dashed #94a3b8;
    color: var(--pdf-toolbar-muted);
}

.dialog_save #btn_table_col_resize:hover {
    background: #f1f5f9;
    border-color: var(--pdf-toolbar-accent);
    color: var(--pdf-toolbar-accent);
}

/* 链接型按钮：MD 模式 / 分享 / 授权 / 历史 */
.dialog_save__actions > a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--pdf-toolbar-muted);
    transition: all 0.15s ease;
    background: transparent;
    white-space: nowrap;
}

.dialog_save__actions > a:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--pdf-toolbar-accent);
}

.dialog_save__actions > a[data-disabled="1"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* 分享按钮：紫色高亮强调 */
.dialog_save__actions > a#link_share {
    color: var(--pdf-toolbar-purple);
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.05);
}

.dialog_save__actions > a#link_share:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: var(--pdf-toolbar-purple);
    color: var(--pdf-toolbar-purple-hover);
}

/* ============================================================
 * 工具栏下方：.editor 画布容器必须避开 fixed 工具栏
 * ============================================================ */
.dialog_save + .editor {
    /* 2026-07-21 修复：工具栏 fixed 在顶部, .editor 容器默认从页面顶部开始, 会和工具栏重叠
       用 padding-top 撑出空间, 不影响内部画布定位 */
    padding-top: var(--pdf_topbar_height);
    box-sizing: border-box;
}

/* ============================================================
 * 工具栏内图标（SVG，避免 emoji 字体兼容问题）
 * ============================================================ */

/* 文档图标（16x18，描边样式），通过 mask 让颜色跟随 currentColor */
.dialog_save__icon-file {
    display: inline-block;
    width: 16px;
    height: 18px;
    vertical-align: -3px;
    margin-right: 2px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'><path d='M2 1 H10 L14 5 V17 H2 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><path d='M10 1 V5 H14' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><path d='M4.5 9 H11.5 M4.5 12 H11.5 M4.5 15 H8.5' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'><path d='M2 1 H10 L14 5 V17 H2 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><path d='M10 1 V5 H14' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><path d='M4.5 9 H11.5 M4.5 12 H11.5 M4.5 15 H8.5' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/></svg>") no-repeat center / contain;
    opacity: 0.85;
}
#Msg {
    position: fixed;
    top: calc(var(--pdf_topbar_height) + 8px);
    right: 20px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    z-index: calc(var(--pdf-toolbar-z) + 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 2026-07-25：工具栏内联控件（权限 select / 分类 input + btn）—— 直接展示，不再折叠到"设置"下拉
 * 设计目标：与标题 input 同高同边框风格，保持视觉一致；窄屏进一步压缩 */
.dialog_save__title-label--inline {
    margin-left: 12px;       /* 第一个 inline label 紧贴 #title（用 :first-of-type 控制） */
    font-size: 14px;
    cursor: default;
}
/* 第一个 inline label 不需要左侧 margin（紧贴 #title） */
.dialog_save__title-label--inline:first-of-type,
.dialog_save__title-area > .dialog_save__title-label--inline:nth-of-type(2) {
    margin-left: 12px;
}

.dialog_save__inline-select {
    flex-shrink: 0;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: var(--pdf-toolbar-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    box-sizing: border-box;
    min-width: 88px;
}
.dialog_save__inline-select:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}
.dialog_save__inline-select:focus {
    outline: none;
    border-color: var(--pdf-toolbar-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.dialog_save__inline-input {
    flex-shrink: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    color: var(--pdf-toolbar-text);
    font-size: 13px;
    cursor: default;
    box-sizing: border-box;
    min-width: 110px;
    max-width: 180px;
}

.dialog_save__inline-btn {
    flex-shrink: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: var(--pdf-toolbar-text);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    box-sizing: border-box;
    line-height: 1;
}
.dialog_save__inline-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* ============================================================
 * 下拉组件（dropdown）
 * 复用样式：trigger + panel
 * ============================================================ */
.dialog_save__dropdown {
    position: relative;
    display: inline-block;
}

.dialog_save__dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: var(--pdf-toolbar-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
}

.dialog_save__dropdown__trigger:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.dialog_save__dropdown__trigger--icon {
    width: 36px;
    padding: 0;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--pdf-toolbar-muted);
}

.dialog_save__dropdown.is-open > .dialog_save__dropdown__trigger {
    background: #eef2ff;
    border-color: var(--pdf-toolbar-accent);
    color: var(--pdf-toolbar-accent);
}

.dialog_save__caret {
    font-size: 10px;
    line-height: 1;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.dialog_save__dropdown.is-open .dialog_save__caret {
    transform: rotate(180deg);
}

/* 下拉面板：默认隐藏，点击 trigger 后由 JS 加 is-open class 显示 */
.dialog_save__dropdown__panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 320px;
    background: #ffffff;
    border: 1px solid var(--pdf-toolbar-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    padding: 8px;
    z-index: calc(var(--pdf-toolbar-z) + 2);
    flex-direction: column;
    gap: 4px;
    /* 弹出动画 */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dialog_save__dropdown.is-open > .dialog_save__dropdown__panel {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* "更多" 弹窗：靠右对齐 */
.dialog_save__dropdown__panel--right {
    left: auto;
    right: 0;
    min-width: 220px;
}

/* 文档设置面板中的字段行 */
.dialog_save__dropdown__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.dialog_save__dropdown__row:hover {
    background: #f8fafc;
}

.dialog_save__dropdown__row > label {
    flex-shrink: 0;
    width: 48px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pdf-toolbar-muted);
    text-align: right;
}

.dialog_save__dropdown__row input[type="text"],
.dialog_save__dropdown__row select {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #ffffff;
    color: var(--pdf-toolbar-text);
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.dialog_save__dropdown__row input[type="text"]:focus,
.dialog_save__dropdown__row select:focus {
    outline: none;
    border-color: var(--pdf-toolbar-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.dialog_save__dropdown__row input[type="text"][readonly] {
    background: #f9fafb;
    color: var(--pdf-toolbar-text);
}

.dialog_save__dropdown__row input[type="button"],
.dialog_save__dropdown__row button {
    flex-shrink: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: var(--pdf-toolbar-text);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dialog_save__dropdown__row input[type="button"]:hover,
.dialog_save__dropdown__row button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.dialog_save__id {
    flex: 1;
    color: var(--pdf-toolbar-accent);
    font-weight: 600;
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

/* "更多" 弹窗里的链接项 */
.dialog_save__dropdown__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--pdf-toolbar-text);
    text-decoration: none;
    transition: all 0.15s ease;
}

.dialog_save__dropdown__link:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--pdf-toolbar-accent);
}

.dialog_save__dropdown__link[data-disabled="1"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* 暗色模式 */
body[data-theme="dark"] .dialog_save {
    --pdf-toolbar-bg: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    --pdf-toolbar-border: #374151;
    --pdf-toolbar-text: #e5e7eb;
    --pdf-toolbar-muted: #9ca3af;
    background: var(--pdf-toolbar-bg);
    color: var(--pdf-toolbar-text);
}

body[data-theme="dark"] .dialog_save__dropdown__panel,
body[data-theme="dark"] .dialog_save__dropdown__link {
    background: #1f2937;
    color: var(--pdf-toolbar-text);
    border-color: #374151;
}

body[data-theme="dark"] .dialog_save__dropdown__row input[type="text"],
body[data-theme="dark"] .dialog_save__dropdown__row select {
    background: #111827;
    color: #e5e7eb;
    border-color: #374151;
}

body[data-theme="dark"] .dialog_save input[type="button"],
body[data-theme="dark"] .dialog_save button {
    background: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
}

body[data-theme="dark"] .dialog_save input[type="button"]:hover,
body[data-theme="dark"] .dialog_save button:hover {
    background: #374151;
    border-color: #4b5563;
}

body[data-theme="dark"] .dialog_save__dropdown__row:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* 响应式：窄屏进一步压缩 */
@media (max-width: 1280px) {
    .dialog_save__links a {
        padding: 6px 8px;
        font-size: 12px;
    }
    .dialog_save__actions > a {
        padding: 0 8px;
    }
    .dialog_save #save_file,
    .dialog_save #save_as {
        padding: 0 10px;
    }
    #title {
        max-width: 220px;
        flex-basis: 160px;
    }
    .dialog_save__title-label {
        display: none;  /* 1280px 以下隐藏"标题"二字 */
    }
    /* 1280px 以下：内联 label 仅显示图标（label 内的 emoji 文字已通过 content 简化为 emoji）
       这里直接隐藏文本，保留 emoji label 的紧凑 */
    .dialog_save__inline-btn {
        padding: 0 8px;
        font-size: 11px;
    }
    .dialog_save__inline-input {
        min-width: 90px;
        max-width: 140px;
    }
}

@media (max-width: 1024px) {
    .dialog_save {
        padding: 6px 10px;
        gap: 8px;
    }
    .dialog_save #btn_table_col_resize {
        padding: 0 8px;
    }
    .dialog_save__actions > a#link_md_mode {
        display: none;  /* 1024px 以下 MD 模式按钮进一步隐藏 */
    }
    .dialog_save__inline-btn:first-of-type {
        display: none;  /* 1024px 以下隐藏"选择"按钮（直接点 readonly input 弹窗） */
    }
}