@media print {
    body * {
        visibility: hidden;
    }
    #pdf-viewer, #pdf-viewer * {
        visibility: visible;
    }
    #pdf-viewer {
        position: absolute;
        left: 0;
        top: 0;
    }
}

:root {
    --primary-orange: #0084F0;
    --secondary-orange: #4a5fd9;
    --primary-green: #00C48C;
    --primary-blue: #4A9EFF;
    --text-black: #1D1D1D;
    --text-dark: #2D3748;
    --text-medium: #4A5568;
    --text-light: #A0AEC0;
    --white: #FFFFFF;
    --bg-body: #F7FAFC;
    --bg-canvas: #E8EDF2;
    --border-light: #E4E9F0;
    --border-medium: #CBD5E0;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Reset and Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Form layer on top of PDF for interactive fields */
.form-layer {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 1050; /* above canvases/text layer so inputs are clickable */
}
.form-layer .pdf-form-field,
.form-layer .pdf-form-checkbox,
.form-layer .pdf-form-radio,
.form-layer .pdf-form-select,
.form-layer .pdf-form-signature-placeholder,
.form-layer .pdf-form-signature-image,
.form-layer .annotation-field {
    pointer-events: auto;
}
.form-layer .pdf-form-field {
    position: absolute;
    font: 14px/1.2 Arial, sans-serif;
    color: #111;
    border: 1px solid #CBD5E0;
    border-radius: 4px;
    padding: 4px 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.form-layer .pdf-form-checkbox,
.form-layer .pdf-form-radio {
    position: absolute;
    width: 16px;
    height: 16px;
}
.form-layer .pdf-form-select {
    position: absolute;
    border: 1px solid #CBD5E0;
    border-radius: 4px;
    padding: 2px 4px;
    background: #fff;
}
.form-layer .pdf-form-signature-placeholder {
    position: absolute;
    border: 2px dashed #A0AEC0;
    border-radius: 6px;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    user-select: none;
}

/* ── field-text-input: drag handle + delete button ── */
.field-text-input {
    /* single-line input inside the text field overlay */
    flex: 1;
    min-width: 20px;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 4px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

.field-drag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 100%;
    cursor: grab;
    color: #4A9EFF;
    font-size: 13px;
    user-select: none;
    padding: 0 2px;
    flex-shrink: 0;
    opacity: 0.7;
    border-right: 1px solid #c5d9f5;
    transition: opacity 0.15s;
}
.field-drag-btn:hover  { opacity: 1; }
.field-drag-btn:active { cursor: grabbing; }

.field-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 100%;
    cursor: pointer;
    color: #e53935;
    font-size: 15px;
    font-weight: bold;
    user-select: none;
    padding: 0 2px;
    flex-shrink: 0;
    border-left: 1px solid #c5d9f5;
    opacity: 0.8;
    transition: opacity 0.15s, background 0.15s;
}
.field-delete-btn:hover  { opacity: 1; background: rgba(229,57,53,0.08); }

/* Hide drag/delete buttons in eSign fill mode */
body.esign-fill-mode .field-drag-btn,
body.esign-fill-mode .field-delete-btn { display: none !important; }

/* ── Universal Annotation Action Bar (#_ann-action-bar) ── */
#_ann-action-bar,
#_date-action-bar {
    position: absolute;
    z-index: 3000;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid #4A9EFF;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    overflow: hidden;
    pointer-events: auto;
    user-select: none;
}

#_ann-action-bar span,
#_date-action-bar span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 4px;
    flex-shrink: 0;
    transition: background 0.12s, opacity 0.12s;
}

.ann-action-drag  { cursor: grab !important; color: #4A9EFF; font-size: 13px; border-right: 1px solid #e2e8f0; }
.ann-action-drag:hover  { background: #f0f7ff; opacity: 1; }
.ann-action-drag:active { cursor: grabbing !important; }

.ann-action-replace { cursor: pointer; font-size: 14px; border-right: 1px solid #e2e8f0; }
.ann-action-replace:hover { background: #f0f7ff; }

.ann-action-delete { cursor: pointer; color: #e53935; font-size: 16px; font-weight: bold; }
.ann-action-delete:hover { background: rgba(229,57,53,0.08); }

/* Hide action bars in eSign fill mode */
body.esign-fill-mode #_ann-action-bar,
body.esign-fill-mode #_date-action-bar { display: none !important; }

/* Loading Screen Styles */
#loading-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f7fafc;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loading-card {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 500px;
    max-width: 90%;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    margin-top: 0;
}

.loading-progress-bar {
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 3px;
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
}

.loading-progress-fill {
    height: 100%;
    background-color: #EA003A;
    width: 30%;
    border-radius: 3px;
    animation: loadingProgress 2s ease-in-out infinite;
}

@keyframes loadingProgress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; margin-left: 25%; }
    100% { width: 100%; margin-left: 0; }
}

.productivity-tip {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.tip-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tip-content {
    flex: 1;
}

.tip-label {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.tip-text {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin: 0;
}
.form-layer .pdf-form-signature-image {
    position: absolute;
    object-fit: contain;
}

/* Top Toolbar Dropdown System Styles */
.top-dd-active .top-toolbar-labels,
.top-dd-active .top-toolbar-tools {
    display: none !important;
}

.top-dd-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    background: #FCFBFE;
    border-bottom: 1px solid var(--border-light);
    padding: 6px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.top-dd-row::-webkit-scrollbar {
    display: none;
}

.top-dd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #5B6B84;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.top-dd-trigger:hover {
    background-color: #F0F4F8;
    color: #5B6B84;
}

.top-dd-trigger.active {
    background-color: #0084F0;
    color: white;
    border-color: #0084F0;
}

.top-dd-trigger .top-dd-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.top-dd-trigger .top-dd-caret {
    font-size: 12px;
    margin-left: 2px;
}

.top-dd-panel {
    position: absolute;
    top: 100%;
    left: 8px;
    right: 8px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1600;
    display: none;
}

.top-dd-panel.open {
    display: block;
}

.top-dd-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px;
}

.top-dd-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #5B6B84;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.top-dd-action:hover {
    background-color: #F0F4F8;
    border-color: var(--border-medium);
}

/* Top Toolbar Dropdown System - Mobile Support */
@media (max-width: 1024px) {
    .top-toolbar.top-dd-active {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    .top-dd-row {
        padding-left: 0 !important;
        margin-left: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        scroll-behavior: smooth !important;
        white-space: nowrap !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    
    .top-dd-row::-webkit-scrollbar {
        display: none !important;
    }
    
    .top-dd-trigger {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        visibility: visible !important;
    }
    
    .top-dd-trigger:first-child {
        margin-left: 0 !important;
        padding-left: 8px !important;
    }
    
    /* Ensure Text category (first category) is visible */
    .top-dd-trigger[data-category="edit"] {
        order: -1 !important;
        margin-left: 0 !important;
        padding-left: 8px !important;
    }
    
    /* Panel positioning for mobile */
    .top-dd-panel {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 32px) !important;
    }
}

@media (max-width: 768px) {
    .top-dd-trigger {
        padding: 6px 8px !important;
        font-size: 12px !important;
        gap: 4px !important;
    }
}

@media (max-width: 480px) {
    .top-dd-trigger {
        padding: 4px 6px !important;
        font-size: 11px !important;
        gap: 3px !important;
    }
    
    .top-dd-trigger img {
        width: 14px !important;
        height: 14px !important;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-canvas); /* match canvas background to remove white footer */
    color: var(--text-dark);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    background-color: var(--bg-canvas);
    height: 100%;
}

/* Ensure overlay layers position relative to viewer */
.pdf-viewer { position: relative; }

/* =====================================================
   HEADER - Top Navigation Bar
   ===================================================== */
.navbar-brand {
  display: flex;
  align-items: center;
  padding-right: 16px;
  border-right: 1px solid var(--border-light);
}

.brand-logo {
  max-width: 160px;      /* desktop */
  width: 100%;
  height: auto;
}

/* PDF-editor app icon shown at the start of the header (white-stroked, so it sits
   on a brand-orange chip to stay visible against the white header). */
.editor-app-icon {
    width: 28px;
    height: 28px;
    padding: 6px;
    flex-shrink: 0;
    object-fit: contain;
    background: #0084F0;
    border-radius: 8px;
    box-sizing: content-box;

}

/* Two-line doc caption next to the editor icon:
   line 1 = file name, line 2 = status · pages · last edited. */
.doc-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;                       /* allow ellipsis inside flex column */
    line-height: 1.25;
}

.doc-caption-line2 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-medium);
    white-space: nowrap;
    overflow: hidden;
}
.doc-caption-line2 .sep {
    color: #CBD5E1;
}
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #10B981;                /* green = open/saved */
}
.status-dot.--draft { background: #F59E0B; }   /* amber = draft / unsaved changes */
.status-dot.--locked { background: #6B7280; }  /* gray = finalized/saved copy */

/* Tablet */
@media (max-width: 992px) {
  .brand-logo {
    max-width: 130px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .brand-logo {
    max-width: 110px;
  }
}

.header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-light);
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-xs);
    z-index: 2000; /* above main toolbar so popovers appear over it */
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-orange);
    text-decoration: none;
    letter-spacing: -0.3px;
}

.logo:hover {
    color: var(--secondary-orange);
}

.tabs {
    display: flex;
    gap: 0;
    height: 60px;
}

.tab {
    padding: 0 10px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-medium);
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    align-items: center;
}

.tab.active {
    color: var(--dark);
    border-bottom-color: var(--dark);
    background-color: #e6f7ee;
}

.tab:hover:not(.active) {
    color: var(--text-dark);
    background-color: #e6f7ee;
}



.document-title {
    font-size: 14px;
    font-weight: 600;
    padding: 0px;
    margin-top: -5px;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.header-left .document-title {
    margin-top: 0; /* inline beside the app icon — reset old stacked offset */
}

/* Two-line caption under the editor icon in the header:
   line 1 = file name (existing #document-title),
   line 2 = muted caption #document-meta-line (status · pages · last edited).
   Compact, ellipsis-safe, does not affect any other header layout. */
.document-meta-line {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    margin-top: 1px;
}

.header-zoom-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-zoom-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
}

.zoom-header-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    border-radius: 3px;
    transition: color 0.15s;
    line-height: 1;
}

.zoom-header-btn:hover {
    color: var(--text-dark);
}

#zoom-level {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    min-width: 40px;
    text-align: center;
}

.zoom-sep {
    width: 1px;
    height: 20px;
    background-color: var(--border-light);
    flex-shrink: 0;
}

.fit-page-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #E4E9F0;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dark);
    background: var(--white);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s;
}

.fit-page-btn:hover {
    border-color: #CBD5E1;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =====================================================
   TOP TOOLBAR (horizontal edit tools, below header)
   ===================================================== */
.top-toolbar {
    display: flex;
    flex-direction: column;
    background-color: #FCFBFE;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    z-index: 1500;
    overflow-x: auto;
    overflow-y: hidden;
}

.top-toolbar-labels,
.top-toolbar-tools {
    width: max-content;
    min-width: 100%;
}

.top-toolbar-labels {
    display: flex;
    align-items: center;
    padding: 4px 8px 0 8px;
    background: #FCFBFE;
    min-height: 20px;
}

.top-toolbar-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    min-height: 40px;
}

.top-toolbar::-webkit-scrollbar {
    height: 4px;
}
.top-toolbar::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
}

.top-toolbar-label {
    font-size: 10px;
    font-weight: 600;
    color: #8494A7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0;
    line-height: 16px;
    white-space: nowrap;
    text-align: center;
}

.top-toolbar-sep {
    width: 1px;
    height: 20px;
    background-color: var(--border-light);
    margin: 0 4px;
    flex-shrink: 0;
}

.top-tool-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: #5B6B84;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

.top-tool-btn::-webkit-details-summary,
.top-tool-btn::-moz-focus-inner {
    border: none !important;
    padding: 0 !important;
}

.top-tool-btn:hover {
    background-color: #F0F4F8 !important;
    color: #5B6B84;
}

.top-tool-btn.active {
    background-color: #0084F0 !important;
    color: white !important;
    border: none !important;
}

.top-tool-btn i {
    font-size: 14px;
    color: #5B6B84;
}

.top-tool-btn.active i {
    color: white;
}
.desktop-only {
    display: block;
    padding-left: 12px;
}

@media (max-width: 991px) {
    .desktop-only {
        display: none;
    }
}

/* When field-btn is inside top-toolbar, override old sidebar styles to match edit tools */
.top-tool-btn.field-btn {
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px;
    flex-direction: row;
    min-height: unset !important;
    max-width: unset !important;
    width: 32px;
    height: 32px;
    gap: 0;
    color: #5B6B84 !important;
    box-shadow: none !important;
}

.top-tool-btn.field-btn:hover {
    background-color: #F0F4F8 !important;
    color: #5B6B84 !important;
    box-shadow: none !important;
}

.top-tool-btn.field-btn.active {
    background-color: #0084F0 !important;
    color: white !important;
    border: none !important;
}

/* =====================================================
   RIGHT FORMAT SIDEBAR (text formatting toolbar)
   ===================================================== */

.right-format-sidebar {
    width: 0;
    background-color: var(--white);
    border-left: none;
    overflow: hidden;
    flex-shrink: 0;
    order: 3;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
}

.right-format-sidebar.active {
    width: 300px;
    border-left: 1px solid var(--border-light);
    overflow: hidden;
    padding: 0;
}

/* =====================================================
   BUTTONS
   ===================================================== */

.btn {
    padding: 8px 8px;
    border: 1px solid #E4E9F0;
    background-color: var(--white);
    color: #6B7280;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn:hover {
    background-color: #e6f7ee;
    border-color: #A0AEC0;
}

.btn-primary {
    background-color: #FA1B3E;
    color: var(--white);
    border-color: #FA1B3E;
    font-weight: 400;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}

.btn-primary:hover {
    background-color: #e0183a !important;
    border-color:#e0183a !important;
}

.btn-icon {
    padding: 8px;
    width: 56px;
    height: 36px;
    justify-content: center;
    align-items: center;
}

.tool-btn-icon {
    font-size: 16px;
    line-height: 1;
}

/* =====================================================
   MAIN TOOLBAR - Tool Selection Bar
   ===================================================== */

 .main-toolbar {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-light);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-xs);
    min-height: 56px;
    transition: margin-left 0.15s ease;
    position: relative;
    z-index: 1500; /* stay above side panels */
}

/* Add fields sidebar in new layout - no margin shift needed */
body.add-fields-mode .editor-area { margin-left: 0; }

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-section:not(:last-child) {
    border-right: 1px solid var(--border-light);
    padding-right: 16px;
}

.tool-btn {
    padding: 8px 10px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dark);
    min-width: 56px;
    min-height: 50px;
}

.tool-btn span {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.tool-btn svg {
    flex-shrink: 0;
}

.tool-btn:hover {
    background-color: rgba(0,133,238,0.7) !important;
}

.tool-btn.active {
    background-color: #0085ee;
    color: var(--white);
    border-color: #0085ee;
}

.tool-btn.active svg {
    fill: var(--white);
}

/* Toolbar section with icons */
.toolbar-section-icons {
    flex: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* =====================================================
   LEFT VERTICAL TOOLBAR (New Design)
   ===================================================== */

.left-toolbar {
    width: 80px;
    background-color: var(--white);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 16px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    z-index: 1200;
    gap: 4px;
}

.left-toolbar::-webkit-scrollbar {
    width: 3px;
}
.left-toolbar::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
}

.left-toolbar-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.5px;
    text-align: center;
    padding: 4px 0 2px;
    width: 100%;
    display: block;
    margin-top: 4px;
}

.left-toolbar-sep {
    width: 36px;
    height: 1px;
    background-color: var(--border-light);
    margin: 4px 0;
    flex-shrink: 0;
}

.left-toolbar .tool-btn {
    width: 40px;
    height: 40px;
    min-width: unset;
    min-height: unset;
    padding: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: none;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.15s;
}

.left-toolbar .tool-btn span {
    display: none !important;
}

.left-toolbar .tool-btn:hover {
    background-color: #F7FAFC;
    border-color: var(--border-light);
}

.left-toolbar .tool-btn.active {
    background-color: #0085ee;
    color: var(--white);
    border-color: #0085ee;
}

.left-toolbar .tool-btn.active svg {
    fill: var(--white);
}

/* =====================================================
   RIGHT THUMBNAIL SIDEBAR (New Design)
   ===================================================== */

.sidebar {
    width: 170px;
    background-color: var(--white);
    border-left: none;
    border-right: 1px solid var(--border-light);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    order: 1;
}

.sidebar.sidebar-left {
    order: 1;
    border-right: 1px solid var(--border-light);
    border-left: none;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
}

.sidebar-pages {
    padding: 8px 6px;
    overflow-y: visible;
    flex: 1;
}

.sidebar .page-card {
    margin-bottom: 5px;
}

/* =====================================================
   MAIN CONTENT LAYOUT UPDATE
   ===================================================== */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: calc(100vh - 25px - 68px);
}

.editor-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    order: 2;
}

/* Add fields sidebar in new layout - shares left-toolbar styles */
.add-fields-sidebar {
    display: none;
}
.add-fields-sidebar[style*="flex"] {
    display: flex !important;
}

/* On desktop, the add-fields sidebar is hidden — tools are in top toolbar */
@media (min-width: 993px) {
    .add-fields-sidebar,
    #add-fields-sidebar {
        display: none !important;
    }
}

/* GUEST MODE: Ensure add-fields sidebar is visible when body has add-fields-mode class */
/* On desktop, tools are in top toolbar — sidebar stays hidden */
@media (max-width: 992px) {
    body.add-fields-mode #add-fields-sidebar,
    body.add-fields-mode .add-fields-sidebar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* GUEST MODE: Hide left-toolbar when in add-fields mode */
body.add-fields-mode #left-toolbar,
body.add-fields-mode .left-toolbar:not(.add-fields-sidebar) {
    display: none !important;
}

/* Hide old horizontal toolbar on desktop */
@media (min-width: 993px) {
    .main-toolbar {
        display: none !important;
    }
}

/* =====================================================
   WATERMARK PANEL - adjust for right sidebar
   ===================================================== */

.watermark-options-panel {
    right: 120px; /* account for right thumbnail sidebar */
}



/* Page Card - PDFfiller Style */
.page-card {
    
    border: none;
    border-radius: 8px;
    margin-bottom: 5px;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.page-card:hover {
    opacity: 0.85;
}

.page-card.active {
    opacity: 1;
}

/* Page Number Label - below thumbnail */
.page-number-label {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #5B6B84;
    padding: 6px 0;
    background-color: transparent;
    border-radius: 0 0 6px 6px;
    line-height: 15.75px;
}

.page-card.active .page-number-label {
    color: var(--primary-orange);
}

/* Page Thumbnail Container */
.page-thumbnail-container {
    position: relative;
    width: 100%;
    padding-top: 129.4%; /* A4 aspect ratio (297/210) */
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.page-card.active .page-thumbnail-container {
    box-shadow: 0 0 0 1px var(--primary-orange);
}
.page-card .page-thumbnail-container:hover {
    border-color: var(--primary-orange);
    box-shadow: var(--shadow-sm);
}
.page-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: var(--white);
}

/* Page Actions - hidden in narrow right sidebar */
.sidebar .page-actions {
    display: none;
}

.page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-top: 1px solid var(--border-light);
    background-color: var(--white);
    border-radius: 0 0 6px 6px;
}

.page-action-group {
    display: flex;
    gap: 4px;
}

.page-action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-light);
    background-color: var(--white);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    color: var(--text-medium);
}

.page-action-btn:hover {
    background-color: var(--hover-bg);
    border-color: var(--medium-grey);
    color: var(--text-dark);
}

.page-action-btn:active {
    transform: scale(0.95);
}

.page-action-btn.delete:hover {
    background-color: #FEE;
    border-color: #4a5fd9;
    color: #4a5fd9;
}

.page-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Add page button */
.add-page-btn {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border: 2px dashed var(--border-medium);
    background-color: transparent;
    color: var(--text-medium);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.add-page-btn:hover {
    background-color: var(--hover-bg);
    border-color: var(--primary-orange);
    color: var(--primary-orange);
}

.editor-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.canvas-container {
    flex: 1;
    padding: 0;          /* padding handled by #pdf-pages-scroll */
    overflow: auto;
    scroll-behavior: smooth;
    display: flex;
    /* `safe center` behaves like `center` while the scroll column fits, but clamps to
       the start edge once it is wider than the viewport. A plain `center` overflows to
       the left, and browsers make that left overflow unscrollable, so after zooming in
       far enough the left part of a page could never be brought back into view. */
    justify-content: safe center;
    align-items: flex-start;
    background-color: var(--bg-canvas);
    height: 100%;
    position: relative;
}

.canvas-float-toolbar {
    position: fixed;
    top: 140px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 2000;
}

@media (max-width: 1024px) {
    .canvas-float-toolbar {
        top: auto;
        bottom: 16px;
        right: 12px;
        gap: 4px;
        padding: 6px;
        border-radius: 10px;
    }

    .canvas-float-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .canvas-float-divider {
        width: 1px;
        height: 20px;
        margin: 0 2px;
    }
}

.canvas-float-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dark);
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.canvas-float-btn:hover {
    background: var(--hover-bg);
    border-color: var(--border-light);
    color: var(--primary-orange);
}

.canvas-float-btn:active {
    background: var(--border-light);
    transform: translateY(0);
}

.canvas-float-divider {
    width: 20px;
    height: 1px;
    background: var(--border-light);
    margin: 2px 0;
}

/* =====================================================
   PDF VIEWER
   ===================================================== */

/* =====================================================
   MULTI-PAGE SCROLL LAYOUT
   ===================================================== */

/* The outer viewer is now just a positioning context — no fixed size */
.pdf-viewer {
    position: relative;
    background: transparent;
    overflow: visible;
    /* width/height driven by content */
}

/* Vertical column of page blocks */
#pdf-pages-scroll {
    display: flex;
    flex-direction: column;
    /* `safe center` keeps pages centered while they fit, but clamps to the start
       edge once a page is wider than the viewport. Plain `center` overflows to the
       left, and that overflow is unreachable by scrolling, so zooming in far enough
       would make the left part of a page permanently impossible to bring into view. */
    align-items: safe center;
    gap: 20px;          /* gap between pages */
    padding: 0;
}

/* Pinch-to-zoom inside the PDF viewport.
   `pan-x pan-y` keeps single-finger scrolling intact while NOT claiming
   `pinch-zoom`, so the browser does not consume two-finger gestures itself and
   they reach the touch handlers in script.js, which drive the existing
   setZoom -> renderPage path. The same reasoning applies to #pdf-viewer.

   This is what makes a zoomed-in page pannable: once the canvas is wider than the
   screen, a horizontal one-finger drag is the only way to reach the rest of it. */
.canvas-container {
    touch-action: pan-x pan-y;
}

#pdf-viewer {
    touch-action: pan-x pan-y;
}

/* When a stroke tool is active the finger belongs to the tool, not the scroller.
   If the browser is also allowed to pan, a scroll gesture starts alongside the
   stroke and the browser fires pointercancel, cutting the stroke short.
   `setActiveTool()` toggles .pdf-tool-stroke on <body>. */
body.pdf-tool-stroke .canvas-container,
body.pdf-tool-stroke #pdf-viewer {
    touch-action: none;
}

/* While a pinch is in progress the editor applies a live CSS transform for instant
   feedback. Marking the tree disables text-selection highlights and caret
   interference from two-finger gestures without changing any layout. */
body.pdf-pinch-active,
body.pdf-pinch-active * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none;
}



/* One block per PDF page — holds the display canvas + the edit layer when active */
.pdf-page-block {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    border-radius: 4px;
    flex-shrink: 0;
    /* width/height set inline by JS to match page dimensions */
}

/* Static display canvas (background render of each page) */
.pdf-page-display-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Page number label between pages */
.pdf-page-number-label {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #8494A7;
    padding: 4px 0;
    line-height: 1;
    flex-shrink: 0;
}

/* Page break "insert page" control. It reuses .pdf-page-number-label for
   layout and typography, so only the new button needs styling. */
.pdf-page-break-insert {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-page-insert-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #8494A7;
    background: transparent;
    border: 1px dashed #C3CEDA;
    border-radius: 999px;
    padding: 4px 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.pdf-page-insert-btn:hover {
    color: #0084F0;
    border-color: #0084F0;
    background: rgba(0, 132, 240, .06);
}

.pdf-page-insert-btn:active {
    background: rgba(0, 132, 240, .12);
}

.pdf-page-insert-btn:disabled {
    opacity: .5;
    cursor: default;
    border-color: #C3CEDA;
    background: transparent;
}

.pdf-page-insert-btn,
.pdf-page-break-insert {
    display: none !important;
}

/* The editing layer sits inside the active page block */
#pdf-edit-layer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
    z-index: 5;
}

#pdf-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

#drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}

#erase-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 15;
}

.text-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; /* allow underlying canvas interactions by default */
    user-select: none;    /* prevent accidental selection on empty layer */
    z-index: 10;
    overflow: visible;    /* don't clip text that extends slightly outside bounds */
}

/* Restored and added text boxes should be interactive */
/* NOTE: Do NOT set line-height or padding here — those are set per-element
   from PDF metadata to achieve pixel-accurate positioning. */
.text-layer .text-element {
    position: absolute;
    color: #000;
    background: transparent;
    /* line-height intentionally omitted — set inline from PDF ascent/descent */
    padding: 0;
    margin: 0;
    min-width: 10px;
    min-height: 10px;
    border: none;
    cursor: text;
    pointer-events: auto; /* enable clicking and editing */
    user-select: text;     /* enable text selection */
}

/* Ensure saved overlay sits above dynamic text layer */
#saved-text-layer { z-index: 12; pointer-events: none; }

/* Erase mode: disable pointer events on all overlay layers so clicks reach the drawing canvas */
body.erase-mode #text-layer .text-element,
body.erase-mode #saved-text-layer .text-element,
body.erase-mode .form-layer .pdf-form-field,
body.erase-mode .form-layer .pdf-form-checkbox,
body.erase-mode .form-layer .pdf-form-radio,
body.erase-mode .form-layer .pdf-form-select,
body.erase-mode .form-layer .pdf-form-signature-placeholder,
body.erase-mode .form-layer .annotation-field {
    pointer-events: none !important;
    cursor: pointer !important;
}

/* Select mode: text-layer elements stay interactive so users can click/edit them.
   The document-level select listener handles routing for drag/resize. */
body.select-mode #text-layer .text-element,
body.select-mode #saved-text-layer .text-element {
    pointer-events: auto;
}

/* Eraser cursor: overridden dynamically by JS updateEraserCursor() */
body.erase-mode #drawing-canvas {
    cursor: crosshair;
}

/* =====================================================
   ZOOM CONTROLS - Bottom Right Corner
   ===================================================== */

.zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--white);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1100;
    border: 1px solid var(--border-light);
}

.zoom-controls button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-medium);
    background-color: var(--white);
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-controls button:hover {
    background-color: #F7FAFC;
}

/* =====================================================
   TEXT FORMATTING TOOLBAR
   ===================================================== */

.text-format-toolbar {
    background-color: var(--white);
    border-bottom: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    min-height: unset;
    overflow-y: auto;
}

.right-format-sidebar.active .text-format-toolbar {
    display: flex;
    padding: 12px;
    flex-shrink: 0;
}

/* Desktop only: activate z-index so toolbar stacks above left sidebar in both Edit and Add Fields modes */
@media (min-width: 993px) {
    .text-format-toolbar {
        position: relative;
    }
}

.format-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-info {
    font-size: 13px;
    color: var(--text-dark);
    font-weight: 500;
}

.manage-link {
    font-size: 13px;
    color: var(--primary-blue);
    text-decoration: none;
}

.manage-link:hover {
    text-decoration: underline;
}

.format-toolbar-center {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex: 1;
    padding: 8px;
}

.right-format-sidebar .format-toolbar-center {
    flex-direction: column;
    gap: 8px;
}

.right-format-sidebar .format-toolbar-center > * {
    width: 100%;
}

.right-format-sidebar .format-dropdown {
    width: 100%;
    min-width: unset;
}

.right-format-sidebar .format-toolbar-btn {
    width: 100%;
    justify-content: flex-start;
}

.right-format-sidebar .toolbar-separator {
    width: 100%;
    height: 1px;
    margin: 4px 0;
}

.right-format-sidebar .toolbar-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.right-format-sidebar .toolbar-fill-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Desktop Format Toolbar Rows ── */
.right-format-sidebar .fmt-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    
}

.right-format-sidebar .fmt-row + .fmt-row {
    margin-top: 6px;
}

.right-format-sidebar .fmt-row .format-toolbar-btn {
    flex: 1;
    min-width: 0;
    width: auto;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
}

.right-format-sidebar .fmt-row .format-toolbar-btn:hover {
    background-color: #EEF6FF;
    border-color: #0084F0;
    color: #0084F0;
}

.right-format-sidebar .fmt-row .format-toolbar-btn.active {
    background-color: #EEF6FF;
    border: 1px solid #0084F0;
    color: #0084F0;
}

.right-format-sidebar .fmt-font-group {
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
}

.right-format-sidebar .fmt-font-group .format-dropdown {
    flex: 1;
    min-width: 0;
    width: auto;
    border-radius: 0;
}

.right-format-sidebar .fmt-font-group .format-dropdown:first-child {
    border-radius: 7px;
}

.right-format-sidebar .fmt-font-group .format-dropdown:last-child {
    border-radius: 7px;
}

.right-format-sidebar .fmt-font-group .format-dropdown:hover {
    background-color: #f1f5f9;
}

.right-format-sidebar .fmt-style-group .toolbar-color-picker {
    flex: 1;
    min-width: 0;
}

.right-format-sidebar .fmt-style-group .toolbar-color-picker .color-btn {
    flex: 1;
    justify-content: center;
    border-radius: 4px;
    width: auto;
}

.format-dropdown {
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    background-color: var(--white);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%234A5568' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    min-width: 100px;
}

.format-dropdown-small {
    min-width: 60px;
    padding: 6px 24px 6px 8px;
}

.format-dropdown:hover {
    background-color: #F7FAFC;
    border-color: #A0AEC0;
}

.format-dropdown:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

.toolbar-separator {
    width: 1px;
    height: 22px;
    background-color: var(--border-light);
    margin: 0 4px;
}

.format-toolbar-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--text-dark);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.format-toolbar-btn:hover {
    background-color: #F7FAFC;
    border-color: var(--border-light);
}

.format-toolbar-btn.active {
    background-color: #EEF6FF;
    border: 1px solid #0084F0;
    color: #0084F0;
}

/* Color Picker */
.toolbar-color-picker {
    position: relative;
    display: flex;
    align-items: center;
}

