/* ═══════════════════════════════════════════════════════════════
   PRINT STYLESHEET — A4 Landscape (WYSIWYG)
   What you see in the editor is what you get on paper.
   ═══════════════════════════════════════════════════════════════ */

@page {
    size: a4 landscape;
    margin: 0;
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html,
    body {
        background: white !important;
        height: auto;
    }

    /* Hide UI chrome only */
    #auth-screen,
    #toolbar,
    .add-item-row,
    .item-actions-desktop,
    .item-actions-mobile,
    .group-header .group-actions,
    .column-drop-target {
        display: none !important;
    }

    /* Contenteditable spans behave like static text in print */
    [contenteditable] {
        outline: none !important;
        cursor: default !important;
    }

    /* Note: follow the show-notes toggle in print (body.show-notes) */
    .item .item-note {
        display: none;
    }

    body.show-notes .item .item-note {
        display: inline;
    }

    /* Placeholder text must not appear in print */
    [contenteditable]:empty::before {
        content: none !important;
    }

    #app-screen {
        height: auto;
    }

    #page-container {
        padding: 0;
        overflow: visible;
    }

    .a4-landscape {
        width: var(--page-width);
        min-height: auto;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent;
        margin: 0;
    }

    .group-header {
        cursor: default;
    }

    .group-header .group-name {
        cursor: default;
    }

    .item {
        cursor: default;
    }

    .item:hover {
        background: transparent;
    }

    .item .item-text {
        cursor: default;
    }

    /* Unchecked checkboxes render as empty boxes */
    .item input[type='checkbox'] {
        appearance: none;
        border: 1px solid #333;
        background: white;
    }

    .item.checked input[type='checkbox']::after {
        content: '✓';
        font-size: 8px;
        display: block;
        text-align: center;
        line-height: 12px;
    }
}