/* app/webroot/css/pdf/pdf.css */

/* PDF二级目录下的共同背景色 (强制全屏铺满背景) */
#content.Container {
    background-color: #f8fafc;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 20px 20px;
    min-height: 100vh;
    
    /* 让容器占满100%屏幕宽度 */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 30px 0 60px 0 !important;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 确保内部容器背景透明 */
.Main {
    background: transparent;
}

/* =========================================
   PDF ツール共通 CSS (Compress, Split, Merge 等)
========================================= */

/* 1. 工具切换 Tab 样式 (为未来做准备) */
.pdf-tabs-container { display: flex; gap: 10px; margin-bottom: 25px; background: #f1f5f9; padding: 6px; border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.pdf-tabs-container::-webkit-scrollbar { display: none; }
.pdf-tab { padding: 12px 24px; text-decoration: none; color: #64748b; font-weight: bold; font-size: 15px; border-radius: 8px; transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; text-align: center; }
.pdf-tab:hover { color: #334155; background: #e2e8f0; }
/* PDF 主色调：红色系 */
.pdf-tab.active { background: #ffffff; color: #DC2626; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tab-br { display: inline; }
.tab-br::before { content: " "; }

/* 2. 页面与面包屑布局 */
.heic-breadcrumb-container { width: 100%; max-width: 1080px; margin: 0 auto 15px auto; padding: 0 20px; box-sizing: border-box; text-align: left; }
.heic-wrapper, .heic-wrapper * { box-sizing: border-box; }
html body div#main.heic-wrapper { font-family: sans-serif; color: #334155; text-align: left; width: 100% !important; max-width: 1080px !important; margin: 0 auto !important; float: none !important; padding: 0 20px !important; overflow-x: hidden; }
.heic-wrapper p, .heic-wrapper div, .heic-wrapper span, .heic-wrapper li { word-wrap: break-word; overflow-wrap: break-word; }
html body div#main.heic-wrapper h1::before, html body div#main.heic-wrapper h1::after { display: none !important; content: none !important; }
.left-align-text { text-align: left; line-height: 1.8; }

/* 3. 转换设置区域 */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-bottom: 25px; width: 100%; }
.conversion-settings { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: bold; background: #ffffff; padding: 12px 15px; border-radius: 8px; border: 1px solid #cbd5e1; box-shadow: 0 1px 2px rgba(0,0,0,0.05); width: 100%; }
.conversion-settings span { font-size: 13px; color: #475569; white-space: nowrap; }
.format-select { padding: 6px 10px; border-radius: 6px; border: 1px solid #cbd5e1; background: #f8fafc; font-size: 14px; cursor: pointer; flex: 1; min-width: 0; outline: none; }
.format-select:focus { border-color: #DC2626; }

/* 4. 拖拽上传区 & 进度条 */
#drop-zone { border: 3px dashed #cbd5e1; border-radius: 12px; padding: 40px 20px; text-align: center; background-color: #ffffff; transition: all 0.3s ease; cursor: pointer; margin-bottom: 25px; width: 100%; }
#drop-zone.dragover { background-color: #FEF2F2; border-color: #DC2626; transform: scale(1.02); }
#overall-progress-container { display: none; margin-bottom: 25px; background: #e2e8f0; border-radius: 8px; overflow: hidden; height: 24px; position: relative; width: 100%; }
#overall-progress-bar { height: 100%; background: #DC2626; width: 0%; transition: width 0.3s ease; }
#overall-progress-text { position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-size: 12px; line-height: 24px; font-weight: bold; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* 5. 文件列表与状态徽章 */
.file-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; width: 100%; }
.file-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); width: 100%; }
.file-info { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0; overflow: hidden; }
/* PDF 专属的图标替代原本的图片缩略图 */
.file-pdf-icon { width: 48px; height: 48px; border-radius: 6px; background: #FEF2F2; color: #DC2626; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; border: 1px solid #fca5a5; }
.file-name { font-weight: bold; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; color: #1e293b; }
.file-size { font-size: 12px; color: #64748b; margin-top: 4px; }
.status-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; white-space: nowrap; }
.status-pending { background: #f1f5f9; color: #64748b; }
.status-converting { background: #fef08a; color: #854d0e; animation: pulse 1.5s infinite; }
.status-done { background: #dcfce3; color: #166534; }
.status-error { background: #fee2e2; color: #991b1b; }

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* 6. 按钮 */
.dl-btn { padding: 8px 16px; background: #DC2626; color: #ffffff !important; text-decoration: none; border-radius: 6px; font-size: 13px; font-weight: bold; transition: 0.2s; display: inline-block; cursor: pointer; border: none; white-space: nowrap; }
.dl-btn:hover { background: #B91C1C; color: #ffffff !important; }

.bulk-dl-btn { width: 100%; padding: 15px; background: #10b981; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.2s; display: none; text-align: center; }
.bulk-dl-btn:hover { background: #059669; }
.bulk-dl-btn svg { vertical-align: middle; margin-right: 8px; margin-top: -4px; }

/* 7. SEO 文章排版 */
.seo-h2 { font-size:22px; color:#1e293b; margin-top:40px; margin-bottom:16px; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; font-weight:bold; }
.seo-h3 { font-size:18px; color:#334155; margin-top:25px; margin-bottom:12px; border-left: 4px solid #DC2626; padding-left: 10px; font-weight:bold; }
.seo-p { margin-bottom:16px; font-size:15px; color:#4a5568; line-height:1.8; }
.seo-ul { margin-bottom:20px; padding-left:25px; color:#4a5568; line-height:1.8; }
.seo-ul li { margin-bottom:8px; }

/* 8. 手机端响应式 */
@media screen and (max-width: 600px) {
    .pdf-tabs-container { gap: 4px; padding: 4px; justify-content: space-between; overflow-x: hidden; }
    .pdf-tab { padding: 8px 2px; font-size: 11px; flex: 1; white-space: normal; min-width: 0; line-height: 1.3; }
    .tab-br { display: block; margin-top: 2px; }
    .tab-br::before { content: ""; }
    .settings-grid { grid-template-columns: 1fr; gap: 10px; }
    .file-item { flex-direction: column; align-items: flex-start; gap: 12px; }
    .file-info { width: 100%; }
    .file-item > div:last-child { width: 100%; justify-content: space-between; }
    #drop-zone { padding: 30px 10px; }
}