/**
 * ═══════════════════════════════════════════════════════════════════
 * MS WORD A4 WYSIWYG PRINT STYLES - FINAL VALIDATED
 * Matches Microsoft Word's default A4 layout (210mm x 297mm)
 * Fixed: CSS Syntax Errors, Mobile Zoom, Desktop Blank Pages
 * ═══════════════════════════════════════════════════════════════════
 */

/* ============ 1. PAGE SETUP ============ */
@page {
    size: A4 portrait;
    margin: 20mm;
}

/* ============ 2. PAGE BREAKS ============ */
.page-break-before {
    page-break-before: always !important;
    break-before: page !important;
    display: block;
    height: 1px;
    margin: 0;
}
.page-break-after {
    page-break-after: always !important;
    break-after: page !important;
}

/* ============ 3. DESKTOP PREVIEW ============ */
#preview-wrapper {
    background: #525659;
    padding: 30px 0;
    overflow-y: auto;
    height: 100vh;
    display: block;
    text-align: center;
}

#preview {
    width: 210mm !important;
    min-height: 297mm !important;
    height: auto !important;
    margin: 0 auto 40px auto;
    padding: 20mm !important;
    background: white !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    text-align: left;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    
    font-family: "Times New Roman", Times, serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
    color: #000 !important;
}

/* ============ 4. MOBILE PREVIEW (Readable Zoom) ============ */
@media screen and (max-width: 850px) {
    #preview-wrapper {
        padding: 10px 0 !important;
        overflow-x: hidden !important;
        background: #e0e0e5 !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        height: auto !important;
        min-height: 100vh !important;
    }

    #preview {
        /* Keep A4 Size but Scale Down */
        width: 210mm !important;
        min-width: 210mm !important;
        
        /* 
           STANDARD TRANSFORM 
           (Replaced -moz- specific properties with standard ones)
        */
        transform: scale(0.45);
        transform-origin: top center;
        
        margin: 0 !important;
        /* Negative margin to pull footer up since element shrunk */
        margin-bottom: -150px !important; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    }
}

/* ============ 5. PRINT MODE (Layout Unlock) ============ */
@media print {
    /* RESET EVERYTHING */
    :root, html, body {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: white !important;
        display: block !important;
    }

    /* HIDE UI COMPONENTS (NOT app-container!) */
    .app-header, .controls-panel, .status-bar, 
    .toolbar-buttons, .preview-toolbar,
    .mobile-header, .tab-navigation,
    .page-break-indicator, .tab-panel:not(#tab-preview),
    header, nav, footer, aside {
        display: none !important;
    }

    /* Keep main structure visible */
    .app-container,
    .main-layout,
    .preview-panel {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        background: white !important;
    }

    /* UNWRAP CONTENT */
    #preview-wrapper {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* PAGE CONTENT */
    #preview {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important; /* Margins handled by @page */
        position: static !important;
        display: block !important;
        visibility: visible !important;
        overflow: visible !important;
        
        /* Reset Effects */
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Ensure Print Colors */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ============ 6. JS PRINT HELPER ============ */
body.printing-mode .app-container,
body.printing-mode header,
body.printing-mode nav,
body.printing-mode aside { display: none !important; }

body.printing-mode #preview-wrapper {
    position: static !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}
/* ════════════════════════════════════════════════════════════════
   PROFESSIONAL ENHANCEMENTS - Auto-Numbering & Typography
   ════════════════════════════════════════════════════════════════ */

/* Counter Setup */
#preview {
    counter-reset: section;
}

/* Auto-Number Main Sections (Only visible ones!) */
#preview h2 {
    counter-increment: section;
}

#preview h2::before {
    content: counter(section) ". ";
    color: #000;
    font-weight: bold;
}

/* Professional Typography */
#preview p {
    text-align: justify;
    hyphens: auto;
    orphans: 3;
    widows: 3;
}

#preview ul {
    margin-left: 25pt;
    line-height: 1.8;
}

#preview ul li {
    margin-bottom: 8pt;
}

/* Table Enhancements */
#preview table {
    border-collapse: collapse;
    width: 100%;
    margin: 15pt 0;
}

#preview table th,
#preview table td {
    border: 1px solid #333;
    padding: 8pt;
    text-align: left;
    vertical-align: top;
}

#preview table th {
    background-color: #f0f0f0;
    font-weight: bold;
}

#preview table tr:nth-child(even) {
    background-color: #fafafa;
}

/* Page Break Control */
#preview h2 {
    page-break-after: avoid;
    page-break-inside: avoid;
}

#preview table {
    page-break-inside: avoid;
}

/* Print Color Preservation */
@media print {
    #preview h2::before {
        color: #000 !important; /* Black numbers for print */
    }
}
/* =====================================================
   SOP CONTENT LIST NORMALIZATION (SAFE)
   ===================================================== */

/* Ensure procedure steps are numbered in preview & print */
#preview ol {
    list-style-type: decimal !important;
    margin-top: 6pt;
    margin-bottom: 8pt;
    margin-left: 25pt;
    padding-left: 0;
}

/* List item spacing (professional, compact) */
#preview ol li,
#preview ul li {
    margin-bottom: 6pt;
}

/* Reduce excessive gap after headings before lists */
#preview h2 + ul,
#preview h2 + ol {
    margin-top: 6pt !important;
}
/* =====================================================
   DOCUMENT INFORMATION – FINAL VISIBILITY CONTROL
   ===================================================== */

/* ===== PREVIEW (SCREEN) ===== */
#preview .doc-control-table {
  display: block;
}

#preview .doc-control-text {
  display: none;
}

/* ===== PRINT / PDF ===== */
@media print {
  .doc-control-table {
    display: block;
  }

  .doc-control-text {
    display: none;
  }
}