.toolbar-color-picker input[type="color"] {
    position: absolute;
    opacity: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.color-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.color-icon {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.color-bar {
    width: 16px;
    height: 3px;
    border-radius: 1px;
}

/* Fill Color Section */
.toolbar-fill-section {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-fill-section input[type="color"] {
    position: absolute;
    opacity: 0;
    width: 70px;
    height: 32px;
    cursor: pointer;
}

.fill-color-btn {
    width: 70px;
    height: 32px;
    padding: 4px;
    border: 1px solid var(--border-medium);
    background-color: var(--white);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    pointer-events: none;
}

.fill-bar {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

.fill-percentage {
    font-size: 12px;
    color: var(--text-dark);
    min-width: 35px;
}

.format-number-input {
    width: 50px;
    padding: 6px 8px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
}

.format-number-input:hover {
    background-color: #F7FAFC;
}

.format-number-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

/* =====================================================
   UPLOAD PROMPT
   ===================================================== */

.upload-prompt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 550px;
    text-align: center;
    border: 2px dashed var(--border-medium);
    border-radius: 8px;
    padding: 50px 40px;
    background-color: var(--white);
}

.upload-prompt h2 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 600;
}

.upload-prompt p {
    color: var(--text-medium);
    margin-bottom: 20px;
    font-size: 14px;
}

.file-input-hidden {
    display: none;
}

/* =====================================================
   MODALS
   ===================================================== */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    padding: 24px;
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
    min-width: 320px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-light);
    line-height: 1;
    padding: 0;
    width: 24px;
    height: 24px;
}

.close-btn:hover {
    color: var(--text-dark);
}

/* =====================================================
   SAVE & SHARE MODAL THEME
   ===================================================== */

#save-dialog .modal-content,
#share-modal .modal-content {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-light);
}

#save-dialog .modal-header,
#share-modal .modal-header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 16px;
}

#save-dialog .modal-title,
#share-modal .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
}

#save-dialog .close-btn,
#share-modal .close-btn {
    color: var(--text-medium);
}

#save-dialog .close-btn:hover,
#share-modal .close-btn:hover {
    color: var(--text-dark);
}

#save-dialog input[type="text"],
#share-modal input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-dark);
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#save-dialog input[type="text"]:focus,
#share-modal input[type="text"]:focus {
    border-color: var(--primary-orange);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 132, 240, 0.1);
}

#save-dialog input[type="text"]::placeholder,
#share-modal input[type="text"]::placeholder {
    color: var(--text-light);
}

#save-dialog label,
#share-modal label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-medium);
    display: block;
    margin-bottom: 6px;
}

#save-dialog .modal-body,
#share-modal .modal-body {
    font-size: 14px;
    color: var(--text-medium);
}

#save-dialog .modal-footer,
#share-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

#save-dialog .btn,
#share-modal .btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-medium);
    background: var(--white);
    color: var(--text-dark);
    transition: all 0.2s ease;
}

#save-dialog .btn:hover,
#share-modal .btn:hover {
    background: var(--hover-bg);
    border-color: var(--text-light);
}

#save-dialog .btn:active,
#share-modal .btn:active {
    background: var(--border-light);
    border-color: var(--border-medium);
    transform: translateY(0);
}

#save-dialog .btn-primary,
#share-modal .btn-primary {
    background-color: #FA1B3E;
    color: var(--white);
    border-color: #FA1B3E;
    text-transform: none;
    letter-spacing: 0.2px;
    border-radius: 8px;
    padding: 10px 20px;
}

#save-dialog .btn-primary:hover,
#share-modal .btn-primary:hover {
    background-color: #e0183a !important;
    border-color: #e0183a !important;
}

#save-dialog .btn-primary:active,
#share-modal .btn-primary:active {
    background-color: #c81532 !important;
    border-color: #c81532 !important;
    transform: translateY(0);
}

#share-modal .share-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

#share-modal select {
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-dark);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

#share-modal select:focus {
    border-color: var(--primary-orange);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 132, 240, 0.1);
}

#share-modal .share-access-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--white);
    margin-bottom: 10px;
}

#share-modal .share-access-card .share-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(255, 246, 233, 0.4) 0%, rgba(255, 234, 203, 0.4) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #FA1B3E;
    flex-shrink: 0;
}

#share-modal .share-access-info {
    flex: 1;
}

#share-modal .share-access-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}

#share-modal .share-access-sub {
    font-size: 12px;
    color: var(--text-medium);
}

#share-modal .share-access-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#share-modal .share-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 12px;
}

#share-modal .share-tab {
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-medium);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#share-modal .share-tab:hover {
    color: var(--text-dark);
}

#share-modal .share-tab.active {
    color: var(--primary-orange);
    border-bottom-color: var(--primary-orange);
}

#share-modal .share-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--white);
}

#share-modal .share-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s ease;
}

#share-modal .share-list-item:last-child {
    border-bottom: none;
}

#share-modal .share-list-item:hover {
    background: var(--hover-bg);
}

#share-modal .share-list-item .share-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e9f5ee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-green);
    flex-shrink: 0;
}

#share-modal .share-list-item .share-item-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-dark);
}

/* =====================================================
   PAGES MODAL (kept after share modal section)
   ===================================================== */
.pages-modal-content {
    width: 600px;
    max-height: 500px;
    overflow-y: auto;
}

.pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.page-card {
    padding: 5px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}





/* =====================================================
   TEXT ELEMENTS & EDITING
   ===================================================== */

.text-element {
    position: absolute;
    color: #000;
    background: transparent;
    white-space: nowrap;
    /* line-height and padding are set per-element from PDF metadata — do not override here */
    line-height: normal;
    outline: none;
    pointer-events: auto;
    user-select: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    min-width: 10px;
    min-height: 10px;
    border: none;
    transition: border 0.15s, background 0.15s, box-shadow 0.15s;
}

.text-element:hover {
    border: 1px dashed #999;
    background: rgba(200, 200, 200, 0.1);
}

.text-element.selected {
    color: #000;
    border: 2px dashed #333;
    outline: none;
    background: transparent;
    cursor: move;
    user-select: none;
    /* No extra padding on selected — keeps text in its original PDF position */
    padding: 0;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.text-element.editing {
    color: #000;
    border: 2px solid var(--primary-blue);
    background: transparent;
    cursor: text;
    user-select: text;
    padding: 0;
}

.text-element.dragging {
    cursor: grabbing;
    opacity: 0.7;
}

/* Text Editor */
.text-editor {
    position: absolute;
    border: 1px solid var(--primary-orange);
    background-color: var(--white);
    padding: 5px;
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
    z-index: 5000;
    display: none;
}

/* Inline format bar inside text editor */
.text-editor-format-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 2px 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 5px;
    flex-wrap: nowrap;
}

.te-label {
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
}

.te-select {
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    width: 52px;
}

.te-style-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}

.te-style-btn.active {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.te-color {
    width: 28px;
    height: 28px;
    padding: 1px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
}

.text-editor textarea {
    border: none;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    min-width: 100px;
    min-height: 20px;
}

.text-editor-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 5px;
}

.text-editor-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-medium);
    background-color: var(--white);
    color: var(--text-dark);
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.text-editor-btn:hover {
    
}

.text-editor-btn.primary {
    background-color: var(--primary-orange);
    color: var(--white);
    border-color: var(--primary-orange);
}

.text-editor-btn.primary:hover {
    background-color: var(--secondary-orange);
}

/* =====================================================
   SIGNATURE ELEMENTS
   ===================================================== */

.signature-element {
    position: absolute;
    border: 1px dashed #ccc;
    cursor: move;
    pointer-events: auto;
    z-index: 100;
}

.signature-element.selected {
    border: 2px solid var(--primary-orange);
    box-shadow: 0 0 10px rgba(255, 106, 57, 0.3);
}

/* Hide borders when printing or in final output */
@media print {
    .signature-element,
    .signature-element.selected {
        border: none !important;
        box-shadow: none !important;
    }
    
    .text-element.selected,
    .text-element:hover {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    .annotation.selected,
    .annotation:hover {
        border: none !important;
        outline: none !important;
    }
}

/* Hide borders when capturing for download/save */
.pdf-viewer.capturing .signature-element,
.pdf-viewer.capturing .signature-element.selected,
.pdf-viewer.capturing .text-element,
.pdf-viewer.capturing .text-element.selected,
.pdf-viewer.capturing .text-element:hover,
.pdf-viewer.capturing .annotation,
.pdf-viewer.capturing .annotation.selected,
.pdf-viewer.capturing .annotation:hover {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.signature-element img {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Signature Modal */
.signature-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.signature-option {
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.signature-option:hover {
    background-color: #F7FAFC;
}

.signature-option.active {
    background-color: rgba(255, 106, 57, 0.05);
    border-color: var(--primary-orange);
}

.signature-option-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* =====================================================
   FLOATING TEXT TOOLBAR
   ===================================================== */

.floating-text-toolbar {
    position: absolute;
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 1000;
    display: none;
    min-width: 280px;
}

.floating-text-toolbar.active {
    display: block;
}

.floating-toolbar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.floating-toolbar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.floating-toolbar-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-light);
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-toolbar-close:hover {
    color: var(--text-dark);
}

.floating-toolbar-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.floating-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.floating-toolbar-label {
    font-size: 12px;
    color: var(--text-medium);
    min-width: 50px;
}

.floating-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.floating-toolbar-btn {
    padding: 5px;
    border: 1px solid var(--border-medium);
    background-color: var(--white);
    color: var(--text-dark);
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.floating-toolbar-btn:hover {
    background-color: #F7FAFC;
}

.floating-toolbar-btn.active {
    background-color: #E6F2FF;
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.floating-toolbar-select {
    padding: 4px;
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    background-color: var(--white);
    font-size: 12px;
    min-width: 70px;
}

.floating-toolbar-color {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    cursor: pointer;
}

/* =====================================================
   TABLE MODAL
   ===================================================== */

.table-modal-content {
    width: 380px;
}

.table-size-selector {
    display: grid;
    grid-template-columns: repeat(10, 28px);
    gap: 2px;
    margin: 15px 0;
}

.table-cell {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-light);
    background-color: var(--white);
    cursor: pointer;
    transition: all 0.15s;
}

.table-cell:hover {
    background-color: #F7FAFC;
}

.table-cell.selected {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.table-cell.locked {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    opacity: 1;
}

/* =====================================================
   ADD FIELDS SIDEBAR
   ===================================================== */

.add-fields-sidebar {
    position: fixed;
    left: 0;
    top: 60px; /* default; JS will adjust to sit just below toolbar */
    width: 80px;
    height: calc(100vh - 60px);
    background-color: var(--white);
    border-right: 1px solid var(--border-light);
    
    z-index: 1400;
    display: none;
    overflow-y: auto;
    padding: 0;
}

.add-fields-sidebar.active {
    display: block;
}

.add-fields-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--white);
    position: sticky;
    top: 0;
    z-index: 10;
}

.recipients-panel { padding: 10px 12px; }
.recipient-card { border:1px solid #eadff7; background:#faf5ff; border-radius:6px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; margin-bottom:8px; }
.recipient-card.active { border-color:#c4b5fd; box-shadow:0 0 0 2px rgba(196,181,253,.35) inset; }
.recipient-title { display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; }
.recipient-dot { width:8px; height:8px; border-radius:50%; background:#a78bfa; display:inline-block; }
.recipient-sub { font-size:12px; color:#6b7280; }
.add-recipient-btn { width:100%; margin:6px 0 10px; border:1px dashed #d1d5db; background:#fff; padding:8px; border-radius:6px; cursor:pointer; }
.add-recipient-btn:hover { border-color: var(--primary-orange); }

.add-fields-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-medium);
    display: block;
}

.add-fields-content {
    padding: 12px 8px;
    margin-top: 70px ;

}

.fields-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.fields-row:has(.field-btn:only-child) {
    grid-template-columns: 1fr;
}

.field-btn {
    position: relative;
    background-color: #FFF7ED;
    border: 1px solid #FFEFD5;
    border-radius: 4px;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 52px;
    max-width: 96px;
    width: 100%;
}

.field-btn:hover {
    background-color: #FFF3E6;
    border-color: var(--primary-orange);
    box-shadow: 0 2px 4px rgba(255, 106, 57, 0.15);
}

.field-btn:active {
    transform: scale(0.98);
}

.field-btn.active {
    background-color: rgba(255, 106, 57, 0.15);
    border-color: var(--primary-orange);
}

.field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
    line-height: 1.3;
    max-height: 28px;
    overflow: hidden;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.field-icon {
    font-size: 16px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    order: -1;
}

.field-drag {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 10px;
    color: var(--text-light);
    opacity: 0;
    transition: opacity 0.2s;
}

.field-btn:hover .field-drag {
    opacity: 1;
}

.fields-separator {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-light) 20%, var(--border-light) 80%, transparent);
    margin: 12px 0;
}

/* =====================================================
   WATERMARK OPTIONS PANEL
   ===================================================== */

.watermark-options-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 260px;
    height: 100vh;
    background-color: var(--white);
    border-left: 1px solid var(--border-light);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    z-index: 1500;
    display: none;
    overflow-y: auto;
    padding: 20px;
}

.watermark-options-panel.active {
    display: block;
}

.watermark-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.watermark-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.watermark-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-light);
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.watermark-panel-close:hover {
    background-color: #F7FAFC;
    color: var(--text-dark);
}

.watermark-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    cursor: pointer;
}

.watermark-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-orange);
    cursor: pointer;
}

