/********************************
 * print.css
 ********************************/
@media print {

  /*************************************************
   * 1) FORCE LETTER SIZE (8.5 x 11) 
   *    WITH 0.5in MARGINS
   *************************************************/
  @page {
    size: letter;       /* Some browsers interpret 'letter' directly */
    size: 8.5in 11in;   /* Others prefer explicit inches */
    margin: 0 !important;      /* Half-inch margin to avoid printer clipping */
  }

  /*************************************************
   * 2) HIDE EVERYTHING EXCEPT .viewport
   *************************************************/
  body > :not(.viewport) {
    display: none !important;
    visibility: hidden !important;
  }

  /*************************************************
   * 3) .viewport: CENTER IT, FIXED WIDTH = 6.5in
   *    This leaves ~0.5in margin on each side
   *    for an 8.5in wide page.
   *************************************************/
  .viewport {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    margin: 0 !important;     /* Center horizontally */
    padding: 0 !important;
    box-sizing: none !important;

    /* Remove transforms/positioning that can break printing */
    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
  }
    
.viewport {
  width: 100% !important;
  min-width: 8.5in !important;
  height: auto !important;
  margin: 0 !important;
}

  /*************************************************
   * 4) INSIDE .viewport, SHOW ONLY #svgContainer
   *    (Hide sidebars, modals, other siblings)
   *************************************************/
  .viewport > :not(#svgContainer) {
    display: none !important;
    visibility: hidden !important;
  }

  /*************************************************
   * 5) #svgContainer: FULL WIDTH (OF .viewport)
   *************************************************/
  #svgContainer {
      background:none !important;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;  
    height: auto!important;
    margin: 0 !important;
    padding: 0 !important;
      object-fit:fill;

    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
  }
#svgContainer {
  display: flex !important;
  justify-content: center !important;
  align-items: top !important;
  height: auto !important;
}

  /*************************************************
   * 6) SCALE THE <svg> TO 100% WIDTH
   *************************************************/
#svgContainer svg {
  width: 10in !important;      /* max safe printable width with 0.5in margins */
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  position: static !important;
  preserveAspectRatio: xMidYMid meet !important;
}

  /*************************************************
   * 7) FORCE <image> ELEMENTS TO DISPLAY
   *    Remove any transforms that might shrink
   *    or move them off-page in Chrome/Safari
   *************************************************/
  #svgContainer image {
    display: block !important;
    visibility: visible !important;
    /* Allow images to scale naturally */
    max-width: 100% !important;
    height: auto !important;

    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
    overflow: visible !important;
  }

  /* Specifically handle editable-image class */
  #svgContainer image.editable-image {
    display: block !important;
    visibility: visible !important;
    max-width: 100% !important;    /* Let SVG handle scaling */
    height: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
    overflow: visible !important;
  }

  /*************************************************
   * 8) REMOVE ANY REMAINING TRANSFORMS
   *    ON GROUPS OR OTHER ELEMENTS
   *************************************************/
  #svgContainer [transform] {
    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
  }

  /*************************************************
   * 9) ENSURE THE SVG HAS THE CORRECT NAMESPACES
   *    (Must be set in the SVG file itself)
   *************************************************/
  /* Your SVG tag should look like this:
     <svg xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          preserveAspectRatio="xMidYMid meet"
          ... >
  */

  /*************************************************
   * 10) ADDITIONAL CENTERING FOR CHROME
   *************************************************/
  /* Chrome sometimes ignores flex alignment in print mode.
     To counteract this, use absolute positioning to center .viewport */
  @page {
    size: letter;
    margin: 0 !important;
  }

  body {
    position: relative;
  }

    html, body {
      background: none !important;
      overflow: hidden !important;
      -webkit-print-color-adjust: exact !important;
    }
    
}