/* css/merge/merge.css - Styles spécifiques à l'outil Fusionner PDF */

body {
    background-color: #f8fafc;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Adjustments */
.main-header { border-bottom: 1px solid #e2e8f0; background: #ffffff; }
.header-container { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; max-width: 1200px; margin: 0 auto; }
.logo-img { height: 36px; object-fit: contain; }
.nav-links { display: flex; gap: 20px; font-weight: 600; align-items: center; }
.nav-link { color: #334155; text-decoration: none; transition: color 0.2s; }
.active-link { color: #e11d48; }

/* Upload View */
.upload-view { padding: 60px 20px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.main-title { font-size: 2.5rem; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
.main-subtitle { color: #64748b; font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

.upload-zone { max-width: 800px; margin: 40px auto; border: 3px dashed #cbd5e1; border-radius: 20px; padding: 60px 20px; background: white; transition: all 0.3s ease; cursor: pointer; }
.upload-zone:hover, .upload-zone.dragover { border-color: #e11d48; background-color: #fff1f2; }
.icon-pdf { font-size: 60px; color: #e11d48; margin-bottom: 25px; }
.drop-text { color: #94a3b8; margin-top: 20px; font-size: 0.95rem; }

.btn-upload { background-color: #e11d48; color: white; padding: 18px 40px; border-radius: 12px; font-size: 1.2rem; font-weight: 700; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: transform 0.2s, background 0.2s; box-shadow: 0 10px 15px -3px rgba(225, 29, 72, 0.3); }
.btn-upload:hover { background-color: #be123c; transform: translateY(-2px); }

/* Workspace View */
.workspace-view { display: none; flex-grow: 1; flex-direction: column; height: calc(100vh - 70px); }
@media(min-width: 768px) { .workspace-view { flex-direction: row; } }

.grid-container { flex-grow: 1; padding: 30px; overflow-y: auto; background-color: #f8fafc; }
.pdf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }

/* PDF Cards (Sortable items) */
.pdf-card { background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 15px; text-align: center; position: relative; cursor: grab; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; align-items: center; }
.pdf-card:active { cursor: grabbing; }
.pdf-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); border-color: #cbd5e1; }
.pdf-card canvas { max-width: 100%; height: 180px; object-fit: contain; border: 1px solid #f1f5f9; margin-bottom: 10px; background: #f8fafc; pointer-events: none; }
.pdf-card .filename { font-size: 0.85rem; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; font-weight: 500; }
.pdf-card .page-count { font-size: 0.75rem; color: #94a3b8; margin-top: 4px; }

/* Delete Button on Hover */
.pdf-card .delete-btn { position: absolute; top: -10px; right: -10px; background: #e11d48; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; border: 2px solid white; transition: background 0.2s; opacity: 0; z-index: 10; }
.pdf-card:hover .delete-btn { opacity: 1; }
.pdf-card .delete-btn:hover { background: #be123c; }

/* SortableJS Classes */
.sortable-ghost { opacity: 0.4; background-color: #f1f5f9; border: 2px dashed #cbd5e1; }
.sortable-drag { cursor: grabbing !important; }

/* Sidebar */
.action-sidebar { background: white; width: 100%; border-top: 1px solid #e2e8f0; padding: 25px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.05); }
@media(min-width: 768px) { .action-sidebar { width: 320px; border-top: none; border-left: 1px solid #e2e8f0; box-shadow: -4px 0 6px -1px rgba(0,0,0,0.05); justify-content: flex-start; } }
.sidebar-title { margin: 0 0 10px 0; font-size: 1.5rem; color: #0f172a; }
.info-box { background: #f1f5f9; padding: 15px; border-radius: 8px; font-size: 0.9rem; color: #475569; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; }
.info-icon { color: #3b82f6; margin-top: 2px; }

.btn-add-more { background: white; color: #0f172a; border: 2px solid #e2e8f0; padding: 15px; border-radius: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; }
.btn-add-more:hover { border-color: #cbd5e1; background: #f8fafc; }

.btn-merge { background: #e11d48; color: white; border: none; padding: 18px; border-radius: 12px; font-size: 1.1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.2s; box-shadow: 0 10px 15px -3px rgba(225, 29, 72, 0.3); width: 100%; margin-top: auto; }
.btn-merge:hover:not(:disabled) { background: #be123c; }
.btn-merge:disabled { background: #cbd5e1; cursor: not-allowed; box-shadow: none; color: #94a3b8; }

/* Loading Overlay */
.loading-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.9); z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; color: #0f172a; }
.spinner { border: 4px solid #f3f4f6; border-top: 4px solid #e11d48; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 20px; }
.loading-title { margin-bottom: 10px; font-size: 1.5rem; }
.loading-desc { color: #64748b; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }