/*
 * Desktop density normalization
 *
 * The management UI was composed and approved while the browser was at 80%
 * zoom. Keep browsers at their standard 100% zoom and reproduce that density
 * at the application layer. The inverse canvas size prevents the scaled page
 * from leaving unused space at the right or bottom of the viewport.
 */
:root {
  --mci-desktop-density: 0.8;
  --mci-desktop-canvas: 125%;
}

@media screen and (min-width: 1200px) {
  html {
    width: var(--mci-desktop-canvas);
    min-height: var(--mci-desktop-canvas);
    zoom: var(--mci-desktop-density);
    overflow-x: hidden;
  }

  body {
    min-height: 125vh;
  }

  /*
   * The management shell has a fixed sidebar. Its original 100vh becomes only
   * 80% of the visible height after density scaling, so give fixed viewport
   * surfaces the inverse height.
   */
  #left-sidebar-nav,
  #slide-out.side-nav.fixed.leftside-navigation,
  #slide-out.side-nav.leftside-navigation {
    height: 125vh !important;
    min-height: 125vh !important;
    max-height: 125vh !important;
  }

  #main,
  #main .wrapper {
    min-height: 125vh !important;
  }

  /*
   * The root canvas is 125% wide, while only 80% of that canvas is visible at
   * once. Keep content inside that visible portion, then subtract the fixed
   * sidebar so filters, cards, and their action controls remain on-screen.
   */
  #content {
    width: calc(80% - var(--mci-sidebar-width, 340px)) !important;
    max-width: calc(80% - var(--mci-sidebar-width, 340px)) !important;
    box-sizing: border-box;
  }

  /* Public login page: keep every full-width band inside the visible canvas. */
  body.features-page > .top-nav,
  body.features-page > #lambda-navbar,
  body.features-page > section,
  body.features-page > footer {
    width: 80% !important;
    max-width: 80% !important;
    box-sizing: border-box;
  }

  body.features-page #login,
  body.features-page #login .login-sec {
    min-height: calc(125vh - 112px) !important;
  }

  body.features-page > .scroll-top {
    right: calc(20% + 24px) !important;
  }

  body.features-page > .modal {
    width: 80% !important;
    height: 125vh !important;
  }
}

/* Printed reports and receipts must retain their real document dimensions. */
@media print {
  html {
    width: 100% !important;
    min-height: 100% !important;
    zoom: 1 !important;
    overflow-x: visible !important;
  }

  body {
    min-height: auto !important;
  }
}