:root {
    --a4-width: 210mm;
    --a4-height: 297mm;
}

body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.a4-page {
    width: var(--a4-width);
    height: var(--a4-height);
    min-width: var(--a4-width);
    min-height: var(--a4-height);
    box-sizing: border-box;
    overflow: hidden;
    /* Ensure content doesn't spill out */
}

/* Grid Lines Logic */
.handwriting-row {
    width: 100%;
    position: relative;
    /* Adjust height based on JS calculation or fixed rem */
}

/* The 5-line system SVG or CSS */
.grid-lines line {
    vector-effect: non-scaling-stroke;
}

/* SVG Text Dotted Effect */
.dotted-text {
    fill: none;
    stroke: black;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* stroke-dasharray is handled in JS or inline utility */
}

/* Printing */
@media print {
    @page {
        size: A4;
        margin: 0;
    }

    html,
    body {
        background: white !important;
        overflow: visible !important;
        display: block !important;
        height: auto !important;
        position: static !important;
    }

    .no-print {
        display: none !important;
    }

    main {
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
        display: block;
        overflow: visible;
        height: auto;
        position: static;
        /* Reset absolute positioning/flex if any */
    }

    #preview-container {
        box-shadow: none !important;
        margin: 0 !important;
        width: 100%;
        height: auto;
        background: white !important;
        padding: 0 !important;
    }

    /* Target the individual pages */
    .a4-page {
        box-shadow: none !important;
        margin: 0 !important;
        width: 210mm;
        height: 297mm;
        page-break-after: always;
        /* Force new page for each A4 block */
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        overflow: hidden;
    }

    /* Remove the margin-bottom added by JS/Tailwind logic for screen view */
    .a4-page.mb-8 {
        margin-bottom: 0 !important;
    }

    /* Ensure the worksheet content wrapper doesn't constrain height */
    #worksheet-content {
        height: auto;
        display: block;
        padding-bottom: 0 !important;
    }
}