/*
    These CSS rules are used to style the printed version of the SIPFront.
 */

/* Hide elements.
   The annotation overlay is off-canvas chrome -- fixed, 480px wide, parked past the right
   edge with translateX(100%) and only visibility:hidden. It still has a box out at x=1274,
   and Safari's print shrink-to-fit measures the widest box on the page: the whole report
   came out at 62% of its size, text and all, because of a comments panel nobody asked to
   print. Chrome ignores it. Hidden outright, there is nothing to shrink to. */
.no-print,
#launcher,
.main-header,
nav.main-header,
.main-sidebar,
aside.main-sidebar,
.content-header,
#sf-agent-widget,
.sf-agent-tooltip,
.sf-annotation-overlay,
.sf-annotation-overlay-backdrop {
    display: none !important;
    visibility: hidden !important;
}

/* Runtime print marker for Ctrl+P preview quirks */
body.sf-printing .main-header,
body.sf-printing .main-sidebar,
body.sf-printing .content-header,
body.sf-printing #launcher,
body.sf-printing #sf-agent-widget,
body.sf-printing .sf-agent-tooltip {
    display: none !important;
    visibility: hidden !important;
}

/* Keep links visible but remove browser link styling */
a,
a:link,
a:visited,
a:hover,
a:active {
    color: inherit !important;
    text-decoration: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* AI agent sidebar dock shrinks content — restore full width when printing */
body.sf-agent-sidebar .main-header,
body.sf-agent-sidebar .content-wrapper,
body.sf-agent-sidebar .main-footer {
    margin-right: 0 !important;
}

/* Shows hidden elements, hide otherwise */
.only-print {
    display: block !important;
}

/* Shows hidden elements, but don't hide otherwise */
.always-print {
    display: block !important;
}

/* Classes that control page break */
.page-break-before {
    page-break-before: always;
    /* CSS 2.1 */
}

.page-break-avoid {
    page-break-inside: avoid;
    /* CSS 2.1 */
    -webkit-column-break-inside: avoid;
    /* For WebKit browsers */
    break-inside: avoid;
    /* Newer CSS property, recommended */
}

/* Make sure the background colors are printed regardless of browser settings */
.badge,
.badge-success,
.badge-danger,
.badge-primary,
.badge-secondary,
.badge-info,
.btn-primary,
.raw-sip-message .circle,
div.pointer {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

/* Page setup */
@page {
    size: A4 portrait;
}

html,
body,
.content-wrapper,
.main-footer {
    background-color: #FFFFFF;
}

/* The session status card (run/_scenario_info.html.ep) floats position: fixed once
   scrolled under the top bar (.is-pinned, resources.scss) -- meaningless on a printed
   page, which has no scroll position to float over, and it would otherwise cover
   whatever prints underneath it on every page after the first. left/width are also set
   inline at pin time by the IntersectionObserver in _scenario_info.html.ep -- an inline
   style normally beats any stylesheet rule regardless of specificity, so !important here
   is load-bearing, not decorative, to still win over them. */
.sf-session-state-card.is-pinned {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
    box-shadow: none !important;
}
.sf-session-state-wrap {
    height: auto !important;
}

/* IFrames */
iframe {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    /* Optional, to constrain their height */
}

.card-call-states {
    height: 400px;
}

.sipp-error-logs {
    height: 1200px;
}

/* General styles */
.section {
    width: 100%;
}

.section-header {
    font-size: x-large;
    text-align: left;
    padding-top: 32px;
    padding-bottom: 32px;
}

.card-title {
    font-size: large;
    font-weight: bold;
    float: left;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 20px;
}

.card,
.info-box {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #CCCCCC;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

.iframe-container {
    overflow: hidden !important;
}

.message {
    padding: 1.25rem;
}

.sf-siptrace-container div {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#sipMessageList div.raw-sip-message {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
    padding: 10px;
    word-break: break-word;
}

#sipMessageList .card,
#sipMessageList .info-box,
.no-print-border {
    border: none !important;
}

.sip-trace-diagram-row {
    page-break-inside: avoid;
    /* CSS 2.1 */
    -webkit-column-break-inside: avoid;
    /* For WebKit browsers */
    break-inside: avoid;
    /* Newer CSS property, recommended */
}

.sf-siptrace .circle span {
    color: #FFFFFF;
}

#print-title {
    font-size: x-large;
}

/* Print title contains the test-name anchor after the arrow icon */
#print-title a,
#print-title a:link,
#print-title a:visited,
#print-title a:hover,
#print-title a:active {
    color: inherit !important;
    text-decoration: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Run details header key-value links should print like plain text */
#agent-pool a,
#agent-pool a:link,
#agent-pool a:visited,
#agent-pool a:hover,
#agent-pool a:active,
#test-description a,
#test-description a:link,
#test-description a:visited,
#test-description a:hover,
#test-description a:active {
    color: inherit !important;
    text-decoration: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.artifact-download {
    font-size: large;
    font-weight: bold;
}

.col-lg-6,
.col-md-3 {
    width: 50%;
}

.col-lg-4 {
    width: 33%;
}

/* Chart.js/ECharts charts (run-detail pages): both size their canvas/div in
   pixels to the on-screen container and never revisit that once printing
   narrows the layout -- sf-chartjs.js's beforeprint handler re-resizes
   every chart instance to fit, but this is the CSS-level backstop so a
   chart can never visually overflow its card even if that resize is too
   slow/misses a browser's print timing.

   max-width alone wasn't enough for ECharts: it renders into a <canvas>
   wrapped in ECharts' own internal div, which gets an explicit pixel
   width straight from ECharts (not a CSS width our stylesheet could
   override) -- max-width:100% on the canvas just meant the canvas filled
   100% of that already-oversized wrapper, still wider than the card.
   overflow:hidden on the card-level container clips it regardless of
   what ECharts does inside, and doesn't depend on knowing ECharts'
   internal DOM structure. */
@media print {
    canvas {
        max-width: 100% !important;
    }
    .sf-rtpengine-chart {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* The app footer, on every printed page: centred under the sheet and small. */
@media print {
    .main-footer {
        max-width: 210mm;
        margin: 0 auto;
        padding: 0 10mm;
        text-align: center;
        font-size: 10px;
    }

    .main-footer a {
        text-decoration: none;
        color: inherit;
    }
}

/*
    Voice AI report (templates/project/ai_voice_bot_report.html.ep), and the recordings
    wizard's print of its analysed calls (body.sf-rw-printing while it prints; the document
    itself and its rules are in public/css/component/wizard.css).

    The report is the whole sheet. AdminLTE keeps a 250px gutter on .content-wrapper for
    the sidebar, and the sidebar is not printed -- left in place it prints as 65mm of
    nothing down the left of every page while the content is squeezed into what is left.
    So the layout chrome is unwound here, and the sheet's own margin is the browser's.

    Everything about how the report itself looks on paper -- no card borders or fills, one
    widget per row, nothing split across a page -- is in
    public/css/component/voice-ai-report.css, beside the screen design it belongs to. The
    .voice-ai-report/.segment rules that used to live here were for markup this page no
    longer renders.
*/
@media print {
    /* Bootstrap's print reboot, inside adminlte.min.css, sets `body { min-width: 992px
       !important }` (with `@page { size: a3 }`) so that a desktop grid still prints as a
       desktop grid. On an A4 sheet -- 794 CSS px wide -- that lays the report out 992px
       wide and leaves Chrome to fit it, which is what put the content off to one side of
       the page with a band of nothing beside it. The report is not a fixed grid; it can
       have the width of whatever sheet it is printed on. */
    body.voice-ai-report-page,
    body.sf-rw-printing {
        min-width: 0 !important;
    }

    /* .sidebar-mini is in the selector to beat sipfront-modern-003.css, which insets the
       main column by the sidebar's width with `margin-left: ... !important` at three
       classes of specificity. Two classes lose to it however many !importants they carry,
       and the gutter stays. */
    body.voice-ai-report-page,
    body.voice-ai-report-page.sidebar-mini .wrapper,
    body.voice-ai-report-page.sidebar-mini .content-wrapper,
    body.voice-ai-report-page.sidebar-mini .main-footer,
    body.sf-rw-printing,
    body.sf-rw-printing.sidebar-mini .wrapper,
    body.sf-rw-printing.sidebar-mini .content-wrapper,
    body.sf-rw-printing.sidebar-mini .main-footer {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        background: #FFFFFF !important;
    }

    /* Breathing room at the trim, on top of whatever margin the sheet itself has. WebKit
       does not honour @page margin, so the horizontal one is padding here rather than
       there, where both engines apply it. */
    body.voice-ai-report-page.sidebar-mini .content-wrapper,
    body.sf-rw-printing.sidebar-mini .content-wrapper {
        padding: 0 6mm !important;
    }
}