/* Tło modala / obszaru podglądu */
.preview-background {
    background-color: #525659;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto; /* Przewijanie */
}

/* Symulacja kartki A4 */
.a4-sheet {
    width: 210mm;
    min-height: 297mm;
    background: white;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    
    /* KLUCZOWE: Marginesy fizyczne (Padding) */
    padding: 20mm !important;
    
    box-sizing: border-box;
    position: relative;
    color: black;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 10pt;
    
    /* Flexbox do układu: Nagłówek - Treść - Stopka */
    display: flex;
    flex-direction: column;
}

/* Sekcja nagłówka w podglądzie */
.preview-header-placeholder {
    margin-bottom: 20px;
    width: 100%;
}

/* Sekcja stopki w podglądzie */
.preview-footer-placeholder {
    margin-top: auto; /* Wypycha stopkę na sam dół minimalnej wysokości */
    padding-top: 20px;
    width: 100%;
}

/* Główna treść - rozciąganie */
.preview-content {
    flex-grow: 1;
    width: 100%;
}

/* RESET STYLÓW WSTRZYKNIĘTYCH (Fix dla body { margin: 0 }) */
/* Ponieważ wstrzykujemy cały HTML do diva, style body mogą nadpisywać padding .a4-sheet */
/* Tutaj neutralizujemy to */
.a4-sheet body {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
}

/* Fix dla tabel w podglądzie */
.a4-sheet table {
    width: 100% !important;
}