/*
    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;
}

/* 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%;
}

/* 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).

    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 {
        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 {
        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 {
        padding: 0 6mm !important;
    }
}