/*
  responsive.css
  Paa mindre skaerme stables panelerne. Preview skal stadig kunne ses uden
  vandret scroll. Ingen layout-hop.
*/

/* Mellemstore skaerme: smallere sidepaneler */
@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(260px, 300px);
  }
}

/* Tablet og ned: to kolonner, kvalitet flyttes under kontrol */
@media (max-width: 960px) {
  body {
    overflow: auto; /* tillad lodret scroll naar stablet */
  }

  .app {
    height: auto;
    min-height: 100dvh;
  }

  .workspace {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .panel {
    border: none;
    border-bottom: var(--hairline);
  }

  /* Preview foerst og synligt, staar klistret oeverst under topbar */
  .panel--preview {
    order: -1;
    position: sticky;
    top: 64px;
    z-index: 5;
    max-height: 60vh;
  }

  .panel--control .panel__body,
  .panel--quality .panel__body {
    overflow: visible;
  }

  .panel--preview .panel__body {
    min-height: 320px;
  }
}

/* Telefon */
@media (max-width: 560px) {
  .topbar {
    height: auto;
    padding: 10px var(--space-2);
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .panel--preview {
    top: 0;
    position: relative;
    max-height: none;
  }

  .choice-grid {
    grid-template-columns: 1fr 1fr;
  }

  .btn {
    padding: 0 12px;
    font-size: 13px;
  }
}

@media (max-width: 720px) {
  .autosave-status {
    flex-basis: 100%;
    max-width: none;
    text-align: left;
  }

  .history-actions {
    order: -1;
  }
}

@media (max-width: 720px) {
  .field-status {
    align-items: stretch;
    flex-direction: column;
  }
  .field-status__select {
    width: 100%;
  }
  .quality-issue {
    grid-template-columns: 1fr;
  }
  .quality-issue__badge {
    width: fit-content;
  }
}

/* V2.4: previewværktøjer og formular forbliver anvendelige på smalle flader. */
@media (max-width: 960px) {
  .topbar {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    padding-block: 8px;
  }

  .topbar__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .panel--preview {
    position: relative;
    top: auto;
    max-height: none;
  }

  .panel--preview .panel__body {
    min-height: min(620px, 72vh);
  }
}

@media (max-width: 720px) {
  .preview-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .preview-tools {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .preview-guide-description {
    text-align: left;
  }

  .panel--preview .panel__body {
    min-height: 520px;
    padding: var(--space-2);
  }
}

@media (max-width: 560px) {
  .topbar__brand,
  .topbar__actions {
    width: 100%;
  }

  .topbar__actions .btn:not(.btn--icon) {
    flex: 1 1 132px;
  }

  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-tool-toggle {
    flex: 1 1 125px;
  }

  .preview-guide-description {
    display: grid;
    gap: 3px;
  }

  .panel--preview .panel__body {
    min-height: 440px;
  }

  .modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 380px) {
  .template-grid,
  .choice-grid {
    grid-template-columns: 1fr;
  }

  .panel--control .panel__body,
  .panel--quality .panel__body {
    padding-inline: var(--space-2);
  }
}