.watermark-checkbox label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.watermark-field {
    margin-bottom: 20px;
}

.watermark-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-medium);
    margin-bottom: 8px;
    display: block;
}

.watermark-text-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-dark);
    background-color: var(--white);
    transition: border-color 0.2s;
}

.watermark-text-input:focus {
    outline: none;
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 3px rgba(255, 106, 57, 0.1);
}

.watermark-orientation-group {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.watermark-orientation-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-medium);
    background-color: var(--white);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    min-height: 38px;
}

.watermark-orientation-btn:hover {
    background-color: #F7FAFC;
}

.watermark-orientation-btn.active {
    background-color: rgba(255, 106, 57, 0.1);
    border-color: var(--primary-orange);
    color: var(--primary-orange);
}

#watermark-diagonal {
    transform: rotate(-45deg);
}

#watermark-vertical {
    transform: rotate(-90deg);
}

.watermark-slider-group {
    margin-bottom: 20px;
}

.watermark-slider {
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, var(--primary-orange) 0%, var(--primary-orange) 50%, #E2E8F0 50%, #E2E8F0 100%);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.watermark-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--white);
    border: 2px solid var(--primary-orange);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.watermark-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--white);
    border: 2px solid var(--primary-orange);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Eraser size popover (shown when the eraser tool is active) */
.eraser-size-panel {
    display: none;
    position: fixed;
    width: 200px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1450;
    padding: 12px 14px;
}
.eraser-size-panel.active {
    display: block;
}
.eraser-size-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.eraser-size-slider {
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, var(--primary-orange) 0%, var(--primary-orange) 50%, #E2E8F0 50%, #E2E8F0 100%);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.eraser-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--white);
    border: 2px solid var(--primary-orange);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.eraser-size-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--white);
    border: 2px solid var(--primary-orange);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.eraser-size-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}
.eraser-size-label {
    font-size: 12px;
    color: var(--text-light);
}
.eraser-size-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}
.eraser-size-preview-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}
.eraser-size-preview-circle {
    display: block;
    background: #e53935;
    opacity: 0.35;
    border-radius: 50%;
    transition: width 0.1s ease, height 0.1s ease;
}

.watermark-color-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.watermark-color-btn {
    width: 28px;
    height: 28px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.watermark-color-btn.active {
    border-color: var(--text-dark);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-orange);
}

.watermark-color-btn.more {
    background: linear-gradient(135deg, 
        red 0%, red 14.28%, 
        orange 14.28%, orange 28.56%,
        yellow 28.56%, yellow 42.84%,
        green 42.84%, green 57.12%,
        blue 57.12%, blue 71.4%,
        indigo 71.4%, indigo 85.68%,
        violet 85.68%, violet 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.watermark-apply-section {
    margin-bottom: 20px;
}

.watermark-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.watermark-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.watermark-radio-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-orange);
    cursor: pointer;
}

.watermark-radio-option label {
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
}

.watermark-page-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-dark);
    margin-top: 8px;
}

.watermark-page-hint {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 6px;
    line-height: 1.4;
}

.watermark-collapsible {
    margin-bottom: 16px;
}

.watermark-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
}

.watermark-collapsible-header:hover {
    background-color: #F7FAFC;
    margin: 0 -12px;
    padding: 12px;
}

.watermark-collapsible-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.watermark-collapsible-icon {
    font-size: 14px;
    color: var(--text-light);
    transition: transform 0.2s;
}

.watermark-collapsible.open .watermark-collapsible-icon {
    transform: rotate(180deg);
}

.watermark-collapsible-content {
    display: none;
    padding-top: 12px;
}

.watermark-collapsible.open .watermark-collapsible-content {
    display: block;
}

.watermark-info-icon {
    width: 14px;
    height: 14px;
    background-color: var(--primary-blue);
    color: var(--white);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    cursor: help;
}

/* =====================================================
   ICON STYLES
   ===================================================== */

.icon-select,
.icon-text,
.icon-sign,
.icon-initials,
.icon-erase,
.icon-image,
.icon-check,
.icon-cross,
.icon-circle,
.icon-table,
.icon-textbox,
.icon-date,
.icon-blackout,
.icon-highlight,
.icon-draw,
.icon-line,
.icon-arrow {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* =====================================================
   TOGGLE SWITCH
   ===================================================== */

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: var(--border-medium);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.toggle-switch.active {
    background-color: var(--primary-green);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--white);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch.active::after {
    transform: translateX(20px);
}

/* =====================================================
   LOADING SPINNER
   ===================================================== */

.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 106, 57, 0.2);
    border-radius: 50%;
    border-top-color: var(--primary-orange);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */

@media (max-width: 768px) {
    .sidebar {
        width: 200px;
    }
    
    .main-toolbar {
        flex-wrap: wrap;
        gap: 8px;

    }
    
    .header-left {
        gap: 16px;
    }

    
    .header-right .btn {
        padding: 8px 8px;
        font-size: 12px;
    }
}
/* ===============================
   BASE BEHAVIOR
   =============================== */

/* Allow wrapping instead of scrolling — sidebar mode */
.format-toolbar-center {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}

/* Keep spacing when wrapped */
.format-toolbar-center > * {
  margin-bottom: 0px;
  width: 100%;
}

/* ===============================
   TABLET & MOBILE (≤ 991px)
   =============================== */

/* Remove left section */
@media (max-width: 991px) {
  .format-toolbar-left {
    display: none !important;
  }

  .format-toolbar-center {
    gap: 6px;
  }

  .format-dropdown-small {
    width: 50px;
  }

  .format-number-input {
    width: 60px;
    display: none;
  }
}

/* =====================================================
   ACTIVITY LOG PANEL (Desktop only)
   ===================================================== */
.activity-log-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--border-light);
    overflow: hidden;
}

.activity-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px;
    flex-shrink: 0;
}

.activity-log-title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-clear-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    padding: 0;
    line-height: 1;
}

.activity-clear-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.activity-log-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
}

.activity-log-list::-webkit-scrollbar {
    width: 4px;
}

.activity-log-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.activity-empty {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    padding: 20px 0;
}

.activity-entry {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    position: relative;
}

