/* ModernDocumentBuilder - Page-Like Rendering Styles
   Provides Word/Google Docs-like page appearance for Editor.js */

/* Page Wrapper - Centers page on screen */
/* CRITICAL: These rules apply to BOTH Template Builder and Reports Panel edit mode */
.modern-document-page-wrapper,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
    background: #f5f5f5; /* Page background (like Word/Google Docs) */
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: auto; /* Allow horizontal scroll if page is wider than viewport */
    min-width: 0; /* Allow flex shrinking if needed, but page itself won't shrink */
}

/* Page Container - Actual page dimensions */
/* CRITICAL: These rules apply to BOTH Template Builder and Reports Panel edit mode */
.modern-document-page,
.reports-document-overlay-content.edit-mode .modern-document-page {
    background: white;
    /* Match PDF/BlockStyleSpec: Arial 12pt so Editor.js and PDF share the same base. */
    font-family: Arial, sans-serif;
    font-size: 12pt;
    /* Fallback when no inline style: 96px (1 inch). EditorJsWrapper overrides with PageSettings.Margins (Top/Right/Bottom/Left) for parity with PDF; supports cm, mm, in, pt, px. */
    padding: 96px;
    box-sizing: border-box;
    position: relative;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    /* CRITICAL: Prevent any resizing - dimensions are fixed */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* CRITICAL: Ensure page never resizes due to content or container constraints */
    overflow: visible; /* Allow content to flow naturally within fixed page bounds */
    
    /* Skeuomorphic paper texture */
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, transparent 2%, transparent 98%, rgba(0, 0, 0, 0.01) 100%),
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.005) 50%, transparent 100%);
    
    /* Subtle page fold effect (top-right corner) */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 24px 24px 0;
        border-color: transparent rgba(0, 0, 0, 0.03) transparent transparent;
        pointer-events: none;
        z-index: 1;
    }
    
    &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 24px 24px 0;
        border-color: transparent #f8f9fa transparent transparent;
        pointer-events: none;
        z-index: 2;
    }
}

