/* ================================
   PDF Organize Tool (Scoped)
================================ */


/* ================================
   NAVIGATION (NO CONFLICT)
================================ */

.desktop-nav,
.mobile-nav{
display:none;
}

/* show only when processing */
.tool-wrapper.processing .desktop-nav,
.tool-wrapper.processing .mobile-nav{
display:flex;
}

/* =========================
   DESKTOP ONLY
========================= */
@media (min-width:769px){

.tool-wrapper.processing .desktop-nav{
display:flex;
align-items:center;
gap:10px;
margin:10px 0;
}

.mobile-nav{
display:none !important;
}

}

/* =========================
   MOBILE ONLY
========================= */
@media (max-width:768px){

.desktop-nav{
display:none !important;
}

.tool-wrapper.processing .mobile-nav{
display:flex;
align-items:center;
gap:8px;
margin:10px 0;
}

}


/* FIX RTL sortable */
.pages-list{
direction:ltr;
}

[dir="rtl"] .page-card{
direction:rtl;
}


/* show when active */
.tool-wrapper [data-role="toolbar"],
.tool-wrapper [data-role="pages-container"],
.tool-wrapper [data-role="actions"]{
display:none;
}


/* pages grid */
.tool-wrapper .pages-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:16px;
margin-top:16px;
}


/* page card */
.tool-wrapper .page-card{
background:#fff;
border-radius:8px;
box-shadow:0 2px 4px rgba(0,0,0,.08);
overflow:hidden;
border:1px solid #e5e7eb;
position:relative;
transition:.2s;
will-change: transform;
transform: translateZ(0);
}

.page-card::after{
content:"🔍";
position:absolute;
top:8px;
right:8px;
font-size:14px;
opacity:.6;
}

.tool-wrapper .page-card.dragging{
opacity:.6;
transform: rotate(1deg) scale(0.98);
}

.tool-wrapper .page-card:hover{
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,.1);
}

.tool-wrapper .page-card.selected{
border:2px solid #0C7CA8;
}


.page-zoom-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
cursor:zoom-out;
}

.page-zoom-overlay canvas{
max-width:90vw;
max-height:90vh;
background:white;
box-shadow:0 30px 80px rgba(0,0,0,.4);
border-radius:8px;
}


.tool-wrapper .page-number{
position:absolute;
top:8px;
left:8px;
background:#0C7CA8;
color:#fff;
width:24px;
height:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:bold;
z-index:2;
}


/* canvas */
.tool-wrapper .page-canvas{
width:100%;
display:block;
background:#f9fafb;
}


/* =========================
   Toolbar layout FIX
========================= */

.toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:nowrap;
margin:15px 0;
}

.toolbar-left{
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
}

.toolbar-center{
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
}

.toolbar-right{
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
margin-left:auto;
}

.btn-toolbar{
flex:0 0 auto;
white-space:nowrap;
}

.toolbar-left label{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}

.toolbar *{
flex-shrink:0;
}

.tool-wrapper .toolbar-group{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.tool-wrapper .btn-toolbar{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 14px;
border-radius:6px;
border:none;
background:#f1f5f9;
cursor:pointer;
font-size:14px;
}

.tool-wrapper .btn-toolbar.primary{
background:#0C7CA8;
color:#fff;
}

.tool-wrapper .btn-toolbar.danger{
background:#ef4444;
color:#fff;
}


/* selection counter */
.tool-wrapper .selection-counter{
background:#0C7CA8;
color:#fff;
padding:4px 12px;
border-radius:20px;
font-size:13px;
}


/* loading */
.tool-wrapper [data-role="loading"]{
display:none;
text-align:center;
margin:20px 0;
color:#0C7CA8;
}

.tool-wrapper [data-role="loading"] i{
animation:spin 1s linear infinite;
}

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


/* =========================
   MOBILE FIX
========================= */

@media (max-width:768px){

.toolbar{
flex-wrap:wrap !important;
}

.toolbar-left,
.toolbar-center,
.toolbar-right{
flex-wrap:wrap !important;
width:100%;
margin-left:0;
}

.toolbar-group{
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
}

.btn-toolbar{
width:100%;
justify-content:center;
font-size:12px;
padding:8px 6px;
}

.selection-counter{
width:100%;
text-align:center;
}

.tool-wrapper .pages-list{
display:block;
overflow:hidden;
}

.tool-wrapper .page-card{
display:none;
width:100%;
max-width:100%;
}

.mobile-nav button{
width:44px;
height:40px;
border:none;
background:#0C7CA8;
color:white;
border-radius:6px;
}

.mobile-page-info{
flex:1;
display:flex;
align-items:center;
gap:6px;
justify-content:center;
}

.mobile-page-info input{
width:60px;
text-align:center;
padding:6px;
border:1px solid #ddd;
border-radius:6px;
}

.mobile-page-info span{
font-size:13px;
color:#555;
}

.mobile-nav button:disabled{
opacity:0.5;
cursor:not-allowed;
}

.page-card{
margin:10px auto;
width:95%;
}

}