/* =========================================
   ProMaking Editor UI (App Like Feel)
   ========================================= */

/* Toolbar Styling - Mobile Wrapping (2-3 Lines) */
.editor-actionbar {
    display: flex;
    align-items: center;
    justify-content: center; /* Buttons ko center mein rakhega */
    flex-wrap: wrap;        /* Mobile par buttons niche shift ho jayenge */
    gap: 10px;
    background: #ffffff;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.tool-btn {
    background: #f8fafc; border: 1.5px solid var(--border-color);
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px;
    transition: 0.2s; color: var(--text-main); flex-shrink: 0;
}
.tool-btn:hover { background: #fff; border-color: var(--primary); color: var(--primary); }
.tool-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 10px rgba(0,123,134,0.3); }

/* Shape Selector Dropdown */
.shape-select {
    outline: none; font-family: 'Inter', sans-serif; cursor: pointer;
}

/* =========================================
   Editor Stage - Full Scroll & VIP Zoom Fix
   ========================================= */
.editor-stage {
    width: 100%;
    height: calc(100vh - 220px); /* Screen ke hisab se height */
    overflow: auto !important;   /* Dono side scroll ON */
    background: #e2e8f0;
    padding: 20px;
    display: block;              /* Center rakhne ke liye block zaroori hai */
    text-align: center;          /* PC par PDF ko center rakhega */
    -webkit-overflow-scrolling: touch; /* Mobile smooth scroll */
    border-radius: 16px;
}

/* Canvas Wrapper - Isme hi sara kamaal hai */
.page-wrap {
    margin: 0 auto;
    position: relative;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    
    /* VIP FIX: inline-block isse PDF ko screen se bahar jane dega taki scroll ho sake */
    display: inline-block; 
    vertical-align: top;
    max-width: none !important; 
    transition: width 0.2s ease; /* Zoom smooth dikhega */
}

/* Jab 'Select' tool ho toh scroll karne do */
.page-wrap.scrollable {
    touch-action: auto !important;
}

/* Jab 'Pen/Draw' tool ho toh scroll lock karo taki drawing sahi ho */
.page-wrap.drawing-mode {
    touch-action: none !important;
}

.page-wrap canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
}

canvas.render { position: relative; z-index: 1; }
canvas.overlay { position: absolute; top:0; left:0; z-index: 10; }
canvas.preview { position: absolute; top:0; left:0; z-index: 11; pointer-events: none; }
.overlay-host { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

/* Floating Elements */
.floating { position: absolute; border: 1.5px dashed transparent; cursor: move; padding: 2px; outline: none; z-index: 30; pointer-events: auto; }
.floating.active { border-color: var(--primary); background: rgba(0,123,134,0.05); }
.floating .handle { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; background: var(--primary); border: 2px solid white; border-radius: 50%; cursor: nwse-resize; display: none; }
.floating.active .handle { display: block; }