/* Print Styles for Wardley Map */
@media print {
    /* Hide UI elements */
    .app-header,
    .app-footer,
    .tutorial-panel,
    .strategy-panel,
    .canvas-toolbar,
    .context-menu,
    .connection-mode-overlay,
    .welcome-screen,
    .canvas-hint,
    .toast {
        display: none !important;
    }

    /* Reset body */
    body {
        background: white;
        margin: 0;
        padding: 0;
    }

    /* Full page canvas */
    .app-main {
        display: block;
        height: auto;
        overflow: visible;
    }

    .canvas-container {
        display: block;
        height: auto;
        overflow: visible;
    }

    .canvas-wrapper {
        display: block;
        height: auto;
        overflow: visible;
        page-break-inside: avoid;
    }

    .wardley-canvas {
        width: 100%;
        height: auto;
        min-height: 600px;
        max-height: 800px;
    }

    /* Print header with title */
    .canvas-wrapper::before {
        content: attr(data-title);
        display: block;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
        padding-top: 20px;
    }

    /* Ensure components are visible - standard Wardley style */
    .component circle {
        fill: white !important;
        stroke: #333 !important;
        stroke-width: 1.5px !important;
    }

    .component text {
        fill: #333 !important;
        font-size: 11px !important;
    }

    /* Ensure connections are visible */
    .connection {
        stroke: #666 !important;
        stroke-width: 1px !important;
    }

    /* Grid lines for print */
    .axis-line {
        stroke: #333 !important;
        stroke-width: 1px !important;
    }

    .grid-line-dashed {
        stroke: #999 !important;
        stroke-width: 0.5px !important;
        stroke-dasharray: 4 4 !important;
    }

    /* Axis labels */
    .axis-labels text {
        fill: #333 !important;
    }

    .axis-label-title {
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    .evolution-label {
        font-size: 11px !important;
    }

    /* Page setup */
    @page {
        size: A4 landscape;
        margin: 1cm;
    }

    /* Add legend at bottom */
    .canvas-wrapper::after {
        content: "Evolution: Genesis > Custom > Product > Commodity | Value Chain: Visible (top) > Invisible (bottom)";
        display: block;
        font-size: 10px;
        color: #6b7280;
        text-align: center;
        margin-top: 20px;
        padding-bottom: 10px;
        border-top: 1px solid #e5e7eb;
        padding-top: 10px;
    }
}