/* =====================================================================
   layout.css — Grade principal da aplicação
   ---------------------------------------------------------------------
   Usa CSS Grid com 3 linhas (cabeçalho / conteúdo / status) e
   2 colunas (painel lateral / palco central).

     ┌──────────────── header ────────────────┐
     │ sidebar │          stage               │
     ├──────────────── status ────────────────┤

   Em telas estreitas (< 860px) o painel lateral vai para baixo do palco.
   ===================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr var(--status-height);
  grid-template-areas:
    "header  header"
    "sidebar stage"
    "status  status";
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---------- Cabeçalho ---------- */
.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Painel lateral ---------- */
.app-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

/* ---------- Palco central ---------- */
.app-stage {
  grid-area: stage;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;          /* permite que o canvas encolha dentro do grid */
  padding: var(--space-5);
}

/* ---------- Barra de status ---------- */
.app-status {
  grid-area: status;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Telas "Lote", "Clientes" e "Estampas" (data-mode="batch" | "clients" | "gallery") ----------
   Escondem painel + preview e ocupam a área dos dois. */
.app[data-mode="batch"],
.app[data-mode="clients"],
.app[data-mode="gallery"],
.app[data-mode="mockup"],
.app[data-mode="studio"] {
  grid-template-areas:
    "header header"
    "batch  batch"
    "status status";
}

.app[data-mode="batch"] .app-sidebar,
.app[data-mode="batch"] .app-stage,
.app[data-mode="batch"] .editor-only,
.app[data-mode="clients"] .app-sidebar,
.app[data-mode="clients"] .app-stage,
.app[data-mode="clients"] .editor-only,
.app[data-mode="gallery"] .app-sidebar,
.app[data-mode="gallery"] .app-stage,
.app[data-mode="gallery"] .editor-only,
.app[data-mode="mockup"] .app-sidebar,
.app[data-mode="mockup"] .app-stage,
.app[data-mode="mockup"] .editor-only,
.app[data-mode="studio"] .app-sidebar,
.app[data-mode="studio"] .app-stage,
.app[data-mode="studio"] .editor-only {
  display: none;
}

.app-batch {
  grid-area: batch;
  min-height: 0;
  overflow-y: auto;
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(320px, 1fr) auto var(--status-height);
    grid-template-areas:
      "header"
      "stage"
      "sidebar"
      "status";
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .app-header {
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
  }

  .app-sidebar {
    border-right: 0;
    border-top: 1px solid var(--color-border);
  }

  .app-stage {
    height: 60vh;
    padding: var(--space-4);
  }

  .app[data-mode="batch"],
  .app[data-mode="clients"],
  .app[data-mode="gallery"],
  .app[data-mode="mockup"],
  .app[data-mode="studio"] {
    grid-template-areas:
      "header"
      "batch"
      "status";
    grid-template-rows: auto 1fr var(--status-height);
  }
}