/* =========================================================
   Layout global
   ========================================================= */

.app-shell {
  min-height: 100vh;
  min-height: 100svh;
}


/* ---------------------------------------------------------
   Sidebar / conteúdo principal
   --------------------------------------------------------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;

  z-index: 50;

  width: var(--sidebar-width);

  padding:
    18px
    14px
    14px;

  display: flex;
  flex-direction: column;

  color: #e6efef;
  background: var(--brand-900);

  box-shadow:
    8px 0 30px
    rgba(8, 27, 35, .08);
}

.app-main {
  min-height: 100vh;
  min-height: 100svh;

  margin-left: var(--sidebar-width);
}


/* ---------------------------------------------------------
   Conteúdo
   --------------------------------------------------------- */

.page-container {
  width: min(
    var(--content-max),
    calc(100% - 56px)
  );

  margin-inline: auto;

  padding-block:
    var(--space-8)
    72px;
}


/* ---------------------------------------------------------
   Cabeçalho das páginas
   --------------------------------------------------------- */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: var(--space-6);

  margin-bottom: var(--space-6);
}

.page-header > div:first-child {
  min-width: 0;
}

.page-header h1 {
  margin:
    var(--space-1)
    0
    var(--space-2);

  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);

  letter-spacing: -.035em;
}

.page-header p {
  max-width: 780px;

  margin: 0;

  color: var(--text-secondary);
}


/* ---------------------------------------------------------
   Área pública
   --------------------------------------------------------- */

.public-shell {
  min-height: 100vh;
  min-height: 100svh;
}


/* ---------------------------------------------------------
   Overlay da navegação mobile
   --------------------------------------------------------- */

.sidebar-overlay {
  display: none;
}


/* =========================================================
   Tablet / navegação lateral recolhida
   ========================================================= */

@media (max-width: 950px) {

  .sidebar {
    transform: translateX(-105%);

    transition:
      transform
      var(--motion-base)
      ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }


  .sidebar-overlay {
    position: fixed;
    inset: 0;

    z-index: 45;

    background:
      rgba(7, 23, 29, .42);
  }

  .sidebar-overlay.open {
    display: block;
  }


  .app-main {
    margin-left: 0;
  }


  .page-container {
    width: min(
      100% - 32px,
      var(--content-max)
    );
  }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 680px) {

  .page-container {
    width: min(
      100% - 24px,
      var(--content-max)
    );

    padding-top: var(--space-5);
  }


  .page-header {
    align-items: stretch;
    flex-direction: column;

    gap: var(--space-4);
  }

  .page-header h1 {
    font-size: 30px;
  }

}


/* =========================================================
   Movimento reduzido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sidebar {
    transition: none;
  }

}

/* =========================================================
   Compatibilidade final de layout
   ========================================================= */

.compact-header {
  align-items: flex-start;
}


@media (max-width: 680px) {

  /*
   * Reserva espaço para a navegação inferior fixa.
   */
  .page-container {
    padding-bottom:
      calc(
        88px
        + env(safe-area-inset-bottom)
      );
  }

}