/**
 * PRINT STYLES FOR A4 PAGE-BY-PAGE LAYOUT
 * Makes printed output match exactly what's on screen
 * WYSIWYG (What You See Is What You Get)
 */

@media print {
    /* ==========================================
       RESET: Remove all UI elements
       ========================================== */

    .sidebar,
    .top-bar,
    #resizer-bottom,
    .panel-toggle-bar,
    #bottom-area,
    .status-bar,
    #page-controls,
    #doc-minimap,
    #floating-toolbar,
    .mobile-float-actions,
    .toolbar-copy-bubble,
    .canvas-controls,
    .canvas-controls-top,
    #page-overlay-layer,
    #page-bg-layer,
    .a4-page-sheet,
    #editor-right-dock,
    #minimap-overlay,
    #floating-action-bar,
    #btn-batch-convert,
    #typing-balloon,
    .typing-balloon,
    #gender-flip-popup,
    .shortcut-hint,
    #copy-success-balloon,
    .file-manager-notification,
    .file-save-menu,
    .notification,
    .toast,
    .alert,
    [role="alert"],
    [role="status"],
    .ql-tooltip,
    #universal-float-actions,
    .fab-container,
    .fab-toggle-btn,
    .app-background,
    .bg-orb {
        display: none !important;
        visibility: hidden !important;
    }

    /* Aggressive reset for all UI borders */
    * {
        border-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* But preserve borders for content if needed (like tables) */
    .ql-editor *,
    .ql-editor {
        border-color: initial !important;
    }

    /* Hide Quill toolbar */
    #quill-toolbar,
    .ql-toolbar {
        display: none !important;
    }

    /* Custom Print Footer (Manual) */
    .print-footer-manual {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 10mm;
        left: 20mm;
        right: 20mm;
        font-family: 'Inter', sans-serif;
        font-size: 10pt;
        color: #666;
        border-top: 1px solid #eee;
        padding-top: 5px;
        z-index: 9999;
    }

    .print-footer-left {
        flex: 1;
        text-align: left;
    }

    .print-footer-center {
        flex: 1;
        text-align: center;
    }



    .print-footer-right {
        flex: 1;
        text-align: right;
    }

    /* Hide by default in screen view */
    @media screen {
        .print-footer-manual {
            display: none !important;
        }
    }

    /* ==========================================
       PAGE SETUP: Perfect A4
       ========================================== */

    @page {
        size: A4 portrait;
        /* Use margins here to ensure every page has consistent header/footer space */
        margin: 20mm;
    }

    /* Standard margins for all pages are now inherited from the main @page rule */


    /* Reset body and root - CRITICAL for multi-page PDF */
    html {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
        position: static !important;
        display: block !important;
    }

    body {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
        position: static !important;
        display: block !important;
        /* Override flex layout that might constrain height */
        flex-direction: column !important;
    }

    /* CRITICAL: Force layout containers to allow vertical overflow */
    /* Be careful not to reset padding on content elements */
    html,
    html *,
    body,
    body>*,
    .content-area,
    .content-area *,
    .workspace,
    .workspace *,
    #mirror-container,
    #mirror-container *,
    #editor-container,
    #editor-container *,
    .ql-container {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        flex: none !important;
        transform: none !important;
        zoom: 1 !important;
    }

    /* But preserve the editor content structure */
    .ql-editor,
    .ql-editor * {
        overflow: visible !important;
        max-height: none !important;
        /* Don't reset height for inline elements */
    }

    /* Make sure ALL content containers expand to fit - VERY EXPLICIT */
    .content-area {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: white !important;
        position: static !important;
        transform: none !important;
        flex: none !important;
    }

    .workspace {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: white !important;
        position: static !important;
        transform: none !important;
        flex: none !important;
    }

    #mirror-container,
    .mirror-pane {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: white !important;
        position: static !important;
        transform: none !important;
        flex: none !important;
        /* Hide backdrop effects */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #editor-container {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: white !important;
        background-image: none !important;
        /* Strip dotted background */
        border: none !important;
        /* Strip gold divider */
        position: static !important;
        transform: none !important;
        flex: none !important;
    }

    main {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: white !important;
        position: static !important;
        transform: none !important;
        flex: none !important;
    }

    /* Hide the left editor pane (Mongolian script pane) during print */
    .editor-pane {
        display: none !important;
    }

    /* Hide the resizer dividers and handles */
    .resizer,
    .resizer-horizontal,
    .resizer-vertical,
    #drag-handle,
    #resizer-left,
    #resizer-right,
    #resizer-bottom,
    .sidebar-handle,
    .panel-toggle-bar,
    .sidebar-resizer {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
    }

    /* Force remove all container borders that might show a "black line" */
    .content-area,
    .workspace,
    #mirror-container,
    .mirror-pane,
    .editor-pane,
    #editor-container,
    .ql-container,
    .ql-editor,
    main,
    body,
    html {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* ==========================================
       QUILL EDITOR: Match screen appearance
       ========================================== */

    .ql-container {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        /* Critical: Allow content to flow beyond first page */
        border: none !important;
        outline: none !important;
        background: white !important;
        font-family: inherit;
        transform: none !important;
        /* Remove any zoom transforms */
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        /* Show all content */
    }

    .ql-editor,
    .ql-container .ql-editor,
    #editor-container .ql-editor,
    #mirror-container .ql-editor {
        /* Width should be auto since @page handles the page size */
        width: auto !important;
        min-height: auto !important;
        height: auto !important;
        /* Allow content to flow across multiple pages */

        /* Padding removed here as it's now handled by @page margins for all pages */
        padding: 0 !important;
        margin: 0 !important;

        background: white !important;
        color: black !important;
        overflow: visible !important;
        border: none !important;
        position: relative !important;
        line-height: 1.42 !important;
        /* Match Quill default for WYSIWYG */
        box-sizing: border-box !important;
        max-height: none !important;
        /* Critical: Allow unlimited pages */

        /* Reset any transforms */
        transform: none !important;
        zoom: 1 !important;
    }

    /* Ensure no extra margins on paragraphs or headings - spacing is handled by Quill/Line-height */
    .ql-editor p,
    .ql-editor h1,
    .ql-editor h2,
    .ql-editor h3,
    .ql-editor h4,
    .ql-editor h5,
    .ql-editor h6,
    .ql-editor ul,
    .ql-editor ol,
    .ql-editor blockquote {
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Spacing now matches Quill defaults - no overrides needed */

    /* Remove page background layers (they're just for screen UI) */
    #page-bg-layer,
    .a4-page-sheet {
        display: none !important;
    }

    /* ==========================================
       PAGE BREAKS: Honor block-level pagination
       ========================================== */

    /* Allow page breaks between block elements */
    .ql-editor>* {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        orphans: 3 !important;
        widows: 3 !important;
    }

    /* CRITICAL: Force page breaks ONLY where JavaScript marked them */
    /* Elements marked by page-view.js should break to new page */
    .ql-editor [data-page-margin="true"] {
        page-break-before: always !important;
        break-before: page !important;
        margin-top: 0 !important;
        /* Remove the artificial screen-gap margin */
        display: block !important;
    }

    /* Remove any forced bottom spacing from the editor itself */
    .ql-editor::after {
        display: none !important;
        content: none !important;
    }

    /* Fallback: If JavaScript markers aren't present, try to break naturally */
    /* This ensures compatibility with static HTML or when JS hasn't run */
    .ql-editor>p,
    .ql-editor>h1,
    .ql-editor>h2,
    .ql-editor>h3,
    .ql-editor>div,
    .ql-editor>ul,
    .ql-editor>ol {
        page-break-after: auto !important;
        break-after: auto !important;
    }

    /* Prevent breaking inside certain elements */
    .ql-editor h1,
    .ql-editor h2,
    .ql-editor h3,
    .ql-editor h4,
    .ql-editor h5,
    .ql-editor h6 {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* Keep list items together */
    .ql-editor li {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }


    /* ==========================================
       TYPOGRAPHY: High-quality print rendering
       ========================================== */

    .ql-editor {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Preserve all text formatting */
    .ql-editor strong,
    .ql-editor b {
        font-weight: bold !important;
    }

    .ql-editor em,
    .ql-editor i {
        font-style: italic !important;
    }

    .ql-editor u {
        text-decoration: underline !important;
    }

    .ql-editor s {
        text-decoration: line-through !important;
    }

    /* Preserve colors exactly */
    .ql-editor [style*="color"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ql-editor [style*="background"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ==========================================
       WHITESPACE: Preserve tabs and spacing
       ========================================== */

    .ql-editor {
        white-space: pre-wrap !important;
        tab-size: 4 !important;
        -moz-tab-size: 4 !important;
    }

    /* ==========================================
       LISTS & INDENTATION
       ========================================== */

    .ql-editor ul,
    .ql-editor ol {
        padding-left: 1.5em !important;
    }

    .ql-editor li {
        page-break-inside: avoid;
    }

    /* Preserve Quill's indent classes */
    .ql-editor .ql-indent-1 {
        padding-left: 3em !important;
    }

    .ql-editor .ql-indent-2 {
        padding-left: 6em !important;
    }

    .ql-editor .ql-indent-3 {
        padding-left: 9em !important;
    }

    .ql-editor .ql-indent-4 {
        padding-left: 12em !important;
    }

    .ql-editor .ql-indent-5 {
        padding-left: 15em !important;
    }

    .ql-editor .ql-indent-6 {
        padding-left: 18em !important;
    }

    .ql-editor .ql-indent-7 {
        padding-left: 21em !important;
    }

    .ql-editor .ql-indent-8 {
        padding-left: 24em !important;
    }

    /* ==========================================
       ALIGNMENT
       ========================================== */

    .ql-editor .ql-align-left {
        text-align: left !important;
    }

    .ql-editor .ql-align-center {
        text-align: center !important;
    }

    .ql-editor .ql-align-right {
        text-align: right !important;
    }

    .ql-editor .ql-align-justify {
        text-align: justify !important;
    }

    /* ==========================================
       FONTS: Preserve all font families and sizes
       ========================================== */

    .ql-editor .ql-font-Inter {
        font-family: 'Inter', sans-serif !important;
    }

    .ql-editor .ql-font-Roboto {
        font-family: 'Roboto', sans-serif !important;
    }

    .ql-editor .ql-font-courier-prime {
        font-family: 'Courier Prime', monospace !important;
    }

    .ql-editor .ql-font-Oswald {
        font-family: 'Oswald', sans-serif !important;
    }

    .ql-editor .ql-font-Lobster {
        font-family: 'Lobster', cursive !important;
    }

    .ql-editor .ql-font-Pacifico {
        font-family: 'Pacifico', cursive !important;
    }

    .ql-editor .ql-font-Caveat {
        font-family: 'Caveat', cursive !important;
    }

    /* Preserve font sizes */
    .ql-editor .q l-size-12px {
        font-size: 12px !important;
    }

    .ql-editor .ql-size-14px {
        font-size: 14px !important;
    }

    .ql-editor .ql-size-16px {
        font-size: 16px !important;
    }

    .ql-editor .ql-size-18px {
        font-size: 18px !important;
    }

    .ql-editor .ql-size-20px {
        font-size: 20px !important;
    }

    .ql-editor .ql-size-24px {
        font-size: 24px !important;
    }

    .ql-editor .ql-size-32px {
        font-size: 32px !important;
    }

    .ql-editor .ql-size-48px {
        font-size: 48px !important;
    }

    /* ==========================================
       HEADINGS - No spacing overrides, use Quill defaults
       ========================================== */

    .ql-editor h1 {
        font-size: 2em !important;
        font-weight: bold !important;
    }

    .ql-editor h2 {
        font-size: 1.5em !important;
        font-weight: bold !important;
    }

    .ql-editor h3 {
        font-size: 1.17em !important;
        font-weight: bold !important;
    }

    /* ==========================================
       BLOCKQUOTES & CODE BLOCKS
       ========================================== */

    .ql-editor blockquote {
        border-left: 4px solid #ccc !important;
        padding-left: 16px !important;
        margin: 16px 0 !important;
        color: #666 !important;
    }

    .ql-editor pre,
    .ql-editor code {
        background-color: #f5f5f5 !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
        font-family: 'Courier New', monospace !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .ql-editor pre {
        padding: 12px !important;
        overflow-x: visible !important;
        white-space: pre-wrap !important;
    }

    /* ==========================================
       LINKS & IMAGES
       ========================================== */

    .ql-editor a {
        color: #06c !important;
        text-decoration: underline !important;
    }

    .ql-editor a[href]:after {
        content: " (" attr(href) ")" !important;
        font-size: 0.8em !important;
        color: #666 !important;
    }

    .ql-editor img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid !important;
    }

    /* ==========================================
       REMOVE BACKGROUNDS & EFFECTS
       ========================================== */

    .app-background,
    .bg-orb {
        display: none !important;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ==========================================
       FINAL TWEAKS
       ========================================== */

    /* Ensure no orphans/widows */
    p {
        orphans: 3;
        widows: 3;
    }

    /* High-resolution rendering */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Hide scrollbars everywhere in print */
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    * {
        scrollbar-width: none !important;
    }
}