﻿
@media print {
    nav,
    .sidebar,
    .nav-menu,
    .nav-flex-column,
    .nav-top-section,
    .user-tabs,
    .user-tabs-header-only,
    .exercise-machines-container,
    .scoring-report-exercises-container,
    .rz-dialog-mask,
    .rz-dialog-titlebar,
    header,
    footer,
    .primary-button,
    .medium-button,
    .scoring-report-title button,
    .scoring-report-title > div:empty,
    .group-manage-container > .rz-stack > .rz-stack,
    body:has(.rz-dialog-wrapper) .dashboard-container,
    body:has(.rz-dialog-wrapper) .extra-margin.page-margin,
    body:has(.rz-dialog-wrapper) .p-3.activity-radzencard,
    body:has(.rz-dialog-wrapper) .activity-list-view,
    body:has(.rz-dialog-wrapper) .progression-list-view,
    body:has(.rz-dialog-wrapper) .statistics-section,
    body:has(.rz-dialog-wrapper) .page-margin,
    body:has(.rz-dialog-wrapper) .page-margin-no-top,
    body:has(.rz-dialog-wrapper) .group-manage-container {
        display: none !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rz-dialog-wrapper {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: white !important;
    }

    .rz-dialog {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        transform: none !important;
        overflow: visible !important;
        background: white !important;
    }

    .rz-dialog-content {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 20px !important;
        background: white !important;
    }

    html, body {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        background-color: white !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Looks better on Edge, but worse on Chrome*/
    /* #app, app, .page, .page > * {
        margin: 0 !important;
        padding: 0 !important;
    }*/

    main, .page, .page-margin, .page-margin-no-top,
    .group-manage-container, .group-container {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        background: white !important;
        background-color: white !important;
    }

        main > .rz.rz-stack {
            margin-top: 0 !important;
        }

    .user-exercise-small-box {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 20px 40px !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
    }

    .exercise-score-icon {
        flex-shrink: 0 !important;
        min-width: 60px !important;
        min-height: 60px !important;
        width: 80px !important;
        height: 80px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

        .exercise-score-icon.exercise-score-icon--metric {
            min-width: 50px !important;
            min-height: 50px !important;
            width: 50px !important;
            height: 50px !important;
        }

    .donut-chart {
        width: 100px;
    }

    .score-donut-chart {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        width: 120px !important;
    }

    .score-donut-chart-inner {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 120px !important;
    }

    .score-donut-chart-title {
        text-align: center !important;
        width: 100% !important;
    }

    .score-donut-chart-value {
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .score-donut-chart-icon {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 120px !important;
        height: 100px !important;
    }

        .score-donut-chart-icon .exercise-score-icon,
        .score-donut-chart-icon .exercise-score-icon img {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

    .score-donut-radzen-chart {
        position: relative !important;
        height: 100px;
        width: 120px;
        min-width: 120px;
        margin-left: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 2 !important;
    }

    .score-donut-chart > .exercise-score-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .group-manage-container.px-5,
    .group-manage-container.pt-2,
    .group-manage-container.h-100 {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        gap: 0 !important;
    }

    @page {
        size: A4 portrait;
        margin: 0;
    }

    @page :first {
        margin-top: 0;
    }

    .rz-row:has(.exercise-detailed-box) > .rz-col:not(.exercise-detailed-box) {
        display: none !important;
    }

    .exercise-status-container .scoring-report-title,
    .scoring-report-container .scoring-report-title {
        border-radius: 0 !important;
    }

    .exercise-detailed-box {
        width: 100% !important;
        max-width: none !important;
        flex: 1 !important;
    }

        .exercise-detailed-box > .rz-stack,
        .exercise-detailed-box > .rz-stack > .rz-col {
            width: 100% !important;
            max-width: none !important;
        }

    .rz-row:has(.exercise-detailed-box) {
        width: 100% !important;
        max-width: none !important;
    }

    .exercise-status-main {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        page-break-before: auto !important;
        break-before: auto !important;
        display: block !important;
    }

    .exercise-status-container table {
        width: 100% !important;
    }

    .exercise-status-table-row1 {
        width: 40% !important;
    }

    .exercise-status-table-row2,
    .exercise-status-table-row3 {
        width: 15% !important;
    }

    .exercise-status-main .user-exercise-stauts-box {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        text-align: center !important;
    }

    .exercise-status-subtitle,
    .exercise-status-main h5 {
        text-align: center !important;
        width: 100% !important;
    }

    .scoring-report-container.d-flex,
    .scoring-report-container .d-flex,
    .scoring-report-main.d-flex,
    .scoring-report-container.align-items-center,
    .scoring-report-main.align-items-center {
        align-items: stretch !important;
    }

    .scoring-report-title h3 {
        margin: 0 !important;
        border-radius: 0 !important;
        margin-left: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .scoring-report-container .scoring-report-table-th1,
    .scoring-report-container .scoring-report-table-td1 {
        width: 70px !important;
        min-width: 70px !important;
        flex-shrink: 0 !important;
    }

    .user-exercise-container {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #progress-report-content {
        position: relative !important;
        width: 210mm !important;
        max-width: 210mm !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        height: auto !important;
        background: white !important;
        background-color: white !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

        #progress-report-content *:not(.exercise-score-icon):not(.exercise-score-icon--metric):not(.rz-chart):not(.donut-chart):not(.score-donut-chart):not(.score-donut-chart-icon):not(.score-donut-radzen-chart) {
            max-width: none !important;
        }

        #progress-report-content .scoring-report-main,
        #progress-report-content .user-exercise-small-box {
            width: 100% !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            position: static !important;
            border: none !important;
            box-shadow: none !important;
            background: white !important;
            background-color: white !important;
            padding: 20px 30px !important;
        }

        #progress-report-content hr ~ div {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }

        #progress-report-content .d-flex.align-items-center.w-60 {
            page-break-after: avoid !important;
            break-after: avoid !important;
            flex-wrap: nowrap !important;
            max-width: 100% !important;
        }

        #progress-report-content .progress-category-section,
        .progress-category-section {
            overflow: visible !important;
            margin-bottom: 20px !important;
        }

        #progress-report-content .d-flex.flex-wrap.justify-content-center {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
            margin: 15px 0 75px 0 !important;
            padding: 10px 0 !important;
            flex-wrap: nowrap !important;
            flex-direction: row !important;
            justify-content: flex-start !important;
            align-items: center !important;
            gap: 15px !important;
            width: 100% !important;
            max-width: 100% !important;
        }

            #progress-report-content .d-flex.flex-wrap.justify-content-center .rz-chart,
            #progress-report-content .d-flex.flex-column.align-items-end .rz-chart {
                width: 450px !important;
                max-width: 450px !important;
                height: 260px !important;
                overflow: visible !important;
            }

        #progress-report-content .d-flex.flex-column.align-items-end {
            overflow: visible !important;
            padding-bottom: 15px !important;
        }

        #progress-report-content .score-donut-chart {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
            flex-shrink: 0 !important;
            width: 100px !important;
            min-width: 100px !important;
        }

        #progress-report-content .d-flex.flex-column.justify-content-start.ms-3 {
            text-align: left !important;
            align-items: flex-start !important;
        }

        #progress-report-content .d-flex.flex-nowrap.align-items-center.gap-2 {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            gap: 10px !important;
            text-align: left !important;
            margin-left: -15px !important;
        }

            #progress-report-content .d-flex.flex-nowrap.align-items-center.gap-2 > span.exercise-score-icon {
                width: 80px !important;
                height: 80px !important;
                min-width: 80px !important;
                min-height: 80px !important;
                flex-shrink: 0 !important;
            }

            #progress-report-content .d-flex.flex-nowrap.align-items-center.gap-2 > span.fw-bold {
                width: auto !important;
                text-align: left !important;
            }

        #progress-report-content .d-flex.align-items-center.w-60.ms-1 {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            text-align: left !important;
            flex-wrap: nowrap !important;
            width: auto !important;
            max-width: 100% !important;
            gap: 0 !important;
            margin-left: -6px !important;
        }

            #progress-report-content .d-flex.align-items-center.w-60.ms-1 > span.exercise-score-icon {
                align-items: center !important;
                justify-content: center !important;
                width: 60px !important;
                height: 60px !important;
                max-width: 60px !important;
                max-height: 60px !important;
                margin: 10px !important;
            }

            #progress-report-content .d-flex.align-items-center.w-60.ms-1 > span.small {
                width: auto !important;
                flex: 0 1 auto !important;
                margin-left: 5px !important;
                text-align: left !important;
            }

        #progress-report-content .graph-size,
        .graph-size {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
            width: 85% !important;
            max-width: 425px !important;
            margin-left: 10px !important;
            padding-left: 10px !important;
            overflow: visible !important;
        }

        #progress-report-content .metric-chart {
            width: 85% !important;
            max-width: 425px !important;
            height: 19em !important;
        }

        #progress-report-content .rz-chart,
        #progress-report-content .rz-chart svg {
            overflow: visible !important;
        }

        #progress-report-content .rz-chart {
            margin-left: 30px !important;
            padding-left: 20px !important;
        }

        #progress-report-content .d-flex.align-items-center.w-60 > span:last-child {
            flex: 1 !important;
            min-width: 0 !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
        }

        #progress-report-content .d-flex.flex-column.justify-content-center.gap-0 {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
            margin-bottom: 30px !important;
        }

        #progress-report-content hr {
            page-break-after: avoid !important;
            break-after: avoid !important;
            margin: 20px 0 10px 0 !important;
        }

        #progress-report-content .d-flex.justify-content-between.align-items-center {
            page-break-after: avoid !important;
            break-after: avoid !important;
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }

        #progress-report-content .d-flex.flex-column.justify-content-center.gap-0.mt-4 > .d-flex.flex-column.align-items-center {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }

        #progress-report-content .sub-metric-text {
            page-break-after: avoid !important;
            break-after: avoid !important;
        }
}
