/*
 * Whole-site desktop scale.
 *
 * Change only --shop-desktop-page-scale when the client and admin interfaces
 * need to be larger or smaller (0.86 gives a compact desktop layout).
 * This is layout-level zoom, so fixed pixel dimensions, images, sidebars,
 * headers, tables and modal contents all scale together.
 */
:root {
  --shop-desktop-page-scale: 0.86;
  --shop-ui-base-font-size: 16px;
}

html,
body {
  font-size: var(--shop-ui-base-font-size);
}

/*
 * Both desktop frameworks enter their fixed-sidebar layouts at 992px. Apply
 * scaling only from that breakpoint so mobile viewport and touch coordinates
 * stay native and horizontal overflow is not introduced.
 */
@media (min-width: 992px) {
  body {
    zoom: var(--shop-desktop-page-scale);
  }

  /*
   * AdminLTE fixes .main-sidebar at 100vh. When its parent body is zoomed,
   * that 100vh is also visually reduced and the dark sidebar ends
   * above the bottom edge. Compensate the outer shell as well as the scrolling
   * inner sidebar so its background and shadow always fill the real viewport.
   */
  body.layout-fixed .main-sidebar,
  body.layout-fixed .main-sidebar::before {
    bottom: auto;
    height: calc(100vh / var(--shop-desktop-page-scale));
    min-height: calc(100vh / var(--shop-desktop-page-scale));
  }

  /*
   * Bootstrap uses viewport units for its backdrop. Compensate those lengths
   * so it still covers the complete physical viewport after page zoom.
   */
  .modal-backdrop {
    width: calc(100vw / var(--shop-desktop-page-scale));
    height: calc(100vh / var(--shop-desktop-page-scale));
  }

  /* Keep the client sidebar's scroll track as tall as the visible window. */
  #sidebar-scrollbar,
  .data-scrollbar {
    height: calc(100vh / var(--shop-desktop-page-scale));
  }

  .content-page {
    min-height: calc((100vh / var(--shop-desktop-page-scale)) - 50px);
  }

  /*
   * AdminLTE's inner sidebar normally uses 100vh. Restore the physical
   * viewport height after zoom while keeping its original header deduction.
   */
  body.layout-fixed .wrapper .sidebar {
    height: calc((100vh / var(--shop-desktop-page-scale)) - (3.5rem + 1px));
  }
}

@media (min-width: 1300px) {
  .iq-footer {
    width: calc((100vw / var(--shop-desktop-page-scale)) - 260px);
  }

  body.sidebar-main .iq-footer {
    width: calc((100vw / var(--shop-desktop-page-scale)) - 85px);
  }
}

@media (min-width: 1500px) {
  body.right-sidebar-close footer {
    width: calc((100vw / var(--shop-desktop-page-scale)) - 260px);
  }
}

@media (max-width: 991.98px) {
  body {
    zoom: 1;
  }
}

@media (max-width: 767.98px) {
  :root {
    --shop-ui-base-font-size: 15.5px;
  }
}