/* ========================================
   PRINT STYLES
   ======================================== */

@media print {

    /* Hide all UI elements */
    .sidebar,
    .page-header,
    .nav-link,
    .btn,
    .modal-container,
    .toast-container,
    #view-container {
        display: none !important;
    }

    /* Show only print container */
    #print-container {
        display: block !important;
    }

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

    /* A4 Page Setup */
    @page {
        size: A4;
        margin: 15mm;
    }

    /* Print Container */
    .print-container {
        width: 100%;
        max-width: 210mm;
        margin: 0 auto;
        background: white;
    }

    /* Activity Section Wrapper */
    .activity-section {
        width: 100%;
        margin-bottom: 15mm;
        padding-bottom: 10mm;
        border-bottom: 2px dashed #D1D5DB;
        page-break-inside: avoid;
    }

    .activity-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Worksheet Styles - Now a section instead of full page */
    .worksheet {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-family: 'Inter', Arial, sans-serif;
    }

    /* Worksheet Header */
    .worksheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5mm 0;
        border-bottom: 2px solid #333;
        margin-bottom: 5mm;
    }

    .worksheet-student-info {
        display: flex;
        align-items: center;
        gap: 5mm;
    }

    .worksheet-student-photo {
        width: 20mm;
        height: 20mm;
        border-radius: 50%;
        border: 2px solid #6379ed;
        overflow: hidden;
    }

    .worksheet-student-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .worksheet-student-details h2 {
        margin: 0 0 2mm 0;
        font-size: 14pt;
        color: #1C1C28;
    }

    .worksheet-student-details p {
        margin: 0;
        font-size: 10pt;
        color: #6B7280;
    }

    .worksheet-center-logo {
        max-width: 30mm;
        max-height: 20mm;
    }

    .worksheet-center-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Worksheet Title */
    .worksheet-title {
        text-align: center;
        margin-bottom: 5mm;
    }

    .worksheet-title h1 {
        margin: 0 0 3mm 0;
        font-size: 18pt;
        color: #5B9BD5;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .worksheet-title p {
        margin: 0;
        font-size: 11pt;
        color: #6B7280;
    }

    /* Worksheet Body */
    .worksheet-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3mm 0;
    }

    /* Matching Game Layout */
    .game-matching {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10mm;
    }

    .matching-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8mm;
    }

    .matching-item {
        display: flex;
        align-items: center;
        gap: 3mm;
    }

    .matching-dot {
        width: 4mm;
        height: 4mm;
        border-radius: 50%;
        background: #FF7B9C;
        flex-shrink: 0;
    }

    .matching-image {
        width: 25mm;
        height: 25mm;
        border: 2px solid #E5E7EB;
        border-radius: 3mm;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: white;
    }

    .matching-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Circle Item Game Layout */
    .game-circle-item {
        display: flex;
        flex-direction: column;
        gap: 8mm;
    }

    .circle-target {
        text-align: center;
        padding: 5mm;
        background: #F3F4F6;
        border-radius: 3mm;
        margin-bottom: 5mm;
    }

    .circle-target-label {
        font-size: 11pt;
        font-weight: 600;
        color: #1C1C28;
        margin-bottom: 3mm;
    }

    .circle-target-image {
        width: 30mm;
        height: 30mm;
        margin: 0 auto;
        border: 2px solid #6379ed;
        border-radius: 3mm;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
    }

    .circle-target-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .circle-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5mm;
        justify-items: center;
    }

    .circle-grid-item {
        width: 25mm;
        height: 25mm;
        border: 2px solid #E5E7EB;
        border-radius: 3mm;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
    }

    .circle-grid-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Find Missing Game Layout */
    .game-find-missing {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8mm;
    }

    .find-missing-instruction {
        font-size: 11pt;
        font-weight: 600;
        color: #1C1C28;
        text-align: center;
        margin-bottom: 3mm;
    }

    .find-missing-pattern {
        display: flex;
        align-items: center;
        gap: 5mm;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pattern-item {
        width: 30mm;
        height: 30mm;
        border: 2px solid #E5E7EB;
        border-radius: 3mm;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
    }

    .pattern-item.missing {
        background: #F3F4F6;
        border: 2px dashed #9B7EBD;
        position: relative;
    }

    .pattern-item.missing::after {
        content: '?';
        font-size: 24pt;
        font-weight: bold;
        color: #9B7EBD;
    }

    .pattern-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .find-missing-options {
        display: flex;
        gap: 5mm;
        margin-top: 5mm;
        padding-top: 5mm;
        border-top: 1px dashed #D1D5DB;
    }

    .missing-option {
        width: 25mm;
        height: 25mm;
        border: 2px solid #E5E7EB;
        border-radius: 3mm;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
    }

    .missing-option img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Worksheet Footer */
    .worksheet-footer {
        margin-top: 5mm;
        padding-top: 3mm;
        border-top: 1px solid #E5E7EB;
        text-align: center;
        font-size: 8pt;
        color: #9CA3AF;
    }

    /* Ensure images print correctly */
    img {
        max-width: 100%;
        height: auto;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Prevent page breaks inside elements */
    .worksheet,
    .game-matching,
    .game-circle-item,
    .game-find-missing {
        page-break-inside: avoid;
    }

    /* Color adjustment for print */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Print Container (Hidden by default) */
#print-container {
    display: none;
}