/* A4 Portrait (default) - 794px × 1123px at 96 DPI */
/* CRITICAL: Fixed dimensions - NEVER change these values */
/* These rules apply to BOTH Template Builder and Reports Panel edit mode */
.modern-document-page-wrapper[data-page-size="A4"] .modern-document-page.portrait,
.modern-document-page-wrapper:not([data-page-size]) .modern-document-page.portrait,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper[data-page-size="A4"] .modern-document-page.portrait,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper:not([data-page-size]) .modern-document-page.portrait {
    width: 794px !important; /* Fixed A4 width - never resize */
    min-width: 794px !important; /* Prevent shrinking */
    max-width: 794px !important; /* Prevent growing */
    min-height: 1123px !important; /* Fixed A4 height */
    height: auto; /* Allow content to determine height */
    /* CRITICAL: Prevent any resizing */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* A4 Landscape - 1123px × 794px */
/* CRITICAL: Fixed dimensions - apply to both Template Builder and Reports Panel edit mode */
.modern-document-page-wrapper[data-page-size="A4"] .modern-document-page.landscape,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper[data-page-size="A4"] .modern-document-page.landscape {
    width: 1123px !important; /* Fixed A4 landscape width */
    min-width: 1123px !important;
    max-width: 1123px !important;
    min-height: 794px !important; /* Fixed A4 landscape height */
    height: auto;
    /* CRITICAL: Prevent any resizing */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Letter Portrait - 816px × 1056px */
/* CRITICAL: Apply to both Template Builder and Reports Panel edit mode */
.modern-document-page-wrapper[data-page-size="Letter"] .modern-document-page.portrait,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper[data-page-size="Letter"] .modern-document-page.portrait {
    width: 816px !important;
    min-width: 816px !important;
    max-width: 816px !important;
    min-height: 1056px !important;
    height: auto;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Letter Landscape - 1056px × 816px */
.modern-document-page-wrapper[data-page-size="Letter"] .modern-document-page.landscape,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper[data-page-size="Letter"] .modern-document-page.landscape {
    width: 1056px !important;
    min-width: 1056px !important;
    max-width: 1056px !important;
    min-height: 816px !important;
    height: auto;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Legal Portrait - 816px × 1344px */
.modern-document-page-wrapper[data-page-size="Legal"] .modern-document-page.portrait,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper[data-page-size="Legal"] .modern-document-page.portrait {
    width: 816px !important;
    min-width: 816px !important;
    max-width: 816px !important;
    min-height: 1344px !important;
    height: auto;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Legal Landscape - 1344px × 816px */
.modern-document-page-wrapper[data-page-size="Legal"] .modern-document-page.landscape,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper[data-page-size="Legal"] .modern-document-page.landscape {
    width: 1344px !important;
    min-width: 1344px !important;
    max-width: 1344px !important;
    min-height: 816px !important;
    height: auto;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* A3 Portrait - 1123px × 1587px */
.modern-document-page-wrapper[data-page-size="A3"] .modern-document-page.portrait,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper[data-page-size="A3"] .modern-document-page.portrait {
    width: 1123px !important;
    min-width: 1123px !important;
    max-width: 1123px !important;
    min-height: 1587px !important;
    height: auto;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* A3 Landscape - 1587px × 1123px */
.modern-document-page-wrapper[data-page-size="A3"] .modern-document-page.landscape,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper[data-page-size="A3"] .modern-document-page.landscape {
    width: 1587px !important;
    min-width: 1587px !important;
    max-width: 1587px !important;
    min-height: 1123px !important;
    height: auto;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Custom dimensions - use CSS variables */
.modern-document-page-wrapper[data-page-size="Custom"] .modern-document-page,
.reports-document-overlay-content.edit-mode .modern-document-page-wrapper[data-page-size="Custom"] .modern-document-page {
    width: var(--custom-page-width, 794px) !important;
    min-width: var(--custom-page-width, 794px) !important;
    max-width: var(--custom-page-width, 794px) !important;
    min-height: var(--custom-page-height, 1123px) !important;
    height: auto;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Editor.js holder inside page */
.modern-document-page .editorjs-wrapper {
    min-height: 100%;
    width: 100%;
}

/* Ensure Editor.js blocks respect page boundaries */
.modern-document-page .ce-block {
    max-width: 100%;
}

.modern-document-page .ce-block__content {
    max-width: 100%;
}

/* CRITICAL: Editor.js table rendering - ensure tables render correctly, not vertically */
/* Match the same approach as embedded-editor.css for consistency */
.modern-document-page .ce-block[data-type="table"],
.modern-document-page .ce-block[data-type="table"] .ce-block__content {
    width: 100% !important;
    overflow-x: auto !important;
    min-width: 0 !important;
}

/* Editor.js table: source of truth for borders and layout (match BlockStyleSpec §7 and PDF) */
.modern-document-page table,
.modern-document-page .ce-block[data-type="table"] table {
    border-collapse: collapse !important;
}

/* CRITICAL: Editor.js table cells (HTML table) - prevent vertical text rendering; borders from Editor.js/BlockStyleSpec */
.modern-document-page table th,
.modern-document-page table td,
.modern-document-page .ce-block[data-type="table"] th,
.modern-document-page .ce-block[data-type="table"] td {
    display: table-cell !important;
    padding: 0.5em !important;
    border: 1px solid #e2e8f0 !important;
    text-align: left !important;
    vertical-align: top !important;
    /* CRITICAL: Prevent vertical text rendering */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 50px !important;
    width: auto !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
    transform: none !important;
    text-transform: none !important;
}

.modern-document-page table th,
.modern-document-page .ce-block[data-type="table"] th {
    background-color: #f8fafc !important;
    font-weight: 600 !important;
}

/* Responsive: Scale down on smaller screens */
@media (max-width: 1200px) {
    .modern-document-page-wrapper {
        padding: 16px;
    }
    
    .modern-document-page-wrapper[data-page-size="A4"] .modern-document-page.portrait {
        width: 90%;
        max-width: 794px;
    }
    
    .modern-document-page-wrapper[data-page-size="A4"] .modern-document-page.landscape {
        width: 90%;
        max-width: 1123px;
    }
}

/* Print styles */
@media print {
    .modern-document-page-wrapper {
        padding: 0;
        background: white;
    }
    
    .modern-document-page {
        width: 210mm !important; /* A4 width in mm */
        min-height: 297mm !important; /* A4 height in mm */
        padding: 25.4mm !important; /* 1 inch in mm */
        box-shadow: none;
        border: none;
        page-break-after: always;
    }
}