/* ==========================================================================
   MSA & Gage R&R Professional Industrial Audit Print & Responsive Stylesheet
   Standards: AIAG MSA 4th Edition / IATF 16949 / VDA 5 / CSN EN ISO 9001
   ========================================================================== */

/* Screen Mobile Responsiveness */
.msa-mobile-nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media screen and (max-width: 767.98px) {
    /* Touch-friendly horizontal scroll for pills */
    .msa-mobile-nav-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .msa-mobile-nav-scroll::-webkit-scrollbar {
        display: none;
    }
    .msa-mobile-nav-scroll .nav-item {
        flex: 0 0 auto;
    }

    /* Fixed sticky first column for horizontal matrix scrolling on mobile */
    .msa-matrix-sticky-col {
        position: sticky !important;
        left: 0 !important;
        z-index: 2 !important;
        background-color: #f8fafc !important;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08) !important;
    }
    th.msa-matrix-sticky-col {
        z-index: 3 !important;
        background-color: #f1f5f9 !important;
    }

    /* Compact inputs inside matrix tables for mobile virtual keyboard */
    .msa-matrix-table input.form-control-sm {
        font-size: 0.85rem !important;
        padding: 0.25rem 0.2rem !important;
        height: auto !important;
    }

    /* Compact typography for phone viewports */
    .msa-mobile-title {
        font-size: 1.25rem !important;
    }
    .msa-mobile-kpi-val {
        font-size: 1.15rem !important;
    }
}

@media print {
    /* 1. Page Configuration (A4 Portrait with 8mm safety margins) */
    @page {
        size: A4 portrait;
        margin: 8mm 8mm 8mm 8mm;
    }

    /* 2. Unconditionally Hide Non-Audit Web UI (Zednner navigation, footer, buttons) */
    header,
    footer,
    nav,
    .zdn-navbar,
    .navbar,
    .sidebar,
    .top-row,
    .site-footer,
    .no-print,
    .d-print-none,
    .btn,
    .nav-pills,
    .nav-tabs,
    .alert,
    .modal,
    .toast,
    #blazor-error-ui,
    .breadcrumb,
    .msa-print-page-break,
    a[href]:after {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Base Document Architecture & Reset */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        color: #0f172a !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 8pt !important;
        line-height: 1.3 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .page {
        display: block !important;
        flex-direction: column !important;
    }

    main, .content, .container, .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* 4. Multi-Page Strict Pagination Controls (Strict 3-Page Flow)
       NOTE: Never combine break-after with break-before on adjacent elements,
       which creates empty blank pages in Chromium. Only break-before is used. */
    .msa-print-page-1 {
        display: block !important;
        clear: both !important;
    }

    .msa-print-page-2 {
        page-break-before: always !important;
        break-before: page !important;
        clear: both !important;
        display: block !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .msa-print-page-3 {
        page-break-before: always !important;
        break-before: page !important;
        clear: both !important;
        display: block !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .avoid-page-break {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* 5. Trial Watermark Overlay (Repeats across pages via fixed position) */
    .print-watermark {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        pointer-events: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .print-watermark .watermark-content {
        font-size: 26pt !important;
        font-weight: 900 !important;
        color: rgba(220, 38, 38, 0.12) !important;
        transform: rotate(-32deg) !important;
        text-transform: uppercase !important;
        letter-spacing: 2.5px !important;
        white-space: nowrap !important;
        user-select: none !important;
        border: 3.5px dashed rgba(220, 38, 38, 0.18) !important;
        padding: 12px 28px !important;
        border-radius: 8px !important;
        text-align: center !important;
    }

    /* 6. Professional Cards & Data Tables */
    .card {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        border-radius: 4px !important;
        padding: 6px 8px !important;
        margin-bottom: 6px !important;
        background: #ffffff !important;
    }

    .table {
        font-size: 7.5pt !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .table th, .table td {
        padding: 2px 4px !important;
        border: 1px solid #e2e8f0 !important;
    }

    .table-light, thead.table-light th {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
        font-weight: 700 !important;
    }

    /* 7. Input Values to Flat Clean Text */
    input[type="number"],
    input[type="text"],
    textarea,
    select {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        text-align: center !important;
        font-weight: 600 !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        font-size: 7.8pt !important;
    }

    /* 8. Side-by-Side ANOVA & Variance Tables */
    .msa-print-side-by-side {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        margin-left: -3px !important;
        margin-right: -3px !important;
        margin-bottom: 6px !important;
    }

    .col-print-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
        box-sizing: border-box !important;
    }

    /* 9. KPI Metric Grid Utilities */
    .msa-print-kpi-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        margin-left: -2px !important;
        margin-right: -2px !important;
        margin-bottom: 6px !important;
    }

    .col-print-2 {
        width: 16.666% !important;
        flex: 0 0 16.666% !important;
        max-width: 16.666% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        box-sizing: border-box !important;
    }

    .col-print-3 {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        box-sizing: border-box !important;
    }

    .col-print-4 {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        box-sizing: border-box !important;
    }

    .msa-print-kpi-grid .p-3 {
        padding: 4px 5px !important;
    }

    .msa-print-kpi-grid strong {
        font-size: 11pt !important;
        display: block !important;
        margin: 2px 0 !important;
    }

    /* 10. 4-in-1 Plotly Diagnostics Grid (Page 2) */
    .msa-print-charts-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -4px !important;
    }

    .msa-print-charts-grid .col-lg-6,
    .msa-print-charts-grid .col-print-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }

    .msa-print-chart-box {
        height: 315px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 4px !important;
        padding: 4px 6px !important;
        background: #ffffff !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        box-sizing: border-box !important;
    }

    .msa-print-chart-box .js-plotly-plot,
    .msa-print-chart-box div[id$="Plot"] {
        height: 275px !important;
        width: 100% !important;
    }

    /* 11. Sign-off Box & Footer (Page 3) */
    .sign-off-box {
        border: 1.5px solid #0f172a !important;
        border-radius: 4px !important;
        padding: 6px 10px !important;
        background: #f8fafc !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .sign-line {
        border-bottom: 1px dotted #334155 !important;
        display: block !important;
        height: 12px !important;
        margin-top: 18px !important;
        margin-bottom: 3px !important;
    }

    .print-footer-rule {
        border-top: 1px solid #cbd5e1 !important;
        margin-top: 6px !important;
        padding-top: 3px !important;
        font-size: 7pt !important;
        color: #64748b !important;
    }

    .col-print-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}