.page-header--akten {
  --page-header-tone: #15803d;
}

.page-header--iratok {
  --page-header-tone: #2563eb;
  --page-header-fill-strength: 30%;
}

.page-header--feladatok {
  --page-header-tone: #b45309;
}

.page-header--uzenetek {
  --page-header-tone: #7c3aed;
}

#app-main:has(
  .page-header--akten,
  .page-header--iratok,
  .page-header--feladatok,
  .page-header--uzenetek
) {
  container-type: inline-size;
  padding-top: 0;
}

.app-container:has(
  .page-header--akten,
  .page-header--iratok,
  .page-header--feladatok,
  .page-header--uzenetek
) {
  max-width: none;
}

.glass-card:has(
  .page-header--akten,
  .page-header--iratok,
  .page-header--feladatok,
  .page-header--uzenetek
) {
  padding-top: 0;
  border-top: 0;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.page-header--akten,
.page-header--iratok,
.page-header--feladatok,
.page-header--uzenetek {
  position: relative;
  left: 50%;
  width: 100cqi;
  transform: translateX(-50%);
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  background-color: color-mix(
    in srgb,
    var(--page-header-tone) var(--page-header-fill-strength, 16%),
    var(--bg-card, #ffffff)
  );
  border-bottom: 5px solid var(--page-header-tone);
  padding: 0.75rem 1rem;
}