/* public/assets/css/design/print-layout.css */
.prt-tool-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #6366f1; --p-secondary: #8b5cf6; --p-text: #0f172a; width: 100%; max-width: 1400px; margin: 0 auto; background: var(--p-bg); border-radius: 24px; padding: 24px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); transition: 0.3s; box-sizing: border-box; }
.prt-header-main { font-size: 1.5rem; font-weight: 600; color: var(--p-text); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; }
.prt-badge { background: #ede9fe; color: #6d28d9; padding: 4px 12px; border-radius: 30px; font-size: 0.8rem; font-weight: 500; }
.prt-subtitle { color: #64748b; font-size: 0.95rem; padding-bottom: 16px; border-bottom: 1px solid var(--p-border); margin-bottom: 24px; text-align: center; }

@media(max-width: 900px) { .prt-tool-wrapper { padding: 16px; border-radius: 16px; } }

.prt-nav { display: flex; background: #f1f5f9; border-radius: 16px; padding: 6px; margin-bottom: 24px; overflow-x: auto; white-space: nowrap; gap: 8px; }
.prt-nav::-webkit-scrollbar { display: none; }
.prt-tab { flex: 1; text-align: center; padding: 12px 24px; font-size: 1rem; font-weight: 600; color: #64748b; cursor: pointer; border-radius: 12px; transition: 0.2s; border: none; background: transparent; }
.prt-tab:hover { color: var(--p-primary); background: rgba(99, 102, 241, 0.05); }
.prt-tab.active { background: #ffffff; color: var(--p-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.prt-page { display: none; animation: prtFadeIn 0.3s ease; }
.prt-page.active-page { display: block; }
@keyframes prtFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.prt-toolbar { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; background: #f8fafc; padding: 16px; border-radius: 16px; border: 1px solid var(--p-border); box-sizing: border-box; }
.prt-tool-group { display: flex; flex-direction: column; gap: 12px; background: #ffffff; padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0; flex: 1; min-width: 280px; box-sizing: border-box; }
.prt-tool-label { font-size: 0.85rem; font-weight: 700; color: #475569; text-transform: uppercase; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px; }
.prt-inline-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }

.prt-input, .prt-select { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; outline: none; font-size: 0.9rem; background: #ffffff; color: var(--p-text); transition: 0.2s; max-width: 100%; box-sizing: border-box; }
.prt-input:focus, .prt-select:focus { border-color: var(--p-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.prt-btn { padding: 10px 16px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s; background: #f1f5f9; color: #475569; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;}
.prt-btn:hover { background: #e2e8f0; }
.prt-btn.primary { background: var(--p-primary); color: white; }
.prt-btn.primary:hover { background: #4f46e5; box-shadow: 0 4px 10px rgba(99,102,241,0.3); }
.prt-btn.danger { background: #fee2e2; color: #ef4444; }
.prt-btn.danger:hover { background: #fca5a5; color: #b91c1c; }

.prt-canvas-area { background: repeating-conic-gradient(#f1f5f9 0% 25%, #ffffff 0% 50%) 50% / 20px 20px; padding: 32px; border-radius: 16px; border: 1px solid var(--p-border); display: flex; justify-content: center; overflow-x: auto; max-height: 70vh; box-shadow: inset 0 4px 10px rgba(0,0,0,0.02); margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.prt-canvas-wrap { background: #ffffff; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15); border: 1px solid #cbd5e1; transform-origin: top left; }
.prt-canvas-area canvas { display: block; }

.prt-info-panel { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; background: #f8fafc; padding: 16px 24px; border-radius: 16px; border: 1px solid var(--p-border); box-sizing: border-box;}
.prt-file-list { max-height: 150px; overflow-y: auto; background: #f1f5f9; border-radius: 12px; padding: 8px; margin-top: 12px; width: 100%; box-sizing: border-box; }
.prt-file-item { display: flex; justify-content: space-between; align-items: center; background: #ffffff; padding: 8px 12px; margin-bottom: 6px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 0.85rem; }

/* ========== 移动端重构排版 (核心修复区) ========== */
@media(max-width: 640px) {
    .prt-tool-group { padding: 12px; min-width: 100%; }
    
    /* 允许表单内联元素折行，但保持相互间隔，而不是强制100% */
    .prt-inline-row { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
    
    .prt-input, .prt-select { flex: 1 1 auto; min-width: 80px; padding: 8px; }
    .prt-btn { flex: 1 1 auto; min-width: 100px; padding: 8px 12px; }
    
    /* 恢复乘号“×”等分隔符的显示 */
    .prt-inline-row > span { display: inline-block; padding: 0 4px; color: #64748b; }

    /* 取消画布容器居中，防止因为缩放导致的左侧被裁剪 */
    .prt-canvas-area { padding: 12px; justify-content: flex-start; }
    
    /* 针对手机屏幕，智能缩放 Fabric Canvas 画布 */
    #prtLayoutPanel .prt-canvas-wrap, 
    #prtMergePanel .prt-canvas-wrap {
        zoom: 0.28; /* 将 A4 宽度 (1240px) 缩小到约 347px 宽度以适应手机屏幕 */
    }
    #prtSinglePanel .prt-canvas-wrap {
        zoom: 0.6; /* 单页标签适度缩小 */
    }
}

[data-theme="dark"] .prt-tool-wrapper { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .prt-nav, [data-theme="dark"] .prt-toolbar, [data-theme="dark"] .prt-info-panel { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .prt-tab { color: #94a3b8; }
[data-theme="dark"] .prt-tab:hover { background: rgba(99, 102, 241, 0.1); }
[data-theme="dark"] .prt-tab.active { background: #1e293b; color: #a78bfa; }
[data-theme="dark"] .prt-tool-group, [data-theme="dark"] .prt-file-item { background: #1e293b; border-color: #475569; }
[data-theme="dark"] .prt-tool-label { color: #cbd5e1; }
[data-theme="dark"] .prt-input, [data-theme="dark"] .prt-select { background: #0f172a; border-color: #475569; color: #f8fafc; }
[data-theme="dark"] .prt-btn { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .prt-btn:hover { background: #475569; }
[data-theme="dark"] .prt-btn.primary { background: var(--p-primary); color: white; }
[data-theme="dark"] .prt-btn.danger { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .prt-canvas-area { background: repeating-conic-gradient(#1e293b 0% 25%, #0f172a 0% 50%) 50% / 20px 20px; border-color: #475569; }
[data-theme="dark"] .prt-file-list { background: #0f172a; }