/* ============================================================
   Worksheet Wonder — name worksheet generator styles
   Screen layout for the generator + print rules that print
   ONLY the worksheet sheet (nav, controls, footer hidden).
   ============================================================ */

.ng-canvas-frame {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 6px 24px rgba(31, 58, 95, 0.08);
}

#print-sheet {
    position: relative;
}

#ng-canvas {
    width: 100%;
    height: auto;
    display: block;
    background: #ffffff;
    border-radius: 6px;
}

.ng-empty {
    position: absolute;
    inset: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #8A97A8;
    background: rgba(255, 255, 255, 0.88);
    border: 2px dashed #CBD5E1;
    border-radius: 8px;
    padding: 2rem;
}

#print-sheet.has-sheet .ng-empty {
    display: none;
}

/* ---------- print: only the sheet ---------- */
@media print {
    body * {
        visibility: hidden !important;
    }
    #print-sheet,
    #print-sheet * {
        visibility: visible !important;
    }
    #print-sheet {
        position: absolute !important;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .ng-canvas-frame {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    #ng-canvas {
        width: 100% !important;
        height: auto !important;
    }
    .ng-empty {
        display: none !important;
    }
    @page {
        size: A4 portrait;
        margin: 8mm;
    }
}