.activity-entry + .activity-entry {
    border-top: 1px solid #f1f5f9;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.activity-dot.upload { background-color: #22c55e; }
.activity-dot.edit { background-color: #3b82f6; }
.activity-dot.save { background-color: #94a3b8; }
.activity-dot.print { background-color: #f97316; }
.activity-dot.share { background-color: #a855f7; }
.activity-dot.field-added { background-color: #06b6d4; }
.activity-dot.field-updated { background-color: #0ea5e9; }

.activity-body {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: 12px;
    color: #334155;
    line-height: 1.4;
    word-break: break-word;
}

.activity-text strong {
    font-weight: 600;
    color: #1e293b;
}

.activity-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.activity-time {
    font-size: 10px;
    color: #94a3b8;
}

.activity-user {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
}

/* Hide activity panel on mobile/tablet */
@media (max-width: 1024px) {
    .activity-log-panel { display: none !important; }
}

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

  .text-format-toolbar {
    position: sticky;
    padding: 8px;
    top: 0;
    z-index: 1000;
  }

  /* Reduce sizes without changing style */
  .format-toolbar-btn,
  .fill-color-btn {
    min-width: 20px;
    height: 20px;
    margin: 0px;
    padding: 0px;
  }

  .format-dropdown {
    height: 32px;
    width: 32px;
    padding: 4px;
    font-size: 12px;
  }

  .format-dropdown-small {
    width: 60px;
  }

  .format-number-input {
    width: 50px;
    height: 32px;
    font-size: 12px;
  }
.toolbar-separator {
    width: 1px;
    height: 22px;
    background-color: var(--border-light);
    margin: 0 2px;
    display: none;
}

  /* Optional: hide non-essential text */
  .fill-percentage {
    display: none;
  }
}
@media (max-width: 992px) {
    .text-format-toolbar {
        /* handled by mobile bottom bar CSS */
    }
    .header { height: 52px; padding: 0 12px; }
    .header-left { gap: 12px; }
    .document-title { font-size: 14px; }
    .header-zoom-group { display: none !important; }
    .main-toolbar { overflow-x: auto; flex-wrap: nowrap; gap: 10px; }
    .main-toolbar::-webkit-scrollbar { height: 6px; }
    .toolbar-section { gap: 4px; border-right: 0; }
    .toolbar-section-icons { flex-wrap: nowrap; }
    .tool-btn span { display: none !important; }
    .tool-btn { padding: 8px; }
    .sidebar { display: none; }
    .left-toolbar { display: none; }
    .main-content { height: calc(100vh - 52px); }
    #pdf-viewer { width: 100%; height: calc(100vh - 52px - 56px); overflow: auto; }
}
@media (max-width: 576px) {
    .header { height: 48px; }
    .btn { padding: 6px 10px; font-size: 12px; }
    .btn-icon { width: 32px; height: 32px; }
    .main-toolbar { gap: 6px; }
    #pdf-viewer { height: calc(100vh - 48px - 56px); }
}

/* =====================================================
   MOBILE TAB INTERFACE (Max-width: 992px)
   ===================================================== */
@media (max-width: 992px) {
    /* Hide default sections by default */
    .sidebar, 
    .main-toolbar,
    .left-toolbar,
    .add-fields-sidebar {
        display: none !important; 
    }

    /* Mobile Tabs Bar - TOP POSITIONED */
    .mobile-tabs-bar {
        display: flex !important;
        position: fixed;
        top: 52px; /* Below header */
        left: 0;
        width: 100%;
        height: 48px;
        background-color: var(--white);
        border-bottom: 1px solid var(--border-light);
        z-index: 2000;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* Hide Document Title on Mobile */
    .header-center {
        display: none !important;
    }

    /* Adjust Content Area to account for Top Tabs */
    .main-content {
        height: calc(100vh - 52px - 48px); /* Header - TabBar */
        margin-top: 28px; /* Push content down */
    }
    
    #pdf-viewer {
        height: 100%;
    }

    .mobile-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: none;
        border: none;
        color: var(--text-medium);
        font-size: 13px;
        font-weight: 500;
        padding: 0 10px;
        height: 100%;
        cursor: pointer;
        transition: all 0.2s;
        border-bottom: 2px solid transparent;
        position: relative; /* For separator */
    }

    /* Vertical Separator between tabs */
    .mobile-tab:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 25%;
        height: 50%;
        width: 1px;
        background-color: var(--border-light);
    }

    .mobile-tab.active {
        color: var(--primary-orange);
        border-bottom-color: var(--primary-orange);
        background-color: #FFF5F0;
    }
    
    .mobile-tab-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-tab-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Overlay Backdrop */
    .mobile-overlay-backdrop {
        position: fixed;
        top: 100px; /* Header + Tabs */
        left: 0;
        width: 100%;
        height: calc(100vh - 100px);
        background: rgba(0,0,0,0.3);
        z-index: 1400;
        display: none;
    }
    .mobile-overlay-backdrop.active {
        display: block;
    }

    /* Active Views Overlays - Max 50vh from TOP */
    
    /* Common Panel Styles */
    .sidebar.mobile-active,
    .main-toolbar.mobile-active,
    .add-fields-sidebar.mobile-active {
        display: block !important;
        position: fixed;
        top: 100px; /* Header + Tabs */
        left: 0;
        width: 100%;
        height: auto;
        max-height: 50vh;
        z-index: 1500;
        background-color: var(--white);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        overflow-y: auto;
        border-bottom: 1px solid var(--border-light);
        animation: slideDown 0.2s ease-out;
    }

    @keyframes slideDown {
        from { transform: translateY(-10px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* Pages View - horizontal scroll row with compact thumbnails */
    .sidebar.mobile-active {
        display: flex !important;
        flex-direction: column;
    }
    .sidebar.mobile-active .sidebar-pages {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding: 8px 10px;
        align-items: flex-start;
    }
    .sidebar.mobile-active .sidebar-pages::-webkit-scrollbar { display: none; }
    .sidebar.mobile-active .page-card {
        flex-shrink: 0 !important;
        width: 92px !important;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .sidebar.mobile-active .page-thumbnail-container {
        height: 96px !important;
        overflow: hidden;
        padding-top: 0 !important;
        border-radius: 4px !important;
    }
    .sidebar.mobile-active .page-number-label {
        font-size: 10px;
        padding: 3px 0;
    }
    .sidebar.mobile-active .page-actions { display: none !important; }

    /* Tools View - Flex/Grid adjustment */
    .main-toolbar.mobile-active {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        padding: 15px 5px; /* Reduced padding */
        gap: 0; /* Remove gap, handle via width/padding */
    }
    .main-toolbar.mobile-active .toolbar-section {
        border-right: none;
        flex-wrap: wrap;
        justify-content: start;
        width: 100%;
        gap: 0;
        margin: 0;
        padding: 0;
    }
    .main-toolbar.mobile-active .tool-btn {
        width: 16.66%; /* 6 per row */
        height: auto;
        padding: 12px 2px;
        flex-direction: column;
        margin: 0;
    }
    .main-toolbar.mobile-active .tool-btn span {
        display: block !important;
        font-size: 9px; /* Smaller font for 6-col */
        margin-top: 5px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Hide by default (mobile & tablet) */
.d-only {
  display: none;
}

/* Show only on desktop */
@media (min-width: 992px) {
  .d-only {
    display: inline-flex; /* keeps icon + text aligned */
    align-items: center;
    gap: 6px;
  }
}

    /* Add Fields View - same icon style as left-toolbar on mobile */
    .add-fields-sidebar.mobile-active {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        padding: 10px 5px;
        gap: 4px;
    }
    .add-fields-sidebar.mobile-active .left-toolbar-label {
        width: 100%;
        text-align: center;
    }
    .add-fields-sidebar.mobile-active .left-toolbar-sep {
        width: 80%;
    }
    .add-fields-sidebar.mobile-active .tool-btn {
        width: 44px;
        height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════
   NEW MOBILE UI  (≤ 768px)
   Two-row header + bottom edit toolbar
   Desktop layout is completely untouched.
   ═══════════════════════════════════════════════════════ */

/* ── Hide all new mobile elements by default (desktop sees nothing) ── */
.mob-hdr-row1,
.mob-hdr-row2,
.mob-bottom-bar {
    display: none !important;
}

@media (max-width: 1024px) {

    /* ── hide desktop header, replace with mobile row1 ── */
    .header          { display: none !important; }
    .mobile-tabs-bar { display: none !important; }
    .mob-hdr-row2    { display: none !important; }
    .mob-bottom-bar  { display: none !important; }

    /* ── RIGHT FORMAT SIDEBAR → fixed bottom bar on mobile ── */
    .right-format-sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: 52px !important;
        background: #fff !important;
        border-left: none !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,.08) !important;
        z-index: 3200 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: none !important;
    }
    .right-format-sidebar.active {
        display: flex !important;
    }

    .right-format-sidebar .text-format-toolbar {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 8px !important;
        min-height: 40px;
    }
    .right-format-sidebar .text-format-toolbar::-webkit-scrollbar { display: none; }

    .right-format-sidebar .format-toolbar-left { display: none !important; }

    .right-format-sidebar .format-toolbar-center {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        overflow: visible !important;
        flex: none !important;
        padding: 0 !important;
    }

    .right-format-sidebar .format-toolbar-center > * {
        flex-shrink: 0 !important;
        width: auto !important;
    }

    .right-format-sidebar .format-toolbar-btn {
        width: auto !important;
        min-width: 32px;
        height: 32px;
        justify-content: center !important;
        flex-shrink: 0;
        padding: 4px 6px !important;
        border: 1px solid #E4E9F0 !important;
        border-radius: 6px !important;
        background: transparent !important;
        font-size: 13px !important;
        color: #374151 !important;
    }

    .right-format-sidebar .format-toolbar-btn.active {
        background-color: #EEF6FF !important;
        border: 1px solid #0084F0 !important;
        color: #0084F0 !important;
    }

    .right-format-sidebar .format-toolbar-btn:hover {
        background-color: #EEF6FF !important;
        border-color: #0084F0 !important;
        color: #0084F0 !important;
    }

    .right-format-sidebar .format-dropdown {
        width: auto !important;
        min-width: 0 !important;
        max-width: 120px;
        height: 32px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .right-format-sidebar .format-dropdown-small {
        max-width: 60px;
    }

    .right-format-sidebar .toolbar-separator {
        width: 1px !important;
        height: 24px !important;
        flex-shrink: 0;
        margin: 0 2px !important;
    }

    /* ── Mobile: unwrap fmt-row groups back to flat horizontal scroll ── */
    .right-format-sidebar .fmt-row {
        display: contents !important;
    }

    .right-format-sidebar .toolbar-color-picker { flex-shrink: 0; }
    .right-format-sidebar .toolbar-fill-section { flex-shrink: 0; }

    .right-format-sidebar .format-number-input {
        width: 48px !important;
        height: 32px;
        flex-shrink: 0;
        font-size: 12px;
    }

    /* ── body: flex column, no overflow ── */
    body {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    /* ── ROW 1: logo left, all action buttons right ── */
    .mob-hdr-row1 {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
        flex-shrink: 0;
        z-index: 3000;
        width: 100%;
        box-sizing: border-box;
    }
    .mob-hdr-row1 .header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1;
    }
    .mob-hdr-row1 .doc-caption {
        min-width: 0;
    }
    .mob-logo { flex-shrink: 0; }
    .mob-logo img { height: 28px; width: auto; display: block; }
    .mob-hdr-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

    .mob-hdr-btn {
        width: 36px; height: 36px;
        border: 1px solid #E4E9F0; background: transparent;
        border-radius: 7px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        color: #4a5568; flex-shrink: 0;
    }
    .mob-hdr-btn:active { background: #FA1B3E; }
    .mob-hdr-btn--send {
        background: #FA1B3E;
        border-radius: 50%;
        color: #fff;
        width: 36px; height: 36px;
    }
    .mob-hdr-btn--send:active { background: #e6f7ee; }

    /* ── Top Toolbar: show on mobile like desktop, scroll together ── */
    .top-toolbar {
        display: flex !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── ROW 2: tabs + zoom — REMOVED, using desktop top-toolbar ── */
    .mob-hdr-row2 {
        display: none !important;
    }

    /* Each tab takes equal share of remaining space */
    .mob-tab {
        flex: 1 1 0;
        display: flex; align-items: center; justify-content: center; gap: 5px;
        padding: 0 4px;
        background: none; border: none;
        border-bottom: 2px solid transparent;
        font-size: 13px; font-weight: 500; color: #4a5568;
        cursor: pointer; white-space: nowrap;
        transition: background .15s, color .15s, border-color .15s;
        min-width: 0;
    }
    .mob-tab svg { flex-shrink: 0; }
    .mob-tab--active {
        color: #1a202c;
        font-weight: 600;
        border-bottom-color: #1a202c;
        background: #e6f7ee;
    }
    /* CSS-driven sync: when desktop sets body.add-fields-mode, highlight Add Fields tab */
    body.add-fields-mode #mob-tab-fields {
        color: #1a202c;
        font-weight: 600;
        border-bottom-color: #1a202c;
        background: #e6f7ee;
    }
    body.add-fields-mode #mob-tab-edit {
        color: #4a5568;
        font-weight: 500;
        border-bottom-color: transparent;
        background: none;
    }

    /* Zoom pill — fixed width, vertically centred, no flex-grow */
    .mob-zoom {
        flex-shrink: 0;
        display: flex; align-items: center; gap: 2px;
        border: 1px solid #e2e8f0; border-radius: 999px;
        padding: 3px 6px; margin: 6px 8px 6px 4px;
        background: #fff;
    }
    .mob-zoom-btn {
        width: 24px; height: 24px; border: none; background: transparent;
        border-radius: 50%; cursor: pointer; display: flex;
        align-items: center; justify-content: center; color: #4a5568;
        flex-shrink: 0;
    }
    .mob-zoom-btn:active { background: #f1f5f9; }
    #mob-zoom-level { font-size: 11px; font-weight: 600; color: #4a5568; min-width: 32px; text-align: center; }

    /* ── main content: fills remaining space ── */
    .main-content {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        padding-left: 0 !important;
        margin-top: 0 !important;
        height: auto !important;
    }

    /* canvas scrollable, no bottom bar padding needed */
    .canvas-container {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px !important;
        /* `safe center`, matching the base rule: plain `center` would overflow to the
           left and leave that region unscrollable on touch once zoomed in. */
        justify-content: safe center !important;
        align-items: flex-start !important;
    }

    /* pdf-viewer: prevent layout overflow on mobile.
       Canvas pixel dimensions are set by applyMobileFitScale() in JS —
       do NOT use CSS height:auto on canvases as it breaks touch coordinate mapping. */
    #pdf-viewer {
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* ── BOTTOM EDIT BAR — removed, desktop top-toolbar is used instead ── */
    .mob-bottom-bar {
        display: none !important;
    }
    /* When fields drawer is open, hide bottom bar */
    .mob-bottom-bar.mob-hidden { display: none !important; }

    .mob-tools-scroll {
        display: flex;
        height: 100%;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        align-items: center;
    }
    .mob-tools-scroll::-webkit-scrollbar { display: none; }

    .mob-tool {
        flex: 1 0 64px;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 3px; padding: 8px 4px;
        border: none; background: transparent;
        cursor: pointer; font-size: 10px; font-weight: 500;
        color: #4a5568; text-align: center; line-height: 1.2;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
        height: 100%;
    }

    #mob-blank-page {
        display: none !important;
    }
    .mob-tool svg { fill: #4a5568; flex-shrink: 0; }
    .mob-tool--active {
        background: transparent;
        position: relative;
    }
    .mob-tool--active::before {
        content: '';
        position: absolute;
        inset: 4px 2px;
        background: #4a5fd9;
        border-radius: 10px;
        z-index: 0;
    }
    .mob-tool--active svg,
    .mob-tool--active span {
        position: relative; z-index: 1;
        fill: #fff !important;
        color: #fff !important;
    }

    /* ADD FIELDS SIDEBAR → bottom horizontal scroll bar on mobile/tablet ── */
    /* Override the desktop fixed-left positioning; reuse existing HTML & click handlers */
    .add-fields-sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: 72px !important;
        /* Horizontal flex layout */
        flex-direction: row !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Appearance */
        background: #fff !important;
        border-top: 1px solid #e2e8f0 !important;
        border-right: none !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,.08) !important;
        z-index: 3100 !important;
        padding: 0 8px !important;
        gap: 0 !important;
        display: none !important;
    }
    .add-fields-sidebar::-webkit-scrollbar { display: none; }

    /* Show when desktop setMode('add-fields') sets body.add-fields-mode */
    body.add-fields-mode .add-fields-sidebar { display: flex !important; }

    /* In add-fields mode, hide the edit bottom bar */
    body.add-fields-mode .mob-bottom-bar { display: none !important; }

    /* Each tool button — same height as edit bar */
    .add-fields-sidebar .tool-btn,
    .add-fields-sidebar .field-btn {
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: auto !important;
        min-width: 64px !important;
        height: 100% !important;
        padding: 8px 4px !important;
        border: none !important;
        border-radius: 10px !important;
        background: transparent !important;
        cursor: pointer !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        color: #4a5568 !important;
        text-align: center !important;
        white-space: nowrap !important;
        -webkit-tap-highlight-color: transparent;
    }
    .add-fields-sidebar .tool-btn svg,
    .add-fields-sidebar .field-btn svg {
        fill: #4a5568 !important;
        flex-shrink: 0 !important;
    }
    .add-fields-sidebar .tool-btn:active,
    .add-fields-sidebar .field-btn:active {
        background: #f0f4ff !important;
        color: #4a5fd9 !important;
    }
    .add-fields-sidebar .tool-btn.active,
    .add-fields-sidebar .field-btn.active {
        background: #4a5fd9 !important;
        color: #fff !important;
        border-radius: 10px !important;
    }
    .add-fields-sidebar .tool-btn.active svg,
    .add-fields-sidebar .field-btn.active svg {
        fill: #fff !important;
    }

    /* Show the title attribute as a label below the icon */
    .add-fields-sidebar .tool-btn::after,
    .add-fields-sidebar .field-btn::after {
        content: attr(title);
        display: block;
        font-size: 10px;
        font-weight: 500;
        color: inherit;
        line-height: 1.2;
        max-width: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide section labels and separators — not needed in horizontal layout */
    .add-fields-sidebar .left-toolbar-label,
    .add-fields-sidebar .left-toolbar-sep { display: none !important; }

    /* ── hide other desktop-only elements on mobile ── */
    .left-toolbar,
    .sidebar,
    .main-toolbar,
    .formatting-bar,
    .tool-options { display: none !important; }

    /* pages panel when active */
    .sidebar.mobile-active {
        display: flex !important;
        position: fixed;
        top: 96px; left: 0; width: 100%;
        height: auto; max-height: 50vh;
        z-index: 2500; background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
        border-bottom: 1px solid #e2e8f0;
        flex-direction: column;
        overflow-y: hidden;
    }
    .sidebar.mobile-active .sidebar-pages {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding: 8px 10px;
        align-items: flex-start;
    }
    .sidebar.mobile-active .sidebar-pages::-webkit-scrollbar { display: none; }
    .sidebar.mobile-active .page-card {
        flex-shrink: 0 !important;
        width: 92px !important;
        margin-bottom: 0;
    }
    .sidebar.mobile-active .page-thumbnail-container { height: 96px !important; overflow: hidden; }

    /* Compact label and hide page actions in horizontal scroll */
    .sidebar.mobile-active .page-number-label {
        font-size: 10px;
        padding: 3px 0;
    }
    .sidebar.mobile-active .page-actions { display: none !important; }
    .sidebar.mobile-active .page-thumbnail-container {
        border-radius: 4px !important;
        padding-top: 0 !important;
        height: 96px !important;
    }

    .mobile-overlay-backdrop {
        position: fixed; top: 96px; left: 0;
        width: 100%; height: calc(100vh - 96px);
        background: rgba(0,0,0,.3); z-index: 2400; display: none;
    }
    .mobile-overlay-backdrop.active { display: block; }
}

/* ── eSign Fill Mode ─────────────────────────────────────────────────────── */

/* Sender-locked annotations: visible but not interactive */
body.esign-fill-mode .sender-locked-annotation {
    pointer-events: none !important;
    cursor: default !important;
    user-select: none !important;
}

/* Fillable fields assigned to the current recipient: highlighted */
body.esign-fill-mode .annotation-field:not(.sender-locked-annotation) {
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.4), 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* Fields belonging to other recipients: dimmed */
body.esign-fill-mode .annotation-field[style*="opacity: 0.6"] {
    cursor: not-allowed !important;
}

/* Hide field toolbar controls in eSign mode (no delete/move) */
body.esign-fill-mode .annotation-field-toolbar,
body.esign-fill-mode .resize-handle,
body.esign-fill-mode .rotate-handle,
body.esign-fill-mode .delete-btn {
    display: none !important;
    pointer-events: none !important;
}

/* Hide Add Fields sidebar in eSign mode */
body.esign-fill-mode #add-fields-sidebar,
body.esign-fill-mode .mob-tab[id="mob-tab-fields"] {
    display: none !important;
}

/* Hide all edit toolbars in eSign mode — receiver should only see fillable fields */
body.esign-fill-mode .left-toolbar,
body.esign-fill-mode #left-toolbar,
body.esign-fill-mode .main-toolbar,
body.esign-fill-mode #main-toolbar,
body.esign-fill-mode .mob-bottom-bar,
body.esign-fill-mode #mob-bottom-bar,
body.esign-fill-mode .mob-hdr-row2 .mob-tab[id="mob-tab-edit"],
body.esign-fill-mode .mob-hdr-row2 .mob-tab[id="mob-tab-pages"] {
    display: none !important;
}

/* Disable drawing canvas in eSign mode */
body.esign-fill-mode #drawing-canvas {
    pointer-events: none !important;
}

/* Disable text layer editing in eSign mode */
body.esign-fill-mode .text-element {
    pointer-events: none !important;
    user-select: none !important;
    cursor: default !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* =====================================================
   TOP TOOLBAR CATEGORY DROPDOWNS (toolbar-dropdowns.js)
   Active on the top-level editor page only. The flat labels
   + tools rows stay in the DOM (alignToolbarLabels guards
   in script.js keep early-returning cleanly); we simply
   hide them and surface the dropdown row instead.
   ===================================================== */

/* The flat rows carry overflow-x:auto/overflow-y:hidden so the long button
   strip can scroll. In dropdown mode that strip is hidden, so the scroll
   clipping is no longer needed and would clip the open panel away. Making
   the toolbar a positioned box also gives .top-dd-panel a real anchor and
   lets the toolbar's z-index:1500 stack above the PDF canvas as intended. */
.top-toolbar.top-dd-active {
    position: relative;
    overflow: visible;
}

.top-toolbar.top-dd-active .top-toolbar-labels {
    display: none;
}

.top-toolbar.top-dd-active .top-toolbar-tools {
    display: none;
}

/* Trigger row sits in normal flow as the toolbar's only visible child, so
   the toolbar keeps a real height and the panel can anchor to its bottom. */
.top-dd-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 4px 8px 0 8px;
    gap: 0;
}

.top-dd-trigger {
    flex: 0 0 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #101926;
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 6px 10px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.top-dd-trigger:hover {
    color: #2E405B;
}

.top-dd-trigger.active {
    color: #000;
    border-bottom-color: #0084F0;
}

.top-dd-trigger .top-dd-caret {
    font-size: 9px;
    transition: transform 0.15s ease;
}

.top-dd-trigger.active .top-dd-caret {
    transform: rotate(180deg);
}

.top-dd-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    text-align: center;
    flex-shrink: 0;
}

@media (min-width: 1025px) {
    .top-dd-trigger {
        gap: 4px;
        font-size: 14px;
        letter-spacing: 0.2px;
        text-transform: none;
        font-weight: 500;
        padding: 8px 10px;
        color: #101926;
    }

    .top-dd-icon {
        width: 20px;
        height: 20px;
    }

    .top-dd-caret {
        font-size: 10px;
        margin-left: 2px;
    }
}

/* Undo/Redo buttons inside the dropdown row */
.top-dd-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #101926;
    border-radius: 6px;
    cursor: pointer;
    padding-left: 25px;
    padding-right:40px ;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.top-dd-action:hover {
    background-color: #F7FAFC;
    color: #101926;
}

.top-dd-action:active {
    background-color: #EDF2F7;
    color: #0084F0;
}

.top-dd-action svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* The panel is a sibling of .top-dd-row (a child of .top-toolbar), so it cannot
   inherit its trigger as a positioning context. left is written per-open by
   toolbar-dropdowns.js to line the panel up under its own trigger. right must
   stay auto: pairing it with left would stretch the panel across the whole
   toolbar instead of letting it shrink-wrap its buttons. width:max-content
   makes it as wide as the buttons need, while max-width still forces the grid
   to wrap for the wide categories. */
.top-dd-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: max-content;
    max-width: min(92vw, 680px);
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(21, 34, 55, 0.12);
    padding: 8px;
    z-index: 1520;
}

.top-dd-panel.open {
    display: block;
}

.top-dd-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 128px;
    overflow-y: auto;
}

/* =====================================================
   DESKTOP SIDEBAR LAYOUT (min-width: 1025px)
   The format sidebar takes the left slot and the page
   thumbnails are hidden. The page cards stay in the DOM,
   so the mobile "Pages" drawer and the thumbnail renderer
   are unaffected. !important is required because
   script.js sets sidebar.style.display='flex' inline when
   a document finishes loading, which would otherwise win.
   ===================================================== */
@media (min-width: 1025px) {
    .sidebar-left {
        width: 0 !important;
        padding: 0 !important;
        border-right: none !important;
        overflow: hidden !important;
    }

    .sidebar-left > * {
        display: none !important;
    }
}

/* =====================================================
   CATEGORY TOOLS SIDEBAR (desktop only)
   Shown on the left when a top-toolbar category is opened.
   ===================================================== */
.category-tools-sidebar {
    display: none;
    width: 260px;
    flex-shrink: 0;
    background-color: var(--white);
    border-right: 1px solid var(--border-light);
    flex-direction: column;
    order: 0;
}

@media (min-width: 1025px) {
    .category-tools-sidebar.active {
        display: flex;
    }

    .top-dd-panel {
        display: none !important;
    }
}

.category-tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.category-tools-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

.category-tools-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6B7280;
    line-height: 1;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.category-tools-close:hover {
    background-color: #F7FAFC;
}

.category-tools-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}

.category-tools-content .top-tool-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
}

/* =====================================================
   CATEGORY ROW ON SMALL DEVICES (max-width: 768px)
   The six headings stop fitting under ~500px, and the
   triggers are flex "<grow> 1 0%" with min-width:0, so
   they used to shrink until their own labels clipped
   (Images measured 38px and Whiteout 47px at 360px).
   Flooring each trigger at max-content keeps every
   label intact and lets the row scroll sideways instead.
   Scoped to 768px and below, so tablet/desktop widths
   keep their current exact proportions. The scrollbar is
   hidden to match .main-toolbar: touch-scrolls, no
   chrome. The open .top-dd-panel is a sibling of this row
   (a child of .top-toolbar), so this overflow cannot clip
   it, and .top-toolbar keeps overflow:visible in
   dropdown mode.
   ===================================================== */
@media (max-width: 768px) {
    /* Toolbar should be vertical container to allow dropdowns below */
    .top-toolbar {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }
    
    /* When dropdown system is active, maintain vertical layout for dropdown positioning */
    .top-toolbar.top-dd-active {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* The dropdown row scrolls horizontally within the vertical toolbar */
    .top-dd-row {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-shrink: 0 !important;
        scrollbar-width: none !important;
        /* Force proper scrolling container */
        box-sizing: border-box !important;
        /* Start scroll from beginning */
        scroll-snap-type: x mandatory !important;
        /* Ensure no padding/margin hides first item */
        padding-left: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        position: relative !important;
        left: 0 !important;
    }
    
    .top-dd-action {
        display: none !important;
    }

    .top-dd-row::-webkit-scrollbar {
        display: none !important;
    }

    .top-dd-trigger {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: max-content !important;
        flex-shrink: 0 !important;
        /* Compact mobile sizing */
        padding: 6px 8px !important;
        margin: 0 !important;
        width: auto !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
        gap: 4px !important;
    }
    
    /* Ensure first category (Text) has no left margin/padding */
    .top-dd-trigger:first-child {
        margin-left: 0 !important;
        padding-left: 8px !important;
    }
    
    .top-dd-icon {
        width: 16px !important;
        height: 16px !important;
    }
    
    .top-dd-caret {
        font-size: 9px !important;
    }
    
    /* Dropdowns appear below the scrolling row */
    .top-dd-panel {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        z-index: 1000 !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
    }
    
    .top-dd-panel.open {
        display: block !important;
    }
    
    /* Hide the original toolbar rows when dropdown is active */
    .top-toolbar.top-dd-active .top-toolbar-labels,
    .top-toolbar.top-dd-active .top-toolbar-tools {
        display: none !important;
    }
    
    /* Hide original undo/redo buttons on mobile */
    #undo-btn-v,
    #redo-btn-v {
        display: none !important;
    }
}

/* Ensure dropdown system works on all mobile screen sizes */
@media (max-width: 1024px) {
    .top-toolbar {
        position: relative !important;
    }
    
    .top-toolbar.top-dd-active {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Horizontal scrolling row within vertical toolbar */
    .top-dd-row {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-shrink: 0 !important;
        scrollbar-width: none !important;
    }
    
    .top-dd-row::-webkit-scrollbar {
        display: none !important;
    }
    
    .top-dd-trigger {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 6px 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        width: auto !important;
        font-size: 12px !important;
        gap: 4px !important;
    }
    
    .top-dd-icon {
        width: 16px !important;
        height: 16px !important;
    }
    
    .top-dd-caret {
        font-size: 9px !important;
    }
    
    /* Ensure undo/redo buttons are also scrollable */
    .top-dd-action {
        display: none !important;
    }
    
    /* Mobile dropdown panels */
    .top-dd-panel {
        position: absolute !important;
        top: 100% !important;
        z-index: 1000 !important;
        max-width: calc(100vw - 16px) !important;
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        margin-top: 4px !important;
    }
    
    .top-dd-panel.open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide original undo/redo buttons on all mobile devices */
    #undo-btn-v,
    #redo-btn-v {
        display: none !important;
    }
}
}

/* Force visibility on very small screens - compact sizing for all categories to fit */
@media (max-width: 480px) {
    .top-dd-row {
        min-height: 40px;
        align-items: center;
        width: 100% !important;
        padding: 0 4px;
    }
    
    .top-dd-trigger {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        /* Very compact sizing for small screens */
        padding: 4px 6px !important;
        font-size: 11px !important;
        gap: 2px !important;
    }
    
    .top-dd-icon {
        width: 14px !important;
        height: 14px !important;
    }
    
    .top-dd-caret {
        font-size: 8px !important;
    }
    
    /* Hide undo/redo buttons on mobile */
    .top-dd-action,
    #undo-btn-v,
    #redo-btn-v {
        display: none !important;
    }
    
    /* Mobile dropdown panels - full width */
    .top-dd-panel {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        border-radius: 8px !important;
    }
    
    .top-dd-grid {
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important;
        gap: 8px !important;
        padding: 12px !important;
    }
}

/* =====================================================
   DESKTOP OVERLAY SIDEBARS (min-width: 1025px)
   Opening the left tools panel (#category-tools-sidebar) or the
   right format panel (#right-format-sidebar) must NOT reflow the
   viewer. Both panels are taken out of the .main-content flex row
   (position:absolute over .main-content) so .editor-area always
   keeps its full width: the page keeps its scroll position, zoom
   stays untouched and `justify-content: safe center` never
   re-centres (i.e. never shifts) the document.
   .editor-area gets its own stacking context (z-index:0) so the
   viewer overlays it contains (select-interaction-overlay z2000,
   canvas-float-toolbar z2000, inline text-editor z5000) can no
   longer paint over the panels, while modals (z-index:2000) still
   stack above them. The panels keep z-index below 2000 so full
   screen overlays such as the header/toasts/modals stay on top.
   Scoped to min-width:1025px only, so the mobile/tablet layouts
   (fixed bottom format bar, dropdown panels, drawers) are
   untouched.
   ===================================================== */
@media (min-width: 1025px) {
    .main-content {
        position: relative;
    }

    .editor-area {
        position: relative;
        z-index: 0;
    }

    .category-tools-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        box-shadow: 4px 0 16px rgba(15, 23, 42, 0.12);
    }

    .right-format-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 100;
        box-shadow: -4px 0 16px rgba(15, 23, 42, 0.12);
    }
}