/* Shared workspace for every secondary editor tool. */

body:is(.editor-tool-page, .editor-document-page) {
  margin: 0;
  width: min(1280px, calc(100vw - 20px));
  height: min(820px, calc(100vh - 20px));
  max-width: 1280px;
  max-height: 820px;
  min-width: 0;
  min-height: 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  overflow: hidden;
}

body.editor-tool-page {
  color: var(--ui-color-text);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, .10), rgba(37, 99, 235, .07) 52%, rgba(249, 245, 236, .92));
}

body.editor-tool-page :where(.app, .certificate-app) {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  border: 2px solid rgba(14, 165, 233, .72);
  border-radius: 22px;
  background: rgba(239, 248, 249, .94);
  box-shadow: 0 18px 48px rgba(15, 83, 89, .13);
}

body.editor-tool-page :where(.header, .app-header) {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 7px 150px;
  border-radius: 19px 19px 0 0;
  overflow: hidden;
}

body.editor-tool-page :where(.header, .app-header) :where(.back, a) {
  position: absolute;
  inset-inline-start: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 34px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .08);
}

body.editor-tool-page :where(.workspace, .app-workspace) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(235, 250, 247, .78), rgba(239, 246, 255, .82) 55%, rgba(255, 250, 240, .78));
}

body.editor-tool-page :where(.tools, .stage-box, .main-panel, .settings, .controls, .studio, .entry-panel, .preview-panel) {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 15px;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 8px 22px rgba(15, 83, 89, .07);
}

body.editor-images-tool .workspace,
body.editor-stamp-tool .workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}

body.editor-converter-tool .workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 10px;
  padding: 10px;
}

body.editor-certificate-tool .app-workspace {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  background:
    linear-gradient(120deg, rgba(235, 250, 247, .78), rgba(239, 246, 255, .82) 55%, rgba(255, 250, 240, .78));
}

body.editor-certificate-tool .app-header > span {
  display: none;
}

body.editor-certificate-tool .entry-panel {
  align-self: stretch;
}

body.editor-certificate-tool .preview-panel {
  background: rgba(255, 255, 255, .72);
}

body.editor-tool-page :where(input, select, textarea, button) {
  box-sizing: border-box;
}

@media (max-width: 850px) {
  body.editor-tool-page { overflow: auto; }
  body.editor-images-tool .workspace,
  body.editor-stamp-tool .workspace,
  body.editor-converter-tool .workspace,
  body.editor-certificate-tool .app-workspace {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  body.editor-tool-page :where(.header, .app-header) { padding-inline: 110px; }
}

@media print {
  body:is(.editor-tool-page, .editor-document-page) {
    position: static;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    transform: none;
  }
  body.editor-tool-page { background: #fff; overflow: visible; }
  body.editor-tool-page :where(.app, .certificate-app, .workspace, .app-workspace, .preview-panel) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }
}