/* The print view (body.print): the page is the sheet, US Letter landscape. Sizes are CSS pixels at 96 per inch, the same on the screen and on the paper,
   so the sheet is printed as it is shown, with no scaling: the sheet is 11 x 8.5 in (1056 x 816 px), the canvas inside the padding of 0.5 in is 960 x 720 px.
   @page can't be scoped by a class, so it is set for every printing of the application; the size and the margin of the paper are fixed in it.
   The margin 0 removes the header and the footer of the browser; the padding of the sheet is the margin of the content. */
:root {
    --sheet-w: 11in;
    --sheet-h: 8.5in;
    --sheet-pad: 0.4in;

    --fs-legend: 7.5pt;
    --fs-dirs: 7.5pt;

    --notes-width: 220px;
}

@page {
    size: letter landscape;
    margin: 0;
}

/* on the screen: the sheet in the middle of a grey background, in the middle of the window both ways; the auto margins of the sheet (not align-items)
   keep it reachable by the scroll when the window is smaller than the sheet */
html.print {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    display: flex;
    overflow: auto;
    background: #c8c8c8;
}

/* the margins of the print dialog are off: the content takes the whole sheet (0px, not 0: the value is used in calc() below, where a number is not a length) */
body.print.print-no-margins { --sheet-pad: 0px; }

body.print {
    width: var(--sheet-w);
    max-width: none;
    /* 1 px less than the paper: the sheet that fills the page to the last pixel can push an empty second page */
    height: calc(var(--sheet-h) - 1px + 1px);
    min-height: 0;
    flex: none;
    margin: auto;
    padding: var(--sheet-pad);
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
    /* the backgrounds and the colors are printed as they are, not saved as ink */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;

    --ws-paddings: 0;
    --map-paddings: 0;
}

/* bp.css is turned off in the print view; its only rule of the wide screens is kept: the side panel keeps its width while it is collapsing */
.print.horizontal .r-panel-holder { min-width: calc(var(--max-rpanel-width) - var(--ws-paddings)); }

.print .main-nav, .print .mapStyles, .print .route-navigation, .print .searchBox, .print .tabs { display: none !important; }
.print .map-holder { border-radius: 0; border: none; box-shadow: none; }

/* the height of the notes never exceeds the one of the map: what does not fit is cut (overflow), the footnote stays at the bottom of the map. The height is set here
   from the sheet (as the map's, see printMapSize), not left to the stretching of the flex items, which some browsers size by the content of the item. */
.print .map-view { display: flex; min-height: 0; max-height: calc(var(--sheet-h) - 2 * var(--sheet-pad)); }
.print .print-button-holder { display: flex; position: absolute; top: 10px; left: 10px; opacity: 1; pointer-events: all; gap: 20px; transition: var(--trans-func); transition-property: opacity; opacity: 0; }
.print .map-view.panning .print-button-holder { pointer-events: all; opacity: 1;}
/* the list of the notes to include opens below its button, the icon of the button is turned upside down; the note that is not included is not shown */
.print .included-legends { position: relative; margin-left: -15px; }
.print .included-legends.no-choice { display: none; }
.print .included-legends-list { position: absolute; top: calc(100% + 6px); left: 0; display: none; padding: 15px; background-color: var(--c-white-05); border: 1px solid var(--c-grey-03); flex-direction: column; gap: 5px; border-radius: 4px;}
.print .included-legends-container { display: flex; flex-direction: column; gap: 5px; }
.print .included-legends-container .interface-field label { white-space: nowrap; flex: 1; }
.print .included-legends-container .interface-field input { flex: 0; }
.print .included-legends.open .included-legends-list { display: flex; }
.print .included-legends .interface-field.unavailable { display: none; }
.print #btnIncludedNotes .icon svg { transition: var(--trans-func); transition-property: transform; }
.print .included-legends.open #btnIncludedNotes .icon svg { transform: scaleY(-1); }
.print-notes .dialog-box.excluded { display: none !important; }
.print .print-notes { 
    display: flex; flex-direction: column; flex: 0 0 var(--notes-width); max-width: var(--notes-width); width: 100%; 
    border: 1px solid var(--c-grey-03); 
    position: relative; padding-bottom: 35px; overflow: hidden; min-height: 0; max-height: calc(var(--sheet-h) - 2 * var(--sheet-pad));
    /* hidden while the map and the dialogs are set, then it fades in (the class is set by the application) */
    opacity: 0; transition: var(--trans-func); transition-property: opacity; }
.print .print-notes.ready { opacity: 1; }

.print-notes .dialog-container { 
    border: none !important; box-shadow: none !important; backdrop-filter: none !important; height: fit-content !important; transition: none !important;
    min-width: 100% !important; max-width: calc( var(--notes-width) - var(--map-paddings)*2 - 2px) !important; overflow: hidden; padding: var(--dialog-paddings) !important;
}

.print-notes * { transition: none !important; }
.print-notes .dialog-box-holder { padding: 0 !important; }
.print-notes .dialog-box-holder:after { display: none; }
.print-notes #dlgLayers { display: none !important; } 
.print-notes #dlgLegends, .print-notes #dlgDirections, .print-notes #dlgSearchResults { position: relative !important; top: unset !important; left: unset !important; width: 100% !important; min-width: unset !important; max-width: 100% !important; }
.print-notes #dlgLegends { order: 3; }
.print-notes #dlgDirections { order: 2; border-top: none !important;}
.print-notes #dlgSearchResults { order: 1; }
.print-notes #dlgDirections.empty, .print-notes #dlgSearchResults.empty { display: none !important; }
.print-notes .dialog-body { max-height: fit-content; padding-bottom: 0; }
.print-notes #dlgLegends .dialog-body { max-height: unset !important; padding-bottom: 0 !important; }
.print-notes .dialog-title-bar { height: fit-content; padding: 5px 10px; }
.print-notes .dialog-title { padding: 0; font-size: var(--fs-legend); height: fit-content; }
.print-notes .dialog-icon, .print-notes .dragger, .print-notes .label-control { display: none !important; }
.print-notes .legend-item { max-height: fit-content; }
.print-notes .legend-item.hidden { display: none !important; }
.print-notes .legend-item .legend-container { padding: 3px 10px; font-size: var(--fs-legend); }
.print-notes .legend-item.single { padding-left: 10px; gap: 2px; }
.print-notes .legend-item.label .icon { min-width: 14px; min-height: 14px; }
.print-notes .legend-item.boundary .icon, .print-notes .color-legend { min-width: 10px; min-height: 10px; max-width: 10px; max-height: 10px; }
.print-notes .legend-item.boundary .icon { margin-top: 1px; }
.print-notes .legend-item.active:after { display: none; }
.print-notes .legend-item:not(.single) + .legend-item.single { margin-top: 5px; }
.print-notes .dialog-box.minimized .dialog-body { max-height: unset !important; transition: none !important; }
.legend-item.label .icon img {transform: translate(calc(-50% - 1px), -50%); }

.print-notes #dlgDirections { border-left: none !important; padding: 0 !important; }
.print-notes .directions { max-height: unset !important; padding: 0;  }
.print-notes .dialog-directions-header { padding: 3px 5px 3px 10px; font-size: var(--fs-dirs); border-bottom: none; }
.print-notes .route-bar { display: none; }
.print-notes .direction-item { margin: 0; padding: 1px 5px 1px 7px; font-size: var(--fs-dirs); }
.print-notes .direction-item:first-child { margin-top: 3px; }
.print-notes .directions-container:before, .print-notes .direction-item:before { left: 13px; }
.print-notes .direction-item .icon, .print-notes .direction-item .icon { flex-basis: 7px; min-width: 7px; max-width: 7px; min-height: 7px; max-height: 7px; align-items: center; justify-content: center; display: flex; margin: 5px 3px 0; }
.print-notes .direction-item .icon:before, .print-notes .direction-item .icon:before { width: 3px; height: 3px; transform: none; left: unset; top: unset; position: relative; display: block; }
.print-notes .direction-item:first-child .icon, .print-notes .direction-item:last-child .icon { flex-basis: 13px; min-width: 13px; max-width: 13px; min-height: 13px; max-height: 13px; 
    align-items: center; justify-content: center; display: flex; margin: 1px 0 0; }
