/**
 * App-wide responsive layout — mobile through 4K / ultrawide.
 * Use .app-page on main shells; .app-page-wide on Set Coordinates.
 */

.app-page {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  max-width: 100%;
}

.app-page-wide {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .app-page {
    max-width: min(96vw, 80rem);
  }

  .app-page-wide {
    max-width: min(97vw, 96rem);
  }
}

@media (min-width: 1280px) {
  .app-page {
    max-width: min(94vw, 90rem);
  }

  .app-page-wide {
    max-width: min(96vw, 112rem);
  }
}

@media (min-width: 1536px) {
  .app-page {
    max-width: min(92vw, 100rem);
  }

  .app-page-wide {
    max-width: min(95vw, 128rem);
  }

  .app-page .app-inner-fluid,
  .app-page-wide .app-inner-fluid {
    max-width: 100% !important;
  }
}

@media (min-width: 1920px) {
  .app-page {
    max-width: min(90vw, 112rem);
  }

  .app-page-wide {
    max-width: min(93vw, 140rem);
  }
}

@media (min-width: 2560px) {
  .app-page {
    max-width: min(88vw, 120rem);
  }

  .app-page-wide {
    max-width: min(90vw, 150rem);
  }
}

@media (min-width: 3440px) {
  .app-page {
    max-width: min(86vw, 132rem);
  }

  .app-page-wide {
    max-width: min(88vw, 160rem);
  }
}

/* Workspace backgrounds scale on large displays */
@media (min-width: 1920px) {
  .workspace-bg {
    background:
      radial-gradient(circle at top left, rgba(0, 141, 210, 0.18), transparent 42rem),
      radial-gradient(circle at bottom right, rgba(60, 61, 55, 0.14), transparent 40rem),
      #eef4f8;
  }

  .app-shell {
    background:
      radial-gradient(circle at 8% 0%, rgba(0, 141, 210, 0.12), transparent 28rem),
      radial-gradient(circle at 92% 100%, rgba(99, 102, 241, 0.1), transparent 32rem),
      #f1f5f9;
  }
}

/* Set Coordinates — use more horizontal space on large screens */
@media (min-width: 1280px) {
  .coord-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 24rem);
  }
}

@media (min-width: 1536px) {
  .coord-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 28rem);
  }

  .coord-live-preview-img,
  .coord-template-img {
    max-height: min(78vh, 1000px) !important;
  }
}

@media (min-width: 1920px) {
  .coord-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 32rem);
    gap: 0.75rem;
  }

  .coord-live-preview-img,
  .coord-template-img {
    max-height: min(82vh, 1200px) !important;
  }
}

@media (min-width: 2560px) {
  .coord-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 36rem);
  }

  .coord-live-preview-img,
  .coord-template-img {
    max-height: min(85vh, 1400px) !important;
  }
}

/* Tables: allow full width inside wide shells */
@media (min-width: 1536px) {
  .app-page .responsive-table-wrap,
  .app-page-wide .responsive-table-wrap {
    width: 100%;
  }
}

/* Utility: prevent horizontal overflow on small screens */
.app-page,
.app-page-wide {
  overflow-x: clip;
}

@media (max-width: 639px) {
  .app-page,
  .app-page-wide {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}