/* ================================
   Heimdall Masonry Grid (Centered, Responsive)
   ================================ */

/* Container: centered and responsive to window width */
#app #sortable.categories{
  display: block;
  /* Let the browser decide how many columns fit */
  column-width: 260px;                 /* target column width */
  column-gap: 24px;                    /* space between columns */

  /* Centering and sizing */
  width: 100%;
  max-width: clamp(320px, 100% - 32px, 1400px);  /* side gutters + cap on huge screens */
  margin-inline: auto;                 /* center the grid */
  box-sizing: border-box;
  padding-inline: 16px;                /* small gutters on tiny screens */
}

/* Category cards behave like masonry blocks */
.category{
  display: inline-block;               /* required for multi-column masonry */
  width: 100%;
  break-inside: avoid;                 /* avoid splitting a card across columns */

  /* entrance effect */
  -webkit-animation: slide-in-top 0.5s cubic-bezier(.25,.46,.45,.94) both;
          animation: slide-in-top 0.5s cubic-bezier(.25,.46,.45,.94) both;
}

/* Header box styling */
#app #sortable.categories .category > .title{
  padding: 10px 0 10px 15px;
  border-radius: 10px 10px 0 0;
  background-color: #0000004f;
}

/* Buttons / items */
.item{ 
  height: 50px;
  background-color: #161b1f;          /* unify background color */
}

/* Hide white bubble */
.item::after{ 
  display: none; 
}

/* Hide arrow */
.fa-arrow-alt-to-right{ 
  display: none; 
}

/* Icon sizing */
.app-icon{ 
  max-width: 36px; 
  max-height: 36px; 
}

/* Icon container width */
.app-icon-container{ 
  flex-basis: 36px; 
}

/* Hide tooltips */
.tooltip{ 
  display: none; 
}

/* Wider CSS editing area (desktop) */
.module-container{ 
  max-width: 1090px; 
}
div.create .input{ 
  width: 1020px; 
}
div.create .input textarea{ 
  width: 1020px; 
  height: 600px; 
}

/* Small-screen tweak for config buttons */
@media (max-width: 767px){
  #config-buttons a{
    width: 35px;
    height: 35px;
  }
}

/* ========== Animations ========== */
@-webkit-keyframes slide-in-top{
  0%{ -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; }
  100%{ -webkit-transform: translateY(0);       transform: translateY(0);       opacity: 1; }
}
@keyframes slide-in-top{
  0%{ -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; }
  100%{ -webkit-transform: translateY(0);       transform: translateY(0);