.print-notes .direction-item:first-child .icon:before, .print-notes .direction-item:last-child .icon:before { width: 7px; height: 7px; transform: none; left: unset; top: unset; position: relative; display: block; }
.print-notes .direction-item .dist { font-size: 0.8em; }
.print-notes .directions-info { gap: 1px; }
.print-notes .directions-time { font-size: 0.8em; display: flex; flex-direction: row; align-items: center; gap: 4px; }
.print-notes .directions-time .small-icon { min-width: 8px; margin-right: 0; flex: 0; align-items: center; }

.print-notes #dlgSearchResults .control-bar { padding-left: 10px; border-bottom: none; }
.print-notes #dlgSearchResults .control-bar .location { padding: 3px 0; font-size: var(--fs-dirs); }
.print-notes #dlgSearchResults .control-bar .loc-head { gap: 3px; }
.print-notes #dlgSearchResults .control-bar .loc-head .icon { width: 11px; height: 11px; flex: 0 0 11px;}
.print-notes #dlgSearchResults .control-bar .location .hint, .print-notes #dlgSearchResults .route-hide { display: none !important; }
.print-notes #dlgSearchResults .schools-footer, .print-notes #dlgSearchResults .school-link { display: none; }
.print-notes #dlgSearchResults .school-item { height: fit-content; max-height: fit-content; font-size: var(--fs-dirs); }
.print-notes #dlgSearchResults.directions-shown .school-item:not(.active) { display: none !important; }
.print-notes #dlgSearchResults .school-item-container { padding: 2px 5px 2px 7px; gap: 6px; border-bottom: none; }
.print-notes #dlgSearchResults .phone, .print-notes #dlgSearchResults .address { font-size: var(--fs-dirs); gap: 3px;}
.print-notes #dlgSearchResults .school-info { gap: 3px; } 
.print-notes #dlgSearchResults .school-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.print-notes #dlgSearchResults .route-info { max-height: fit-content; }
.print-notes #dlgSearchResults .school-info .row-1 { gap: 2px; }
.print-notes #dlgSearchResults .school-contacts .icon { width: 8px; height: 8px; flex: 0 0 8px; }
.print-notes #dlgSearchResults .school-contacts .address .icon { margin-top: 2px; }

.print-notes.no-notes { position: absolute; bottom: 0; right: 0; border: none; }
.print .print-notes .footnote { 
    display: flex; background-color: var(--c-sand-04); padding: 2px 10px; position: absolute; bottom: var(--map-paddings); left: var(--map-paddings); right: var(--map-paddings); height: 30px; justify-content: center; z-index: 100; }
.print-notes.no-notes .footnote { background-color: transparent; justify-content: flex-end; }    



/* The picture of the map for the print of Firefox (it is made only there, the application sets the class print-image of html when it has it): it covers the canvas, which is
   printed blank by Firefox. */
.print-map-image { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

@media print {
    html.print-image .print-map-image { display: block; }
    html.print-image .main-map canvas { visibility: hidden; }

    .modal-view, .main-nav, .print-button-holder { display: none !important; }
    .print .print-notes { opacity: 1; transition: none; }

    @page {
        size: letter landscape;
        margin: 0;
    }

    html.print {
        display: block;
        min-height: 0;
        padding: 0;
        background: none;
        overflow: visible;
    }

    body.print {
        margin: 0;
        box-shadow: none;
        break-inside: avoid;
        break-after: avoid;
    }
}